Repository: tusen-ai/naive-ui Branch: main Commit: dbb66f5ca4cc Files: 3559 Total size: 7.2 MB Directory structure: gitextract_o125x3e3/ ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.yml │ │ ├── bug_report.zh-CN.yml │ │ ├── config.yml │ │ ├── feature_request.yml │ │ └── feature_request.zh-CN.yml │ ├── dependabot.yml │ ├── pull_request_template.md │ └── workflows/ │ ├── node.js.yml │ └── publish-to-pkg.pr.new.yml ├── .gitignore ├── .husky/ │ └── pre-commit ├── .npmrc ├── .nvmrc ├── .pnpmfile.cjs ├── .prettierignore ├── .prettierrc ├── CHANGELOG.en-US.md ├── CHANGELOG.zh-CN.md ├── CONTRIBUTING.md ├── CONTRIBUTING.zh-CN.md ├── LICENSE ├── README.md ├── README.zh-CN.md ├── babel.config.js ├── build/ │ ├── loaders/ │ │ ├── ComponentDemoTemplate.vue │ │ ├── convert-md-to-doc.ts │ │ ├── convert-vue-to-demo.ts │ │ ├── md-renderer.ts │ │ ├── naive-ui-demo-loader.ts │ │ ├── naive-ui-doc-loader.ts │ │ ├── project-path.ts │ │ └── test/ │ │ ├── basic.test.md │ │ ├── component.test.md │ │ ├── test.md │ │ ├── testDemoLoader.js │ │ └── testMdLoader.js │ ├── utils/ │ │ ├── get-demo-by-path.ts │ │ ├── handle-merge-code.ts │ │ ├── terse-cssr.ts │ │ └── tsToJs.ts │ ├── vite-plugin-css-render.ts │ ├── vite-plugin-demo.ts │ └── vite-plugin-index-tranform.ts ├── demo/ │ ├── Caveat.md │ ├── Site.vue │ ├── SiteHeader.vue │ ├── SiteRoot.vue │ ├── index.dev.js │ ├── index.prod.js │ ├── pages/ │ │ ├── Layout.vue │ │ ├── docs/ │ │ │ ├── changelog/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.vue │ │ │ │ └── zhCN/ │ │ │ │ └── index.vue │ │ │ ├── common-issues/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── community/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── controlled-uncontrolled/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── customize-theme/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── experimental-features/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── fonts/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── i18n/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── import-on-demand/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── installation/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── introduction/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── jsx/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── nuxtjs/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── ssr/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── style-conflict/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── supported-platforms/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── theme/ │ │ │ │ ├── enUS/ │ │ │ │ │ ├── element.demo.vue │ │ │ │ │ ├── index.demo-entry.md │ │ │ │ │ ├── provide-theme.demo.vue │ │ │ │ │ └── use-theme-vars.demo.vue │ │ │ │ └── zhCN/ │ │ │ │ ├── element.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── provide-theme.demo.vue │ │ │ │ └── use-theme-vars.demo.vue │ │ │ ├── umd/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── usage-sfc/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── vite-ssge/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ ├── vitepress/ │ │ │ │ ├── enUS/ │ │ │ │ │ └── index.md │ │ │ │ └── zhCN/ │ │ │ │ └── index.md │ │ │ └── vue3/ │ │ │ ├── enUS/ │ │ │ │ └── index.vue │ │ │ └── zhCN/ │ │ │ └── index.vue │ │ └── home/ │ │ ├── Footer.vue │ │ ├── Left.vue │ │ ├── Right.vue │ │ └── index.vue │ ├── routes/ │ │ ├── router.js │ │ └── routes.js │ ├── setup.js │ ├── store/ │ │ ├── hljs.js │ │ ├── index.js │ │ └── menu-options.js │ ├── styles/ │ │ ├── Metropolis.css │ │ └── demo.css │ └── utils/ │ ├── ComponentDemo.vue │ ├── ComponentDemos.tsx │ ├── CopyCodeButton.vue │ ├── EditInCodeSandboxButton.vue │ ├── EditInPlaygroundButton.vue │ ├── EditOnGithubButton.vue │ ├── EditOnGithubHeader.vue │ ├── codesandbox.js │ ├── composables.js │ ├── composables.ts │ ├── github-url.js │ ├── playground.js │ └── route.js ├── design-notes/ │ ├── design-token-status.md │ ├── how-to-name-a-style-var.md │ ├── maintaining.md │ ├── think.md │ └── todo.md ├── eslint.config.mjs ├── esm-test/ │ └── index.spec.js ├── generic/ │ ├── AvatarGroup.vue │ └── index.ts ├── index.html ├── package.json ├── playground/ │ ├── collect-vars.js │ ├── ssr/ │ │ ├── app.js │ │ ├── build.sh │ │ ├── client.js │ │ ├── pre-build.sh │ │ ├── readme.md │ │ ├── server.js │ │ └── webpack.config.server.js │ ├── testAsyncValidator.js │ ├── testColor.js │ └── uploadServer.js ├── postcss.config.js ├── rollup.config.mjs ├── scripts/ │ ├── gen-component-declaration.ts │ ├── gen-css-vars-dts.ts │ ├── gen-version.ts │ ├── md-to-vue.ts │ ├── post-build/ │ │ ├── complete-path.ts │ │ ├── gen-web-types.ts │ │ ├── index.ts │ │ └── terse-cssr.ts │ ├── post-build-site/ │ │ └── post-build-site.sh │ ├── pre-build/ │ │ └── pre-cjs-build.ts │ ├── pre-build-site/ │ │ └── pre-build-site.sh │ ├── release-changelog.ts │ └── utils/ │ ├── collect-vars.ts │ ├── index.ts │ ├── loader.ts │ └── replace-define.ts ├── src/ │ ├── _internal/ │ │ ├── README.md │ │ ├── clear/ │ │ │ ├── index.ts │ │ │ └── src/ │ │ │ ├── Clear.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── close/ │ │ │ ├── index.ts │ │ │ └── src/ │ │ │ ├── Close.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── fade-in-expand-transition/ │ │ │ ├── index.ts │ │ │ └── src/ │ │ │ └── FadeInExpandTransition.ts │ │ ├── focus-detector/ │ │ │ ├── index.tsx │ │ │ └── src/ │ │ │ └── FocusDetector.tsx │ │ ├── icon/ │ │ │ ├── index.ts │ │ │ └── src/ │ │ │ ├── Icon.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── icon-switch-transition/ │ │ │ ├── index.ts │ │ │ └── src/ │ │ │ └── IconSwitchTransition.tsx │ │ ├── icons/ │ │ │ ├── Add.tsx │ │ │ ├── ArrowBack.tsx │ │ │ ├── ArrowDown.tsx │ │ │ ├── ArrowUp.tsx │ │ │ ├── Attach.tsx │ │ │ ├── Backward.tsx │ │ │ ├── Cancel.tsx │ │ │ ├── Checkmark.tsx │ │ │ ├── ChevronDown.tsx │ │ │ ├── ChevronDownFilled.tsx │ │ │ ├── ChevronLeft.tsx │ │ │ ├── ChevronRight.tsx │ │ │ ├── Clear.tsx │ │ │ ├── Close.tsx │ │ │ ├── Date.tsx │ │ │ ├── Download.tsx │ │ │ ├── Empty.tsx │ │ │ ├── Error.tsx │ │ │ ├── Eye.tsx │ │ │ ├── EyeOff.tsx │ │ │ ├── FastBackward.tsx │ │ │ ├── FastForward.tsx │ │ │ ├── File.tsx │ │ │ ├── Filter.tsx │ │ │ ├── Forward.tsx │ │ │ ├── Info.tsx │ │ │ ├── More.tsx │ │ │ ├── Photo.tsx │ │ │ ├── Remove.tsx │ │ │ ├── ResizeSmall.tsx │ │ │ ├── Retry.tsx │ │ │ ├── RotateClockwise.tsx │ │ │ ├── RotateCounterclockwise.tsx │ │ │ ├── Search.tsx │ │ │ ├── Success.tsx │ │ │ ├── Switcher.tsx │ │ │ ├── Time.tsx │ │ │ ├── To.tsx │ │ │ ├── Trash.tsx │ │ │ ├── Warning.tsx │ │ │ ├── ZoomIn.tsx │ │ │ ├── ZoomOut.tsx │ │ │ ├── index.ts │ │ │ └── replaceable.tsx │ │ ├── index.ts │ │ ├── loading/ │ │ │ ├── index.ts │ │ │ └── src/ │ │ │ ├── Loading.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── menu-mask/ │ │ │ ├── index.ts │ │ │ └── src/ │ │ │ ├── MenuMask.tsx │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── scrollbar/ │ │ │ ├── index.ts │ │ │ ├── src/ │ │ │ │ ├── Scrollbar.tsx │ │ │ │ └── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ ├── styles/ │ │ │ │ ├── common.ts │ │ │ │ ├── dark.ts │ │ │ │ ├── index.ts │ │ │ │ ├── light.ts │ │ │ │ └── rtl.ts │ │ │ └── tests/ │ │ │ ├── Scrollbar.spec.ts │ │ │ └── server.spec.tsx │ │ ├── select-menu/ │ │ │ ├── index.ts │ │ │ ├── src/ │ │ │ │ ├── SelectGroupHeader.tsx │ │ │ │ ├── SelectMenu.tsx │ │ │ │ ├── SelectOption.tsx │ │ │ │ ├── interface.ts │ │ │ │ └── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ └── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ ├── selection/ │ │ │ ├── index.ts │ │ │ ├── src/ │ │ │ │ ├── Selection.tsx │ │ │ │ ├── interface.ts │ │ │ │ └── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ └── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ ├── slot-machine/ │ │ │ ├── index.ts │ │ │ └── src/ │ │ │ ├── SlotMachine.tsx │ │ │ ├── SlotMachineNumber.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── suffix/ │ │ │ ├── index.ts │ │ │ └── src/ │ │ │ └── Suffix.tsx │ │ └── wave/ │ │ ├── index.ts │ │ └── src/ │ │ ├── Wave.tsx │ │ └── styles/ │ │ └── index.cssr.ts │ ├── _mixins/ │ │ ├── common.ts │ │ ├── index.ts │ │ ├── use-config.ts │ │ ├── use-css-vars-class.ts │ │ ├── use-form-item.ts │ │ ├── use-hljs.ts │ │ ├── use-locale.ts │ │ ├── use-rtl.ts │ │ ├── use-style.ts │ │ └── use-theme.ts │ ├── _styles/ │ │ ├── common/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ ├── global/ │ │ │ └── index.cssr.ts │ │ └── transitions/ │ │ ├── fade-down.cssr.ts │ │ ├── fade-in-height-expand.cssr.ts │ │ ├── fade-in-scale-up.cssr.ts │ │ ├── fade-in-width-expand.cssr.ts │ │ ├── fade-in.cssr.ts │ │ ├── fade-up-width-expand.cssr.ts │ │ ├── icon-switch.cssr.ts │ │ ├── slide-in-from-bottom.ts │ │ ├── slide-in-from-left.ts │ │ ├── slide-in-from-right.ts │ │ └── slide-in-from-top.ts │ ├── _utils/ │ │ ├── color/ │ │ │ └── index.ts │ │ ├── composable/ │ │ │ ├── index.ts │ │ │ ├── use-adjusted-to.ts │ │ │ ├── use-browser-location.ts │ │ │ ├── use-collection.ts │ │ │ ├── use-deferred-true.ts │ │ │ ├── use-houdini.ts │ │ │ ├── use-is-composing.ts │ │ │ ├── use-lock-html-scroll.ts │ │ │ ├── use-reactivated.ts │ │ │ └── use-resize.ts │ │ ├── css/ │ │ │ ├── color-to-class.ts │ │ │ ├── format-length.ts │ │ │ ├── index.ts │ │ │ └── rtl-inset.ts │ │ ├── cssr/ │ │ │ └── index.ts │ │ ├── dom/ │ │ │ ├── download.ts │ │ │ ├── index.ts │ │ │ └── is-document.ts │ │ ├── env/ │ │ │ ├── browser.ts │ │ │ ├── is-browser.ts │ │ │ ├── is-jsdom.ts │ │ │ └── is-native-lazy-load.ts │ │ ├── event/ │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── naive/ │ │ │ ├── attribute.ts │ │ │ ├── extract-public-props.ts │ │ │ ├── index.ts │ │ │ ├── mutable.ts │ │ │ ├── prop.ts │ │ │ ├── value.ts │ │ │ └── warn.ts │ │ ├── tests/ │ │ │ └── index.spec.ts │ │ ├── ts/ │ │ │ └── ts.ts │ │ └── vue/ │ │ ├── call.ts │ │ ├── create-data-key.ts │ │ ├── create-injection-key.ts │ │ ├── create-ref-setter.ts │ │ ├── flatten.ts │ │ ├── get-first-slot-vnode.ts │ │ ├── get-slot.ts │ │ ├── get-v-node-children.ts │ │ ├── index.ts │ │ ├── is-node-v-show-false.ts │ │ ├── keep.ts │ │ ├── keysOf.ts │ │ ├── merge-handlers.ts │ │ ├── omit.ts │ │ ├── render.ts │ │ ├── resolve-slot.ts │ │ └── wrapper.tsx │ ├── affix/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── position.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── position.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Affix.tsx │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ └── tests/ │ │ ├── Affix.spec.ts │ │ └── server.spec.tsx │ ├── alert/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── bordered.demo.vue │ │ │ │ ├── closable.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── marquee.demo.vue │ │ │ │ └── no-icon.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── bordered.demo.vue │ │ │ ├── closable.demo.vue │ │ │ ├── empty-debug.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── marquee.demo.vue │ │ │ ├── no-icon.demo.vue │ │ │ └── rtl-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Alert.tsx │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Alert.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Alert.spec.ts.snap │ │ └── server.spec.tsx │ ├── anchor/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── affix.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── ignore-gap.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── scrollto.demo.vue │ │ │ └── zhCN/ │ │ │ ├── affix.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── ignore-gap.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── max-height-debug.demo.vue │ │ │ └── scrollto.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── AnchorAdapter.tsx │ │ │ ├── BaseAnchor.tsx │ │ │ ├── Link.tsx │ │ │ ├── public-types.tsx │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Anchor.spec.ts │ │ └── server.spec.tsx │ ├── auto-complete/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── after-select.demo.vue │ │ │ │ ├── append.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom-input.demo.vue │ │ │ │ ├── customized-rendering.demo.vue │ │ │ │ ├── group.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── show-options-by-value.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ └── status.demo.vue │ │ │ └── zhCN/ │ │ │ ├── after-select.demo.vue │ │ │ ├── append.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── custom-input.demo.vue │ │ │ ├── customized-rendering.demo.vue │ │ │ ├── group.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── show-options-by-value.demo.vue │ │ │ ├── size.demo.vue │ │ │ └── status.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── AutoComplete.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── AutoComplete.spec.ts │ │ ├── __snapshots__/ │ │ │ └── AutoComplete.spec.ts.snap │ │ └── server.spec.tsx │ ├── avatar/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── badge.demo.vue │ │ │ │ ├── color.demo.vue │ │ │ │ ├── fallback.demo.vue │ │ │ │ ├── group.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── lazy.demo.vue │ │ │ │ ├── name-size.demo.vue │ │ │ │ ├── shape.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ └── v-show-debug.demo.vue │ │ │ └── zhCN/ │ │ │ ├── badge.demo.vue │ │ │ ├── color.demo.vue │ │ │ ├── error-placeholder-debug.demo.vue │ │ │ ├── fallback.demo.vue │ │ │ ├── group.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── lazy.demo.vue │ │ │ ├── name-size.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── shape.demo.vue │ │ │ ├── size.demo.vue │ │ │ └── v-show-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Avatar.tsx │ │ │ ├── context.ts │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Avatar.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Avatar.spec.tsx.snap │ │ └── server.spec.tsx │ ├── avatar-group/ │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── AvatarGroup.tsx │ │ │ ├── generic-public-types.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ ├── avatar-group-rtl.cssr.ts │ │ │ └── avatar-group.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Avatar.spec.tsx │ │ └── server.spec.tsx │ ├── back-top/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── change-position.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── target-container-selector.demo.vue │ │ │ │ └── visibility-height.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── change-position.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── target-container-selector.demo.vue │ │ │ └── visibility-height.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── BackTop.tsx │ │ │ ├── BackTopIcon.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── BackTop.spec.ts │ │ └── server.spec.tsx │ ├── badge/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── color.demo.vue │ │ │ │ ├── custom-content.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── manual.demo.vue │ │ │ │ ├── offset.demo.vue │ │ │ │ ├── overflow.demo.vue │ │ │ │ ├── processing.demo.vue │ │ │ │ ├── raw.demo.vue │ │ │ │ ├── show-zero.demo.vue │ │ │ │ └── type.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── color.demo.vue │ │ │ ├── custom-content.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── manual.demo.vue │ │ │ ├── offset.demo.vue │ │ │ ├── overflow.demo.vue │ │ │ ├── processing.demo.vue │ │ │ ├── raw.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── show-zero.demo.vue │ │ │ └── type.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Badge.tsx │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Badge.spec.ts │ │ └── server.spec.tsx │ ├── breadcrumb/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── separator-per-item.demo.vue │ │ │ │ └── separator.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── custom.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── separator-per-item.demo.vue │ │ │ └── separator.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Breadcrumb.tsx │ │ │ ├── BreadcrumbItem.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Breadcrumb.spec.ts │ │ └── server.spec.tsx │ ├── button/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── color.demo.vue │ │ │ │ ├── dashed.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── events.demo.vue │ │ │ │ ├── ghost.demo.vue │ │ │ │ ├── group.demo.vue │ │ │ │ ├── icon-button.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── loading.demo.vue │ │ │ │ ├── popover.demo.vue │ │ │ │ ├── quaternary.demo.vue │ │ │ │ ├── secondary.demo.vue │ │ │ │ ├── shape.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── tag.demo.vue │ │ │ │ ├── tertiary.demo.vue │ │ │ │ └── text.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── color.demo.vue │ │ │ ├── dashed.demo.vue │ │ │ ├── debug.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── events.demo.vue │ │ │ ├── ghost.demo.vue │ │ │ ├── group.demo.vue │ │ │ ├── icon-button.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── loading.demo.vue │ │ │ ├── popover.demo.vue │ │ │ ├── quaternary.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── secondary.demo.vue │ │ │ ├── shape.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── tag.demo.vue │ │ │ ├── tertiary.demo.vue │ │ │ └── text.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Button.tsx │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Button.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Button.spec.tsx.snap │ │ └── server.spec.tsx │ ├── button-group/ │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── ButtonGroup.tsx │ │ │ ├── context.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── ButtonGroup.spec.tsx │ │ └── server.spec.tsx │ ├── calendar/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ └── index.demo-entry.md │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Calendar.tsx │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Calendar.spec.tsx │ │ └── server.spec.tsx │ ├── card/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── border.demo.vue │ │ │ │ ├── closable.demo.vue │ │ │ │ ├── content-scrollable.demo.vue │ │ │ │ ├── cover.demo.vue │ │ │ │ ├── custom-style.demo.vue │ │ │ │ ├── embedded.demo.vue │ │ │ │ ├── hoverable.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── loading.demo.vue │ │ │ │ ├── no-title.demo.vue │ │ │ │ ├── segment.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ └── slots.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── border.demo.vue │ │ │ ├── closable.demo.vue │ │ │ ├── content-scrollable.demo.vue │ │ │ ├── cover.demo.vue │ │ │ ├── custom-style.demo.vue │ │ │ ├── embedded-debug.demo.vue │ │ │ ├── embedded.demo.vue │ │ │ ├── hoverable.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── loading.demo.vue │ │ │ ├── no-title.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── segment.demo.vue │ │ │ ├── size.demo.vue │ │ │ └── slots.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Card.tsx │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Card.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Card.spec.ts.snap │ │ └── server.spec.tsx │ ├── carousel/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── arrow.demo.vue │ │ │ │ ├── autoplay.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── centered.demo.vue │ │ │ │ ├── custom-arrow-and-dots.demo.vue │ │ │ │ ├── custom-card.demo.vue │ │ │ │ ├── custom-dots.demo.vue │ │ │ │ ├── dots.demo.vue │ │ │ │ ├── effect.demo.vue │ │ │ │ ├── hover.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── keyboard.demo.vue │ │ │ │ ├── mousewheel.demo.vue │ │ │ │ ├── simulate-drag.demo.vue │ │ │ │ ├── slides-per-view-auto.demo.vue │ │ │ │ ├── slides-per-view.demo.vue │ │ │ │ ├── space-between.demo.vue │ │ │ │ ├── transition-name.demo.vue │ │ │ │ └── vertical.demo.vue │ │ │ └── zhCN/ │ │ │ ├── arrow.demo.vue │ │ │ ├── autoplay.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── centered.demo.vue │ │ │ ├── custom-arrow-and-dots.demo.vue │ │ │ ├── custom-card.demo.vue │ │ │ ├── custom-dots.demo.vue │ │ │ ├── dots.demo.vue │ │ │ ├── effect.demo.vue │ │ │ ├── hover.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── keyboard.demo.vue │ │ │ ├── mousewheel.demo.vue │ │ │ ├── simulate-drag.demo.vue │ │ │ ├── slides-per-view-auto.demo.vue │ │ │ ├── slides-per-view.demo.vue │ │ │ ├── space-between.demo.vue │ │ │ ├── transition-name.demo.vue │ │ │ └── vertical.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Carousel.tsx │ │ │ ├── CarouselArrow.tsx │ │ │ ├── CarouselContext.ts │ │ │ ├── CarouselDots.tsx │ │ │ ├── CarouselItem.tsx │ │ │ ├── interface.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils/ │ │ │ ├── duplicatedLogic.ts │ │ │ ├── event.ts │ │ │ └── index.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Carousel.spec.tsx │ │ └── server.spec.tsx │ ├── cascader/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── action.demo.vue │ │ │ │ ├── check-strategy.demo.vue │ │ │ │ ├── custom-field.demo.vue │ │ │ │ ├── custom-render.demo.vue │ │ │ │ ├── focus.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── multiple-lazy.demo.vue │ │ │ │ ├── multiple.demo.vue │ │ │ │ ├── single-lazy.demo.vue │ │ │ │ ├── single.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── status.demo.vue │ │ │ │ └── virtual.demo.vue │ │ │ └── zhCN/ │ │ │ ├── action.demo.vue │ │ │ ├── check-strategy.demo.vue │ │ │ ├── custom-field.demo.vue │ │ │ ├── custom-render.demo.vue │ │ │ ├── default-value-debug.demo.vue │ │ │ ├── focus.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── multiple-lazy.demo.vue │ │ │ ├── multiple.demo.vue │ │ │ ├── single-lazy.demo.vue │ │ │ ├── single.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── status.demo.vue │ │ │ └── virtual.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Cascader.tsx │ │ │ ├── CascaderMenu.tsx │ │ │ ├── CascaderOption.tsx │ │ │ ├── CascaderSelectMenu.tsx │ │ │ ├── CascaderSubmenu.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Cascader.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Cascader.spec.ts.snap │ │ └── server.spec.tsx │ ├── checkbox/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── controlled.demo.vue │ │ │ │ ├── customize-value.demo.vue │ │ │ │ ├── event.demo.vue │ │ │ │ ├── focus.demo.vue │ │ │ │ ├── grid.demo.vue │ │ │ │ ├── group.demo.vue │ │ │ │ ├── indeterminate.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── controlled.demo.vue │ │ │ ├── customize-value.demo.vue │ │ │ ├── event.demo.vue │ │ │ ├── focus.demo.vue │ │ │ ├── grid.demo.vue │ │ │ ├── group.demo.vue │ │ │ ├── indeterminate.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── rtl-debug.demo.vue │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── CheckMark.tsx │ │ │ ├── Checkbox.tsx │ │ │ ├── CheckboxGroup.tsx │ │ │ ├── LineMark.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Checkbox.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Checkbox.spec.tsx.snap │ │ └── server.spec.tsx │ ├── code/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── inline.demo.vue │ │ │ │ ├── line-numbers.demo.vue │ │ │ │ └── softwrap.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── inline.demo.vue │ │ │ ├── line-numbers.demo.vue │ │ │ ├── loop-debug.demo.vue │ │ │ └── softwrap.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Code.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Code.spec.tsx │ │ └── server.spec.tsx │ ├── collapse/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── accordion.demo.vue │ │ │ │ ├── arrow-placement.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── customize-icon.demo.vue │ │ │ │ ├── default-expanded.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── display-directive.demo.vue │ │ │ │ ├── header-extra.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── item-header-click.demo.vue │ │ │ │ ├── nested.demo.vue │ │ │ │ └── trigger-areas.demo.vue │ │ │ └── zhCN/ │ │ │ ├── accordion.demo.vue │ │ │ ├── arrow-placement.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── customize-icon.demo.vue │ │ │ ├── default-expanded.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── display-directive.demo.vue │ │ │ ├── header-extra.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── item-header-click.demo.vue │ │ │ ├── nested.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ └── trigger-areas.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Collapse.tsx │ │ │ ├── CollapseItem.tsx │ │ │ ├── CollapseItemContent.tsx │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Collapse.spec.tsx │ │ └── server.spec.tsx │ ├── collapse-transition/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── rtl-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── CollapseTransition.tsx │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── CollapseTransition.spec.tsx │ │ └── server.spec.tsx │ ├── color-picker/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── actions.demo.vue │ │ │ │ ├── alpha.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── form.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── modes.demo.vue │ │ │ │ ├── native.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── swatches.demo.vue │ │ │ │ └── trigger.demo.vue │ │ │ └── zhCN/ │ │ │ ├── actions.demo.vue │ │ │ ├── alpha.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── close-debug.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── form.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── modes.demo.vue │ │ │ ├── native.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── swatches.demo.vue │ │ │ └── trigger.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── AlphaSlider.tsx │ │ │ ├── ColorInput.tsx │ │ │ ├── ColorInputUnit.tsx │ │ │ ├── ColorPicker.tsx │ │ │ ├── ColorPickerSwatches.tsx │ │ │ ├── ColorPickerTrigger.tsx │ │ │ ├── ColorPreview.tsx │ │ │ ├── HueSlider.tsx │ │ │ ├── Pallete.tsx │ │ │ ├── context.ts │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── ColorPicker.spec.tsx │ │ └── server.spec.tsx │ ├── components.ts │ ├── composables/ │ │ ├── index.ts │ │ └── use-theme-vars.ts │ ├── config-consumer/ │ │ └── demos/ │ │ ├── enUS/ │ │ │ └── index.demo-entry.md │ │ └── zhCN/ │ │ └── index.demo-entry.md │ ├── config-provider/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── inherit-theme.demo.vue │ │ │ │ ├── inline-theme-disabled.demo.vue │ │ │ │ ├── language.demo.vue │ │ │ │ ├── namespace.demo.vue │ │ │ │ ├── os-theme.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── theme.demo.vue │ │ │ │ └── transparent.demo.vue │ │ │ └── zhCN/ │ │ │ ├── index.demo-entry.md │ │ │ ├── inherit-theme.demo.vue │ │ │ ├── inline-theme-disabled.demo.vue │ │ │ ├── language.demo.vue │ │ │ ├── namespace.demo.vue │ │ │ ├── os-theme.demo.vue │ │ │ ├── overrides-inherit-debug.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── theme.demo.vue │ │ │ └── transparent.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── ConfigProvider.ts │ │ │ ├── config.ts │ │ │ ├── context.ts │ │ │ ├── interface.ts │ │ │ ├── internal-interface.ts │ │ │ └── katex.ts │ │ └── tests/ │ │ ├── ComponentSize.spec.tsx │ │ ├── ConfigProvider.spec.ts │ │ └── server.spec.tsx │ ├── countdown/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── precision.demo.vue │ │ │ │ ├── render.demo.vue │ │ │ │ └── reset.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── finish-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── precision.demo.vue │ │ │ ├── render.demo.vue │ │ │ └── reset.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ └── Countdown.tsx │ │ └── tests/ │ │ ├── Countdown.spec.ts │ │ └── server.spec.tsx │ ├── create.ts │ ├── data-table/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── ajax-usage.demo.vue │ │ │ │ ├── async-expand.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── border.demo.vue │ │ │ │ ├── column-draggable.demo.vue │ │ │ │ ├── context-menu.demo.vue │ │ │ │ ├── controlled-filter.demo.vue │ │ │ │ ├── controlled-multiple-sorter.demo.vue │ │ │ │ ├── controlled-page.demo.vue │ │ │ │ ├── controlled-sorter.demo.vue │ │ │ │ ├── custom-filter-menu.demo.vue │ │ │ │ ├── custom-select.demo.vue │ │ │ │ ├── custom-sorter.demo.vue │ │ │ │ ├── custom-style.demo.vue │ │ │ │ ├── ellipsis-tooltip.demo.vue │ │ │ │ ├── ellipsis.demo.vue │ │ │ │ ├── empty.demo.vue │ │ │ │ ├── expand.demo.vue │ │ │ │ ├── export-csv.demo.vue │ │ │ │ ├── filter-and-sorter.demo.vue │ │ │ │ ├── fixed-header-column.demo.vue │ │ │ │ ├── fixed-header.demo.vue │ │ │ │ ├── flex-height.demo.vue │ │ │ │ ├── group-header.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── merge-cell.demo.vue │ │ │ │ ├── multiple-sorter.demo.vue │ │ │ │ ├── pagination-behavior-on-filter.demo.vue │ │ │ │ ├── render-cell.demo.vue │ │ │ │ ├── render-header.demo.vue │ │ │ │ ├── row-props.demo.vue │ │ │ │ ├── select-single.demo.vue │ │ │ │ ├── select.demo.vue │ │ │ │ ├── simple-editable.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── striped.demo.vue │ │ │ │ ├── summary.demo.vue │ │ │ │ ├── switchable-editable.demo.vue │ │ │ │ ├── tree.demo.vue │ │ │ │ ├── virtual-x.demo.vue │ │ │ │ └── virtual.demo.vue │ │ │ └── zhCN/ │ │ │ ├── ajax-usage.demo.vue │ │ │ ├── async-expand.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── border.demo.vue │ │ │ ├── column-draggable.demo.vue │ │ │ ├── context-menu.demo.vue │ │ │ ├── controlled-filter.demo.vue │ │ │ ├── controlled-multiple-sorter.demo.vue │ │ │ ├── controlled-page.demo.vue │ │ │ ├── controlled-sorter.demo.vue │ │ │ ├── custom-expand-icon-debug.demo.vue │ │ │ ├── custom-filter-menu.demo.vue │ │ │ ├── custom-select.demo.vue │ │ │ ├── custom-sorter.demo.vue │ │ │ ├── custom-style.demo.vue │ │ │ ├── debug.demo.vue │ │ │ ├── ellipsis-debug.demo.vue │ │ │ ├── ellipsis-tooltip.demo.vue │ │ │ ├── ellipsis.demo.vue │ │ │ ├── empty-scroll-debug.demo.vue │ │ │ ├── empty.demo.vue │ │ │ ├── expand.demo.vue │ │ │ ├── expandable-debug.demo.vue │ │ │ ├── export-csv.demo.vue │ │ │ ├── filter-and-sorter.demo.vue │ │ │ ├── fixed-column-debug.demo.vue │ │ │ ├── fixed-column2-debug.demo.vue │ │ │ ├── fixed-header-column.demo.vue │ │ │ ├── fixed-header.demo.vue │ │ │ ├── flex-height.demo.vue │ │ │ ├── group-header.demo.vue │ │ │ ├── height-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── keep-alive-debug.demo.vue │ │ │ ├── merge-cell.demo.vue │ │ │ ├── multiple-sorter.demo.vue │ │ │ ├── pagination-behavior-on-filter.demo.vue │ │ │ ├── render-cell.demo.vue │ │ │ ├── render-header.demo.vue │ │ │ ├── row-props.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── scroll-debug.demo.vue │ │ │ ├── select-single.demo.vue │ │ │ ├── select.demo.vue │ │ │ ├── simple-editable.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── striped.demo.vue │ │ │ ├── summary-debug.demo.vue │ │ │ ├── summary.demo.vue │ │ │ ├── switchable-editable.demo.vue │ │ │ ├── tree.demo.vue │ │ │ ├── virtual-x.demo.vue │ │ │ └── virtual.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── DataTable.tsx │ │ │ ├── HeaderButton/ │ │ │ │ ├── FilterButton.tsx │ │ │ │ ├── FilterMenu.tsx │ │ │ │ ├── RenderFilter.ts │ │ │ │ ├── RenderSorter.ts │ │ │ │ ├── ResizeButton.tsx │ │ │ │ └── SortButton.tsx │ │ │ ├── MainTable.tsx │ │ │ ├── TableParts/ │ │ │ │ ├── Body.tsx │ │ │ │ ├── BodyCheckbox.tsx │ │ │ │ ├── BodyRadio.tsx │ │ │ │ ├── Cell.tsx │ │ │ │ ├── ExpandTrigger.tsx │ │ │ │ ├── Header.tsx │ │ │ │ └── SelectionMenu.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ ├── use-check.ts │ │ │ ├── use-expand.ts │ │ │ ├── use-group-header.ts │ │ │ ├── use-resizable.ts │ │ │ ├── use-scroll.ts │ │ │ ├── use-sorter.ts │ │ │ ├── use-table-data.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── DataTable.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── DataTable.spec.tsx.snap │ │ └── server.spec.tsx │ ├── date-picker/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── actions.demo.vue │ │ │ │ ├── close-panel-on-select.demo.vue │ │ │ │ ├── date.demo.vue │ │ │ │ ├── daterange.demo.vue │ │ │ │ ├── datetime.demo.vue │ │ │ │ ├── datetimeformat.demo.vue │ │ │ │ ├── datetimerange.demo.vue │ │ │ │ ├── default-time.demo.vue │ │ │ │ ├── disabled-time.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── events.demo.vue │ │ │ │ ├── focus.demo.vue │ │ │ │ ├── footerslot.demo.vue │ │ │ │ ├── format.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── month.demo.vue │ │ │ │ ├── monthrange.demo.vue │ │ │ │ ├── panel.demo.vue │ │ │ │ ├── quarter.demo.vue │ │ │ │ ├── quarterrange.demo.vue │ │ │ │ ├── shortcuts.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── status.demo.vue │ │ │ │ ├── update-on-close.demo.vue │ │ │ │ ├── week.demo.vue │ │ │ │ ├── year.demo.vue │ │ │ │ └── yearrange.demo.vue │ │ │ └── zhCN/ │ │ │ ├── actions.demo.vue │ │ │ ├── close-panel-on-select.demo.vue │ │ │ ├── date.demo.vue │ │ │ ├── daterange.demo.vue │ │ │ ├── datetime.demo.vue │ │ │ ├── datetimeformat.demo.vue │ │ │ ├── datetimerange.demo.vue │ │ │ ├── default-time.demo.vue │ │ │ ├── disabled-time.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── events.demo.vue │ │ │ ├── focus.demo.vue │ │ │ ├── footerslot.demo.vue │ │ │ ├── form-debug.demo.vue │ │ │ ├── format.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── month.demo.vue │ │ │ ├── monthrange.demo.vue │ │ │ ├── panel-debug.demo.vue │ │ │ ├── panel.demo.vue │ │ │ ├── quarter.demo.vue │ │ │ ├── quarterrange.demo.vue │ │ │ ├── shortcuts.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── status.demo.vue │ │ │ ├── update-on-close.demo.vue │ │ │ ├── week.demo.vue │ │ │ ├── year.demo.vue │ │ │ └── yearrange.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── DatePicker.tsx │ │ │ ├── config.ts │ │ │ ├── interface.ts │ │ │ ├── panel/ │ │ │ │ ├── date.tsx │ │ │ │ ├── daterange.tsx │ │ │ │ ├── datetime.tsx │ │ │ │ ├── datetimerange.tsx │ │ │ │ ├── month.tsx │ │ │ │ ├── monthrange.tsx │ │ │ │ ├── panelHeader.tsx │ │ │ │ ├── use-calendar.ts │ │ │ │ ├── use-dual-calendar.ts │ │ │ │ └── use-panel-common.ts │ │ │ ├── props.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ ├── utils.ts │ │ │ └── validation-utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── DatePicker.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── DatePicker.spec.tsx.snap │ │ └── server.spec.tsx │ ├── descriptions/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── bordered.demo.vue │ │ │ │ ├── columns.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── placement.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ └── span.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── bordered.demo.vue │ │ │ ├── columns.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── placement.demo.vue │ │ │ ├── single-line-debug.demo.vue │ │ │ ├── size.demo.vue │ │ │ └── span.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Descriptions.tsx │ │ │ ├── DescriptionsItem.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Descriptions.spec.ts │ │ └── server.spec.tsx │ ├── dialog/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── action.demo.vue │ │ │ │ ├── async.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── mask.demo.vue │ │ │ │ ├── use-component.demo.vue │ │ │ │ └── use-dialog-reactive-list.demo.vue │ │ │ └── zhCN/ │ │ │ ├── action.demo.vue │ │ │ ├── async.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── focus-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── mask.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── use-component.demo.vue │ │ │ └── use-dialog-reactive-list.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Dialog.tsx │ │ │ ├── DialogEnvironment.tsx │ │ │ ├── DialogProvider.ts │ │ │ ├── composables.ts │ │ │ ├── context.ts │ │ │ ├── dialogProps.ts │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Dialog.spec.tsx │ │ └── server.spec.tsx │ ├── discrete/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ └── index.demo-entry.md │ │ ├── index.ts │ │ └── src/ │ │ ├── InjectionExtractor.tsx │ │ ├── discrete.ts │ │ ├── discreteApp.ts │ │ └── interface.ts │ ├── divider/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── content.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── vertical.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── content.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── vertical.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Divider.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Divider.spec.ts │ │ └── server.spec.tsx │ ├── drawer/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── closable.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── multiple.demo.vue │ │ │ │ ├── resizable.demo.vue │ │ │ │ ├── scroll.demo.vue │ │ │ │ ├── slot.demo.vue │ │ │ │ └── target.demo.vue │ │ │ └── zhCN/ │ │ │ ├── a11y-debug.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── closable.demo.vue │ │ │ ├── custom-style-debug.demo.vue │ │ │ ├── dark-1-debug.demo.vue │ │ │ ├── dark-2-debug.demo.vue │ │ │ ├── dark-3-debug.demo.vue │ │ │ ├── dark-4-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── multiple.demo.vue │ │ │ ├── resizable.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── scroll.demo.vue │ │ │ ├── slot.demo.vue │ │ │ └── target.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Drawer.tsx │ │ │ ├── DrawerBodyWrapper.tsx │ │ │ ├── DrawerContent.tsx │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Drawer.spec.tsx │ │ └── server.spec.tsx │ ├── dropdown/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── arrow.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── batch-render.demo.vue │ │ │ │ ├── cascade.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── manual-position.demo.vue │ │ │ │ ├── option-props.demo.vue │ │ │ │ ├── placement.demo.vue │ │ │ │ ├── render-option.demo.vue │ │ │ │ ├── render.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ └── trigger.demo.vue │ │ │ └── zhCN/ │ │ │ ├── arrow.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── batch-render.demo.vue │ │ │ ├── cascade.demo.vue │ │ │ ├── group-debug.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── manual-position.demo.vue │ │ │ ├── option-props.demo.vue │ │ │ ├── placement.demo.vue │ │ │ ├── render-option.demo.vue │ │ │ ├── render.demo.vue │ │ │ ├── scrollable-debug.demo.vue │ │ │ ├── size.demo.vue │ │ │ └── trigger.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Dropdown.tsx │ │ │ ├── DropdownDivider.tsx │ │ │ ├── DropdownGroup.tsx │ │ │ ├── DropdownGroupHeader.tsx │ │ │ ├── DropdownMenu.tsx │ │ │ ├── DropdownOption.tsx │ │ │ ├── DropdownRenderOption.tsx │ │ │ ├── context.ts │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Dropdown.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Dropdown.spec.tsx.snap │ │ └── server.spec.tsx │ ├── dynamic-input/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom-action.demo.vue │ │ │ │ ├── custom.demo.vue │ │ │ │ ├── form.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── move.demo.vue │ │ │ │ └── pair.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── create-debug.demo.vue │ │ │ ├── custom-action.demo.vue │ │ │ ├── custom.demo.vue │ │ │ ├── form.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── move.demo.vue │ │ │ ├── pair.demo.vue │ │ │ └── rtl-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── DynamicInput.tsx │ │ │ ├── InputPreset.tsx │ │ │ ├── PairPreset.tsx │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── DynamicInput.spec.ts │ │ └── server.spec.tsx │ ├── dynamic-tags/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── form.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── max.demo.vue │ │ │ │ ├── on-create.demo.vue │ │ │ │ ├── option-format.demo.vue │ │ │ │ ├── render-tag.demo.vue │ │ │ │ └── slot.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── form.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── max.demo.vue │ │ │ ├── on-create.demo.vue │ │ │ ├── option-format.demo.vue │ │ │ ├── render-tag.demo.vue │ │ │ └── slot.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── DynamicTags.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── DynamicTags.spec.ts │ │ ├── __snapshots__/ │ │ │ └── DynamicTags.spec.ts.snap │ │ └── server.spec.tsx │ ├── element/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ └── index.demo-entry.md │ │ ├── index.ts │ │ ├── src/ │ │ │ └── Element.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Element.spec.ts │ │ └── server.spec.tsx │ ├── ellipsis/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom-tooltip.demo.vue │ │ │ │ ├── expand-trigger.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── line-clamp.demo.vue │ │ │ │ └── performant-ellipsis.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── custom-tooltip.demo.vue │ │ │ ├── dynamic-debug.demo.vue │ │ │ ├── expand-trigger.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── line-clamp.demo.vue │ │ │ ├── performant-ellipsis.demo.vue │ │ │ └── width-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Ellipsis.tsx │ │ │ ├── PerformantEllipsis.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Ellipsis.spec.tsx │ │ └── server.spec.tsx │ ├── empty/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── locale-debug.demo.vue │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── locale-debug.demo.vue │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Empty.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Empty.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Empty.spec.ts.snap │ │ └── server.spec.tsx │ ├── equation/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── katex-options.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── katex-options.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ └── Equation.tsx │ │ └── styles/ │ │ ├── dark.ts │ │ ├── index.ts │ │ └── light.ts │ ├── flex/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── center.demo.vue │ │ │ │ ├── from-end.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── space-around.demo.vue │ │ │ │ ├── space-between.demo.vue │ │ │ │ └── vertical.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── center.demo.vue │ │ │ ├── from-end.demo.vue │ │ │ ├── grid-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── space-around.demo.vue │ │ │ ├── space-between.demo.vue │ │ │ └── vertical.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Flex.tsx │ │ │ ├── styles/ │ │ │ │ └── rtl.cssr.ts │ │ │ └── type.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Flex.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Flex.spec.tsx.snap │ │ └── server.spec.tsx │ ├── float-button/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── badge.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom.demo.vue │ │ │ │ ├── group.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── menu.demo.vue │ │ │ │ └── tooltip.demo.vue │ │ │ └── zhCN/ │ │ │ ├── badge.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── custom.demo.vue │ │ │ ├── group.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── menu.demo.vue │ │ │ └── tooltip.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── FloatButton.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── FloatButton.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── FloatButton.spec.tsx.snap │ │ └── server.spec.tsx │ ├── float-button-group/ │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── FloatButtonGroup.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── NFloatButtonGroup.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── NFloatButtonGroup.spec.tsx.snap │ │ └── server.spec.tsx │ ├── form/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── abnormal-warning.demo.vue │ │ │ │ ├── async.demo.vue │ │ │ │ ├── custom-messages.demo.vue │ │ │ │ ├── custom-rule.demo.vue │ │ │ │ ├── custom-validation.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── dynamic.demo.vue │ │ │ │ ├── feedback-style.demo.vue │ │ │ │ ├── i18n.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── inline.demo.vue │ │ │ │ ├── item-only.demo.vue │ │ │ │ ├── left.demo.vue │ │ │ │ ├── partially-apply-rules.demo.vue │ │ │ │ ├── show-label.demo.vue │ │ │ │ └── top.demo.vue │ │ │ └── zhCN/ │ │ │ ├── abnormal-warning.demo.vue │ │ │ ├── async.demo.vue │ │ │ ├── custom-messages.demo.vue │ │ │ ├── custom-rule.demo.vue │ │ │ ├── custom-validation.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── dynamic.demo.vue │ │ │ ├── feedback-style.demo.vue │ │ │ ├── i18n.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── inline.demo.vue │ │ │ ├── item-only.demo.vue │ │ │ ├── left.demo.vue │ │ │ ├── partially-apply-rules.demo.vue │ │ │ ├── render-feedback.demo.vue │ │ │ ├── show-label.demo.vue │ │ │ └── top.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Form.tsx │ │ │ ├── FormItem.tsx │ │ │ ├── FormItemCol.ts │ │ │ ├── FormItemGridItem.ts │ │ │ ├── FormItemRow.ts │ │ │ ├── context.ts │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── form-item.cssr.ts │ │ │ │ └── form.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Form.spec.tsx │ │ └── server.spec.tsx │ ├── global-style/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ └── index.demo-entry.md │ │ ├── index.ts │ │ ├── src/ │ │ │ └── GlobalStyle.ts │ │ └── tests/ │ │ └── server.spec.tsx │ ├── global.d.ts │ ├── gradient-text/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── custom.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── GradientText.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── GradientText.spec.ts │ │ ├── __snapshots__/ │ │ │ └── GradientText.spec.ts.snap │ │ └── server.spec.tsx │ ├── grid/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── collapse.demo.vue │ │ │ │ ├── gap.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── layout-shift-disabled.demo.vue │ │ │ │ ├── offset.demo.vue │ │ │ │ ├── responsive-item.demo.vue │ │ │ │ └── responsive.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── collapse.demo.vue │ │ │ ├── gap.demo.vue │ │ │ ├── grid-basic-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── layout-shift-disabled.demo.vue │ │ │ ├── offset.demo.vue │ │ │ ├── responsive-item.demo.vue │ │ │ ├── responsive.demo.vue │ │ │ └── vshow-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Grid.tsx │ │ │ ├── GridItem.tsx │ │ │ └── config.ts │ │ └── tests/ │ │ ├── Grid.spec.tsx │ │ └── server.spec.tsx │ ├── heatmap/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── colors.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── slots.demo.vue │ │ │ │ └── themes.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── colors.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── slots.demo.vue │ │ │ └── themes.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── ColorIndicator.tsx │ │ │ ├── Heatmap.tsx │ │ │ ├── Rect.tsx │ │ │ ├── animationStyle.ts │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ ├── theme.ts │ │ │ └── utils/ │ │ │ └── index.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Heatmap.spec.tsx │ │ └── server.spec.tsx │ ├── highlight/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── case-sensitive.demo.vue │ │ │ │ ├── component.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── style.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── case-sensitive.demo.vue │ │ │ ├── component.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── style.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Highlight.tsx │ │ │ ├── public-types.ts │ │ │ └── utils.ts │ │ └── tests/ │ │ └── utils.spec.ts │ ├── icon/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom-icon.demo.vue │ │ │ │ ├── depth.demo.vue │ │ │ │ ├── icon-wrapper.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── custom-icon.demo.vue │ │ │ ├── depth.demo.vue │ │ │ ├── icon-wrapper.demo.vue │ │ │ └── index.demo-entry.md │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Icon.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Icon.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Icon.spec.ts.snap │ │ └── server.spec.tsx │ ├── icon-wrapper/ │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── IconWrapper.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── IconWrapper.spec.ts │ │ └── server.spec.tsx │ ├── image/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── component-preview-group.demo.vue │ │ │ │ ├── component-preview.demo.vue │ │ │ │ ├── custom-error.demo.vue │ │ │ │ ├── custom-toolbar.demo.vue │ │ │ │ ├── custom.demo.vue │ │ │ │ ├── error.demo.vue │ │ │ │ ├── group.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── lazy.demo.vue │ │ │ │ ├── manually-open-preview.demo.vue │ │ │ │ ├── preview-disabled.demo.vue │ │ │ │ ├── previewed-img-props.demo.vue │ │ │ │ └── tooltip.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── component-preview-group-debug.demo.vue │ │ │ ├── component-preview-group.demo.vue │ │ │ ├── component-preview.demo.vue │ │ │ ├── custom-error.demo.vue │ │ │ ├── custom-toolbar.demo.vue │ │ │ ├── custom.demo.vue │ │ │ ├── error.demo.vue │ │ │ ├── full-debug.demo.vue │ │ │ ├── group.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── lazy.demo.vue │ │ │ ├── manually-open-preview.demo.vue │ │ │ ├── preview-disabled.demo.vue │ │ │ ├── previewed-img-props.demo.vue │ │ │ └── tooltip.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Image.tsx │ │ │ ├── ImageGroup.tsx │ │ │ ├── ImagePreview.tsx │ │ │ ├── icons.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Image.spec.tsx │ │ └── server.spec.tsx │ ├── index.ts │ ├── infinite-scroll/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── chat.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── chat.demo.vue │ │ │ └── index.demo-entry.md │ │ ├── index.ts │ │ └── src/ │ │ └── InfiniteScroll.tsx │ ├── input/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── autosize.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── clearable.demo.vue │ │ │ │ ├── count.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── event.demo.vue │ │ │ │ ├── focus.demo.vue │ │ │ │ ├── graphemes.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── input-group.demo.vue │ │ │ │ ├── input-props.demo.vue │ │ │ │ ├── loading.demo.vue │ │ │ │ ├── pair.demo.vue │ │ │ │ ├── passively-activated.demo.vue │ │ │ │ ├── password.demo.vue │ │ │ │ ├── pattern.demo.vue │ │ │ │ ├── round.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── status.demo.vue │ │ │ │ └── trim.demo.vue │ │ │ └── zhCN/ │ │ │ ├── autosize.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── clearable.demo.vue │ │ │ ├── count.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── event.demo.vue │ │ │ ├── focus.demo.vue │ │ │ ├── graphemes.demo.vue │ │ │ ├── icon-debug.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── input-group.demo.vue │ │ │ ├── input-props.demo.vue │ │ │ ├── loading.demo.vue │ │ │ ├── modal-debug.demo.vue │ │ │ ├── pair.demo.vue │ │ │ ├── passively-activated.demo.vue │ │ │ ├── password.demo.vue │ │ │ ├── pattern.demo.vue │ │ │ ├── prefix-debug.demo.vue │ │ │ ├── round.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── status.demo.vue │ │ │ └── textarea-resize-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Input.tsx │ │ │ ├── InputGroup.tsx │ │ │ ├── InputGroupLabel.tsx │ │ │ ├── WordCount.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── input-group-label.cssr.ts │ │ │ │ ├── input-group.cssr.ts │ │ │ │ ├── input.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Input.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Input.spec.tsx.snap │ │ └── server.spec.tsx │ ├── input-number/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── button-placement.demo.vue │ │ │ │ ├── change-timing.demo.vue │ │ │ │ ├── custom-icon.demo.vue │ │ │ │ ├── disable-keyboard.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── event.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── loading.demo.vue │ │ │ │ ├── min-max.demo.vue │ │ │ │ ├── parse.demo.vue │ │ │ │ ├── precision.demo.vue │ │ │ │ ├── show-button.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── status.demo.vue │ │ │ │ ├── step.demo.vue │ │ │ │ └── validator.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── button-placement.demo.vue │ │ │ ├── change-timing.demo.vue │ │ │ ├── custom-icon.demo.vue │ │ │ ├── debug.demo.vue │ │ │ ├── disable-keyboard.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── event.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── loading.demo.vue │ │ │ ├── min-max.demo.vue │ │ │ ├── parse.demo.vue │ │ │ ├── precision-debug.demo.vue │ │ │ ├── precision.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── show-button.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── status.demo.vue │ │ │ ├── step.demo.vue │ │ │ ├── theme-debug.demo.vue │ │ │ └── validator.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── InputNumber.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── input-number.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── InputNumber.spec.tsx │ │ └── server.spec.tsx │ ├── input-otp/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── block.demo.vue │ │ │ │ ├── form.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── mask.demo.vue │ │ │ │ ├── pattern.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── status.demo.vue │ │ │ │ └── template.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── block.demo.vue │ │ │ ├── form.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── mask.demo.vue │ │ │ ├── pattern.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── status.demo.vue │ │ │ └── template.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── InputOtp.tsx │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── input-otp-rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── InputOtp.spec.tsx │ │ └── server.spec.tsx │ ├── layout/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── absolute.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── border.demo.vue │ │ │ │ ├── collapse-right.demo.vue │ │ │ │ ├── collapse.demo.vue │ │ │ │ ├── embedded.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── inverted.demo.vue │ │ │ │ ├── scroll-to.demo.vue │ │ │ │ ├── scrollbar.demo.vue │ │ │ │ ├── set-padding.demo.vue │ │ │ │ └── show-sider-content.demo.vue │ │ │ └── zhCN/ │ │ │ ├── absolute.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── border.demo.vue │ │ │ ├── collapse-right.demo.vue │ │ │ ├── collapse.demo.vue │ │ │ ├── embedded.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── inverted.demo.vue │ │ │ ├── keep-alive-debug.demo.vue │ │ │ ├── scroll-to.demo.vue │ │ │ ├── scrollbar.demo.vue │ │ │ ├── set-padding.demo.vue │ │ │ └── show-sider-content.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Layout.tsx │ │ │ ├── LayoutContent.tsx │ │ │ ├── LayoutFooter.tsx │ │ │ ├── LayoutHeader.tsx │ │ │ ├── LayoutSider.tsx │ │ │ ├── ToggleBar.tsx │ │ │ ├── ToggleButton.tsx │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ ├── layout-footer.cssr.ts │ │ │ ├── layout-header.cssr.ts │ │ │ ├── layout-sider.cssr.ts │ │ │ └── layout.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Layout.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Layout.spec.ts.snap │ │ └── server.spec.tsx │ ├── legacy-grid/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── gutter.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── offset.demo.vue │ │ │ │ └── push-pull.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── gutter.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── offset.demo.vue │ │ │ ├── push-pull.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ └── wrap-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Col.tsx │ │ │ ├── Row.tsx │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Grid.spec.tsx │ │ └── server.spec.tsx │ ├── legacy-transfer/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── filterable.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── large-data.demo.vue │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── filterable.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── large-data.demo.vue │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Transfer.tsx │ │ │ ├── TransferFilter.tsx │ │ │ ├── TransferHeader.tsx │ │ │ ├── TransferList.tsx │ │ │ ├── TransferListItem.tsx │ │ │ ├── interface.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── use-transfer-data.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Transfer.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Transfer.spec.ts.snap │ │ └── server.spec.tsx │ ├── list/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── border.demo.vue │ │ │ │ ├── hoverable.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── border.demo.vue │ │ │ ├── hoverable.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── rtl-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── List.tsx │ │ │ ├── ListItem.tsx │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── List.spec.ts │ │ └── server.spec.tsx │ ├── loading-bar/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── container.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── container.demo.vue │ │ │ └── index.demo-entry.md │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── LoadingBar.tsx │ │ │ ├── LoadingBarProvider.tsx │ │ │ ├── context.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── use-loading-bar.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ └── LoadingBar.spec.tsx │ ├── locales/ │ │ ├── __snapshots__/ │ │ │ └── index.spec.tsx.snap │ │ ├── common/ │ │ │ ├── arDZ.ts │ │ │ ├── azAZ.ts │ │ │ ├── csCZ.ts │ │ │ ├── daDK.ts │ │ │ ├── deDE.ts │ │ │ ├── enGB.ts │ │ │ ├── enUS.ts │ │ │ ├── eo.ts │ │ │ ├── esAR.ts │ │ │ ├── etEE.ts │ │ │ ├── faIR.ts │ │ │ ├── frFR.ts │ │ │ ├── idID.ts │ │ │ ├── itIT.ts │ │ │ ├── jaJP.ts │ │ │ ├── kmKH.ts │ │ │ ├── koKR.ts │ │ │ ├── nbNO.ts │ │ │ ├── nlNL.ts │ │ │ ├── plPL.ts │ │ │ ├── ptBR.ts │ │ │ ├── ruRU.ts │ │ │ ├── skSK.ts │ │ │ ├── svSE.ts │ │ │ ├── thTH.ts │ │ │ ├── trTR.ts │ │ │ ├── ugCN.ts │ │ │ ├── ukUA.ts │ │ │ ├── uzUZ.ts │ │ │ ├── viVN.ts │ │ │ ├── zhCN.ts │ │ │ └── zhTW.ts │ │ ├── date/ │ │ │ ├── arDZ.ts │ │ │ ├── azAZ.ts │ │ │ ├── csCZ.ts │ │ │ ├── daDK.ts │ │ │ ├── deDE.ts │ │ │ ├── enGB.ts │ │ │ ├── enUS.ts │ │ │ ├── eo.ts │ │ │ ├── esAR.ts │ │ │ ├── etEE.ts │ │ │ ├── faIR.ts │ │ │ ├── frFR.ts │ │ │ ├── idID.ts │ │ │ ├── itIT.ts │ │ │ ├── jaJP.ts │ │ │ ├── kmKH.ts │ │ │ ├── koKR.ts │ │ │ ├── nbNO.ts │ │ │ ├── nlNL.ts │ │ │ ├── plPL.ts │ │ │ ├── ptBR.ts │ │ │ ├── ruRU.ts │ │ │ ├── skSK.ts │ │ │ ├── svSE.ts │ │ │ ├── thTH.ts │ │ │ ├── trTR.ts │ │ │ ├── ugCN.ts │ │ │ ├── ukUA.ts │ │ │ ├── uzUZ.ts │ │ │ ├── viVN.ts │ │ │ ├── zhCN.ts │ │ │ └── zhTW.ts │ │ ├── index.spec.tsx │ │ ├── index.ts │ │ └── utils/ │ │ └── index.ts │ ├── log/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── auto-bottom.demo.vue │ │ │ │ ├── event.demo.vue │ │ │ │ ├── highlight.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── loading.demo.vue │ │ │ │ ├── scroll.demo.vue │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── auto-bottom.demo.vue │ │ │ ├── debug.demo.vue │ │ │ ├── event.demo.vue │ │ │ ├── highlight.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── loading.demo.vue │ │ │ ├── scroll.demo.vue │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Log.tsx │ │ │ ├── LogLine.tsx │ │ │ ├── LogLoader.tsx │ │ │ ├── context.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Log.spec.tsx │ │ └── server.spec.tsx │ ├── marquee/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── auto-fill.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── image.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── auto-fill.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── image.demo.vue │ │ │ └── index.demo-entry.md │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Marquee.tsx │ │ │ ├── props.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Marquee.spec.ts │ │ └── server.spec.tsx │ ├── mention/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── async.demo.vue │ │ │ │ ├── autosize.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom-prefix.demo.vue │ │ │ │ ├── form.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── manual-trigger.demo.vue │ │ │ │ ├── render-label.demo.vue │ │ │ │ ├── status.demo.vue │ │ │ │ └── textarea.demo.vue │ │ │ └── zhCN/ │ │ │ ├── async.demo.vue │ │ │ ├── autosize.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── custom-prefix.demo.vue │ │ │ ├── form.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── manual-trigger.demo.vue │ │ │ ├── render-label.demo.vue │ │ │ ├── status.demo.vue │ │ │ └── textarea.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Mention.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Mention.spec.ts │ │ └── server.spec.tsx │ ├── menu/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── accordion.demo.vue │ │ │ │ ├── collapse.demo.vue │ │ │ │ ├── customize-field.demo.vue │ │ │ │ ├── default-expanded-keys.demo.vue │ │ │ │ ├── expand-selected-option.demo.vue │ │ │ │ ├── horizontal.demo.vue │ │ │ │ ├── indent.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── inverted.demo.vue │ │ │ │ ├── long-label.demo.vue │ │ │ │ ├── render-label.demo.vue │ │ │ │ ├── router-link.demo.vue │ │ │ │ ├── select.demo.vue │ │ │ │ └── show.demo.vue │ │ │ └── zhCN/ │ │ │ ├── accordion.demo.vue │ │ │ ├── collapse.demo.vue │ │ │ ├── customize-field.demo.vue │ │ │ ├── debug.demo.vue │ │ │ ├── default-expanded-keys.demo.vue │ │ │ ├── expand-selected-option.demo.vue │ │ │ ├── horizontal.demo.vue │ │ │ ├── indent.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── inverted.demo.vue │ │ │ ├── long-label.demo.vue │ │ │ ├── render-label.demo.vue │ │ │ ├── router-link.demo.vue │ │ │ ├── select.demo.vue │ │ │ ├── show-debug.demo.vue │ │ │ └── show.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Menu.tsx │ │ │ ├── MenuDivider.tsx │ │ │ ├── MenuOption.tsx │ │ │ ├── MenuOptionContent.tsx │ │ │ ├── MenuOptionGroup.tsx │ │ │ ├── Submenu.tsx │ │ │ ├── context.ts │ │ │ ├── interface.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ ├── use-menu-child-props.ts │ │ │ ├── use-menu-child.ts │ │ │ ├── useCheckDeprecated.ts │ │ │ └── utils.tsx │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Menu.spec.tsx │ │ └── server.spec.tsx │ ├── message/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── about-theme.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── closable.demo.vue │ │ │ │ ├── customize-message.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── manually-close.demo.vue │ │ │ │ ├── modify-content.demo.vue │ │ │ │ ├── multiple-line.demo.vue │ │ │ │ ├── no-icon.demo.vue │ │ │ │ ├── placement.demo.vue │ │ │ │ └── timing.demo.vue │ │ │ └── zhCN/ │ │ │ ├── about-theme.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── closable.demo.vue │ │ │ ├── customize-message.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── manually-close.demo.vue │ │ │ ├── modify-content.demo.vue │ │ │ ├── multiple-line.demo.vue │ │ │ ├── no-icon.demo.vue │ │ │ ├── placement.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ └── timing.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Message.tsx │ │ │ ├── MessageEnvironment.tsx │ │ │ ├── MessageProvider.tsx │ │ │ ├── context.ts │ │ │ ├── message-props.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ ├── types.ts │ │ │ └── use-message.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Message.spec.tsx │ │ └── server.spec.tsx │ ├── modal/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── content-scrollable.demo.vue │ │ │ │ ├── controlled.demo.vue │ │ │ │ ├── custom-position.demo.vue │ │ │ │ ├── draggable.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── mask-closable.demo.vue │ │ │ │ ├── mask-visible.demo.vue │ │ │ │ ├── preset-card.demo.vue │ │ │ │ ├── preset-confirm-slot.demo.vue │ │ │ │ ├── preset-confirm.demo.vue │ │ │ │ ├── reactive.demo.vue │ │ │ │ └── transform-origin.demo.vue │ │ │ └── zhCN/ │ │ │ ├── a11y-debug.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── content-scrollable.demo.vue │ │ │ ├── controlled.demo.vue │ │ │ ├── custom-position.demo.vue │ │ │ ├── dark-1-debug.demo.vue │ │ │ ├── dark-10-debug.demo.vue │ │ │ ├── dark-2-debug.demo.vue │ │ │ ├── dark-3-debug.demo.vue │ │ │ ├── dark-4-debug.demo.vue │ │ │ ├── dark-5-debug.demo.vue │ │ │ ├── dark-6-debug.demo.vue │ │ │ ├── dark-7-debug.demo.vue │ │ │ ├── dark-8-debug.demo.vue │ │ │ ├── dark-9-debug.demo.vue │ │ │ ├── draggable.demo.vue │ │ │ ├── drawer-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── mask-click-debug.demo.vue │ │ │ ├── mask-closable.demo.vue │ │ │ ├── mask-visible.demo.vue │ │ │ ├── nested-debug.demo.vue │ │ │ ├── preset-card.demo.vue │ │ │ ├── preset-confirm-slot.demo.vue │ │ │ ├── preset-confirm.demo.vue │ │ │ ├── raw-debug.demo.vue │ │ │ ├── reactive.demo.vue │ │ │ └── transform-origin.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── BodyWrapper.tsx │ │ │ ├── Modal.tsx │ │ │ ├── ModalEnvironment.tsx │ │ │ ├── ModalProvider.ts │ │ │ ├── composables.ts │ │ │ ├── context.ts │ │ │ ├── interface.ts │ │ │ ├── presetProps.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Modal.spec.tsx │ │ └── server.spec.tsx │ ├── notification/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── change-content.demo.vue │ │ │ │ ├── closable.demo.vue │ │ │ │ ├── duration.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── max.demo.vue │ │ │ │ ├── placement.demo.vue │ │ │ │ ├── scrollable.demo.vue │ │ │ │ └── type.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── change-content.demo.vue │ │ │ ├── closable.demo.vue │ │ │ ├── duration.demo.vue │ │ │ ├── error-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── max.demo.vue │ │ │ ├── placement.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── scrollable.demo.vue │ │ │ └── type.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Notification.tsx │ │ │ ├── NotificationContainer.tsx │ │ │ ├── NotificationEnvironment.tsx │ │ │ ├── NotificationProvider.tsx │ │ │ ├── context.ts │ │ │ ├── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ └── use-notification.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ └── Notification.spec.tsx │ ├── number-animation/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── finish.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── intl.demo.vue │ │ │ │ ├── precision.demo.vue │ │ │ │ └── separator.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── finish.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── intl.demo.vue │ │ │ ├── precision.demo.vue │ │ │ └── separator.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── NumberAnimation.tsx │ │ │ └── utils.ts │ │ └── tests/ │ │ ├── NumericAnimation.spec.ts │ │ └── server.spec.tsx │ ├── page-header/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── rtl-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── PageHeader.tsx │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── PageHeader.spec.tsx │ │ └── server.spec.tsx │ ├── pagination/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── item-count.demo.vue │ │ │ │ ├── page-size-option.demo.vue │ │ │ │ ├── prefix.demo.vue │ │ │ │ ├── prev.demo.vue │ │ │ │ ├── quick-jumper.demo.vue │ │ │ │ ├── simple.demo.vue │ │ │ │ ├── size-picker.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ └── slot.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── display-order.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── item-count.demo.vue │ │ │ ├── page-size-option.demo.vue │ │ │ ├── prefix.demo.vue │ │ │ ├── prev.demo.vue │ │ │ ├── quick-jumper.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── simple.demo.vue │ │ │ ├── size-picker.demo.vue │ │ │ ├── size.demo.vue │ │ │ └── slot.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Pagination.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Pagination.spec.tsx │ │ ├── server.spec.tsx │ │ └── utils.spec.ts │ ├── popconfirm/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── actions.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom-action.demo.vue │ │ │ │ ├── custom-icon.demo.vue │ │ │ │ ├── event.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── no-icon.demo.vue │ │ │ └── zhCN/ │ │ │ ├── actions.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── custom-action.demo.vue │ │ │ ├── custom-icon.demo.vue │ │ │ ├── event.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── no-icon.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Popconfirm.tsx │ │ │ ├── PopconfirmPanel.tsx │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Popconfirm.spec.ts │ │ └── server.spec.tsx │ ├── popover/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── delay.demo.vue │ │ │ │ ├── event.demo.vue │ │ │ │ ├── flip.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── manual-position.demo.vue │ │ │ │ ├── no-arrow.demo.vue │ │ │ │ ├── placement.demo.vue │ │ │ │ ├── raw-content.demo.vue │ │ │ │ ├── slots.demo.vue │ │ │ │ ├── style.demo.vue │ │ │ │ ├── trigger-width.demo.vue │ │ │ │ └── trigger.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── center-arrow-debug.demo.vue │ │ │ ├── delay.demo.vue │ │ │ ├── event.demo.vue │ │ │ ├── flip.demo.vue │ │ │ ├── hoist-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── manual-position.demo.vue │ │ │ ├── nested-debug.demo.vue │ │ │ ├── nested2-debug.demo.vue │ │ │ ├── nested3-debug.demo.vue │ │ │ ├── no-arrow.demo.vue │ │ │ ├── placement.demo.vue │ │ │ ├── raw-content.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── slots.demo.vue │ │ │ ├── style.demo.vue │ │ │ ├── trigger-width.demo.vue │ │ │ ├── trigger.demo.vue │ │ │ ├── width-debug.demo.vue │ │ │ └── zindex-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Popover.tsx │ │ │ ├── PopoverBody.tsx │ │ │ ├── interface.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Popover.spec.tsx │ │ └── server.spec.tsx │ ├── popselect/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── cancelable.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── multiple.demo.vue │ │ │ │ ├── scrollable.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ └── slot.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── cancelable.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── multiple.demo.vue │ │ │ ├── scrollable.demo.vue │ │ │ ├── size.demo.vue │ │ │ └── slot.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Popselect.tsx │ │ │ ├── PopselectPanel.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Popselect.spec.ts │ │ └── server.spec.tsx │ ├── preset.ts │ ├── progress/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── circle-offset.demo.vue │ │ │ │ ├── circle.demo.vue │ │ │ │ ├── color.demo.vue │ │ │ │ ├── custom-indicator.demo.vue │ │ │ │ ├── dashboard.demo.vue │ │ │ │ ├── gradient.demo.vue │ │ │ │ ├── height.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── line.demo.vue │ │ │ │ ├── multiple-circle.demo.vue │ │ │ │ ├── no-indicator.demo.vue │ │ │ │ └── processing.demo.vue │ │ │ └── zhCN/ │ │ │ ├── circle-offset.demo.vue │ │ │ ├── circle.demo.vue │ │ │ ├── color.demo.vue │ │ │ ├── custom-indicator.demo.vue │ │ │ ├── dashboard.demo.vue │ │ │ ├── gradient.demo.vue │ │ │ ├── height.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── line.demo.vue │ │ │ ├── multiple-circle.demo.vue │ │ │ ├── no-indicator.demo.vue │ │ │ └── processing.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Circle.tsx │ │ │ ├── Line.tsx │ │ │ ├── MultipleCircle.tsx │ │ │ ├── Progress.tsx │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Progress.spec.ts │ │ └── server.spec.tsx │ ├── qr-code/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── color.demo.vue │ │ │ │ ├── download.demo.vue │ │ │ │ ├── error-correction.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── size.demo.vue │ │ │ │ └── type.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── color.demo.vue │ │ │ ├── download.demo.vue │ │ │ ├── error-correction.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── size.demo.vue │ │ │ └── type.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── QrCode.tsx │ │ │ ├── qrcodegen.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ └── styles/ │ │ ├── dark.ts │ │ ├── index.ts │ │ └── light.ts │ ├── radio/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── button-group.demo.vue │ │ │ │ ├── group.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── button-group.demo.vue │ │ │ ├── group.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── radio-focus-debug.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── tooltip-debug.demo.vue │ │ │ └── uncontrolled-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Radio.tsx │ │ │ ├── RadioButton.tsx │ │ │ ├── RadioGroup.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── radio-group.cssr.ts │ │ │ │ ├── radio.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ └── use-radio.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Radio.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Radio.spec.ts.snap │ │ └── server.spec.tsx │ ├── rate/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── allow-half.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── clearable.demo.vue │ │ │ │ ├── color.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── readonly.demo.vue │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── allow-half.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── clearable.demo.vue │ │ │ ├── color.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── readonly.demo.vue │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Rate.tsx │ │ │ ├── StarIcon.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Rate.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Rate.spec.ts.snap │ │ └── server.spec.tsx │ ├── result/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── custom.demo.vue │ │ │ │ ├── error.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── info.demo.vue │ │ │ │ ├── s-403.demo.vue │ │ │ │ ├── s-404.demo.vue │ │ │ │ ├── s-418.demo.vue │ │ │ │ ├── s-500.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── success.demo.vue │ │ │ │ └── warning.demo.vue │ │ │ └── zhCN/ │ │ │ ├── custom.demo.vue │ │ │ ├── error.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── info.demo.vue │ │ │ ├── s-403.demo.vue │ │ │ ├── s-404.demo.vue │ │ │ ├── s-418.demo.vue │ │ │ ├── s-500.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── success.demo.vue │ │ │ └── warning.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── 403.tsx │ │ │ ├── 404.tsx │ │ │ ├── 418.tsx │ │ │ ├── 500.tsx │ │ │ ├── Result.tsx │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Result.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Result.spec.ts.snap │ │ └── server.spec.tsx │ ├── scrollbar/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── no-sync.demo.vue │ │ │ │ ├── placement.demo.vue │ │ │ │ ├── trigger.demo.vue │ │ │ │ └── x.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── custom.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── no-sync.demo.vue │ │ │ ├── placement.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── trigger.demo.vue │ │ │ └── x.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ └── Scrollbar.tsx │ │ └── tests/ │ │ ├── Scrollbar.spec.ts │ │ └── server.spec.tsx │ ├── select/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── action.demo.vue │ │ │ │ ├── add-tooltip.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── clearable.demo.vue │ │ │ │ ├── custom-field.demo.vue │ │ │ │ ├── custom-option.demo.vue │ │ │ │ ├── custom-suffix.demo.vue │ │ │ │ ├── events.demo.vue │ │ │ │ ├── fallback-option.demo.vue │ │ │ │ ├── filterable.demo.vue │ │ │ │ ├── focus.demo.vue │ │ │ │ ├── group.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── many-options.demo.vue │ │ │ │ ├── max-tag-count.demo.vue │ │ │ │ ├── menu-width.demo.vue │ │ │ │ ├── multiple.demo.vue │ │ │ │ ├── remote-multiple.demo.vue │ │ │ │ ├── remote.demo.vue │ │ │ │ ├── render-person.demo.vue │ │ │ │ ├── render-tag.demo.vue │ │ │ │ ├── scroll-event.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── status.demo.vue │ │ │ │ ├── tag-input.demo.vue │ │ │ │ └── tag.demo.vue │ │ │ └── zhCN/ │ │ │ ├── action.demo.vue │ │ │ ├── add-tooltip.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── clearable.demo.vue │ │ │ ├── create-debug.demo.vue │ │ │ ├── custom-field.demo.vue │ │ │ ├── custom-option.demo.vue │ │ │ ├── custom-suffix.demo.vue │ │ │ ├── empty-debug.demo.vue │ │ │ ├── events.demo.vue │ │ │ ├── fallback-option.demo.vue │ │ │ ├── filterable-debug.demo.vue │ │ │ ├── filterable.demo.vue │ │ │ ├── focus.demo.vue │ │ │ ├── fullscreen-debug.demo.vue │ │ │ ├── group.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── many-options.demo.vue │ │ │ ├── max-tag-count.demo.vue │ │ │ ├── menu-debug.demo.vue │ │ │ ├── menu-width.demo.vue │ │ │ ├── multiple.demo.vue │ │ │ ├── options-change-debug.demo.vue │ │ │ ├── placeholder-debug.demo.vue │ │ │ ├── remote-multiple.demo.vue │ │ │ ├── remote.demo.vue │ │ │ ├── render-debug.demo.vue │ │ │ ├── render-person.demo.vue │ │ │ ├── render-tag.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── scroll-event.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── spin-debug.demo.vue │ │ │ ├── status.demo.vue │ │ │ ├── tag-input.demo.vue │ │ │ └── tag.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Select.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Select.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Select.spec.tsx.snap │ │ └── server.spec.tsx │ ├── shims-vue.d.ts │ ├── skeleton/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── box.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── box.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Skeleton.tsx │ │ │ ├── bug.md │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Skeleton.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Skeleton.spec.tsx.snap │ │ └── server.spec.tsx │ ├── slider/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── custom-marks.demo.vue │ │ │ │ ├── custom-thumb.demo.vue │ │ │ │ ├── disable-tooltip.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── format.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── mark.demo.vue │ │ │ │ ├── multiple-debug.demo.vue │ │ │ │ ├── range.demo.vue │ │ │ │ ├── restrict-selectable-values.demo.vue │ │ │ │ ├── reverse.demo.vue │ │ │ │ ├── show-tooltip.demo.vue │ │ │ │ └── vertical.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── custom-marks.demo.vue │ │ │ ├── custom-thumb.demo.vue │ │ │ ├── disable-tooltip.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── format.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── keyboard-debug.demo.vue │ │ │ ├── mark.demo.vue │ │ │ ├── multiple-debug.demo.vue │ │ │ ├── range.demo.vue │ │ │ ├── restrict-selectable-values.demo.vue │ │ │ ├── reverse.demo.vue │ │ │ ├── show-tooltip.demo.vue │ │ │ └── vertical.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Slider.tsx │ │ │ ├── interface.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Slider.spec.ts │ │ └── server.spec.tsx │ ├── space/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── center.demo.vue │ │ │ │ ├── from-end.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── reverse.demo.vue │ │ │ │ ├── space-around.demo.vue │ │ │ │ ├── space-between.demo.vue │ │ │ │ └── vertical.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── center.demo.vue │ │ │ ├── from-end.demo.vue │ │ │ ├── grid-debug.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── reverse.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── space-around.demo.vue │ │ │ ├── space-between.demo.vue │ │ │ └── vertical.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Space.tsx │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── rtl.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Space.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Space.spec.tsx.snap │ │ └── server.spec.tsx │ ├── spin/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── customize-icon.demo.vue │ │ │ │ ├── delay.demo.vue │ │ │ │ ├── description.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ └── wrap.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── blocking-debug.demo.vue │ │ │ ├── customize-icon.demo.vue │ │ │ ├── delay.demo.vue │ │ │ ├── description.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── wrap.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Spin.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Spin.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Spin.spec.ts.snap │ │ └── server.spec.tsx │ ├── split/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── controlled.demo.vue │ │ │ │ ├── event.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── nest.demo.vue │ │ │ │ ├── slot.demo.vue │ │ │ │ └── vertical.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── controlled.demo.vue │ │ │ ├── event.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── nest.demo.vue │ │ │ ├── pixel-value.demo.vue │ │ │ ├── slot.demo.vue │ │ │ └── vertical.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Split.tsx │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── types.ts │ │ └── styles/ │ │ ├── dark.ts │ │ ├── index.ts │ │ └── light.ts │ ├── statistic/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── rtl-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Statistic.tsx │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Statistic.spec.ts │ │ └── server.spec.tsx │ ├── steps/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── click.demo.vue │ │ │ │ ├── content-placement.demo.vue │ │ │ │ ├── content.demo.vue │ │ │ │ ├── custom-icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── size.demo.vue │ │ │ │ └── vertical.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── click.demo.vue │ │ │ ├── content-placement.demo.vue │ │ │ ├── content.demo.vue │ │ │ ├── custom-icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── vertical-debug.demo.vue │ │ │ └── vertical.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Step.tsx │ │ │ ├── Steps.tsx │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Steps.spec.ts │ │ └── server.spec.tsx │ ├── styles.ts │ ├── switch/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── color.demo.vue │ │ │ │ ├── content.demo.vue │ │ │ │ ├── customize-value.demo.vue │ │ │ │ ├── event.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── loading.demo.vue │ │ │ │ ├── shape.demo.vue │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── color.demo.vue │ │ │ ├── content.demo.vue │ │ │ ├── customize-value.demo.vue │ │ │ ├── event.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── loading.demo.vue │ │ │ ├── shape.demo.vue │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Switch.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Switch.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Switch.spec.tsx.snap │ │ └── server.spec.tsx │ ├── table/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── bordered.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── single-column.demo.vue │ │ │ │ ├── single-line.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ └── striped.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── bordered.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── single-column.demo.vue │ │ │ ├── single-line.demo.vue │ │ │ ├── size.demo.vue │ │ │ └── striped.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Table.tsx │ │ │ ├── Tbody.tsx │ │ │ ├── Td.tsx │ │ │ ├── Th.tsx │ │ │ ├── Thead.tsx │ │ │ ├── Tr.tsx │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Table.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Table.spec.ts.snap │ │ └── server.spec.tsx │ ├── tabs/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── addable.demo.vue │ │ │ │ ├── bar-width.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── before-leave.demo.vue │ │ │ │ ├── card.demo.vue │ │ │ │ ├── display-directive.demo.vue │ │ │ │ ├── flex-label.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── no-pane.demo.vue │ │ │ │ ├── placement.demo.vue │ │ │ │ ├── prefix.demo.vue │ │ │ │ ├── segment.demo.vue │ │ │ │ ├── size.demo.vue │ │ │ │ ├── trigger.demo.vue │ │ │ │ └── update-bar-manually.demo.vue │ │ │ └── zhCN/ │ │ │ ├── addable-debug.demo.vue │ │ │ ├── addable.demo.vue │ │ │ ├── animation-debug.demo.vue │ │ │ ├── animationx-debug.demo.vue │ │ │ ├── bar-width.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── before-leave.demo.vue │ │ │ ├── card.demo.vue │ │ │ ├── display-directive.demo.vue │ │ │ ├── flex-label.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── line-debug.demo.vue │ │ │ ├── modal-debug.demo.vue │ │ │ ├── no-pane.demo.vue │ │ │ ├── none-debug.demo.vue │ │ │ ├── placement.demo.vue │ │ │ ├── prefix.demo.vue │ │ │ ├── segment.demo.vue │ │ │ ├── shadow-debug.demo.vue │ │ │ ├── size.demo.vue │ │ │ ├── style-inherit-debug.demo.vue │ │ │ ├── trigger.demo.vue │ │ │ ├── unkeyed-debug.demo.vue │ │ │ └── update-bar-manually.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Tab.tsx │ │ │ ├── TabPane.tsx │ │ │ ├── Tabs.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Tabs.spec.tsx │ │ ├── __snapshots__/ │ │ │ └── Tabs.spec.tsx.snap │ │ └── server.spec.tsx │ ├── tag/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── avatar.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── bordered.demo.vue │ │ │ │ ├── checkable.demo.vue │ │ │ │ ├── closable.demo.vue │ │ │ │ ├── color.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── icon.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── shape.demo.vue │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── avatar.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── bordered.demo.vue │ │ │ ├── checkable.demo.vue │ │ │ ├── closable.demo.vue │ │ │ ├── color.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── icon.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── shape.demo.vue │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Tag.tsx │ │ │ ├── common-props.ts │ │ │ ├── public-types.ts │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Tag.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Tag.spec.ts.snap │ │ └── server.spec.tsx │ ├── theme-editor/ │ │ ├── index.ts │ │ └── src/ │ │ ├── MaximizeIcon.tsx │ │ ├── MinimizeIcon.tsx │ │ └── ThemeEditor.tsx │ ├── themes/ │ │ ├── dark.ts │ │ ├── index.ts │ │ ├── interface.ts │ │ ├── light.ts │ │ └── utils.ts │ ├── thing/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── indent.demo.vue │ │ │ │ └── index.demo-entry.md │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── indent.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── rtl-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Thing.tsx │ │ │ └── styles/ │ │ │ ├── index.cssr.ts │ │ │ └── rtl.cssr.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Thing.spec.ts │ │ └── server.spec.tsx │ ├── time/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── format.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── relative.demo.vue │ │ │ │ ├── timezone.demo.vue │ │ │ │ ├── type.demo.vue │ │ │ │ └── unix.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── format.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── relative.demo.vue │ │ │ ├── timezone-debug.demo.vue │ │ │ ├── timezone.demo.vue │ │ │ ├── type.demo.vue │ │ │ └── unix.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ └── Time.ts │ │ └── tests/ │ │ ├── Time.spec.ts │ │ └── server.spec.tsx │ ├── time-picker/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── actions.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── confirm.demo.vue │ │ │ │ ├── disabled-time.demo.vue │ │ │ │ ├── focus.demo.vue │ │ │ │ ├── format.demo.vue │ │ │ │ ├── formatted.demo.vue │ │ │ │ ├── hours12.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── size.demo.vue │ │ │ │ ├── status.demo.vue │ │ │ │ ├── step-time.demo.vue │ │ │ │ └── timezone.demo.vue │ │ │ └── zhCN/ │ │ │ ├── actions.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── confirm.demo.vue │ │ │ ├── disabled-time.demo.vue │ │ │ ├── focus.demo.vue │ │ │ ├── format.demo.vue │ │ │ ├── formatted.demo.vue │ │ │ ├── hours12.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── size.demo.vue │ │ │ ├── status.demo.vue │ │ │ ├── step-time.demo.vue │ │ │ ├── timezone-debug.demo.vue │ │ │ └── timezone.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Panel.tsx │ │ │ ├── PanelCol.tsx │ │ │ ├── TimePicker.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── TimePicker.spec.ts │ │ ├── __snapshots__/ │ │ │ └── TimePicker.spec.ts.snap │ │ └── server.spec.tsx │ ├── timeline/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── customize-icon.demo.vue │ │ │ │ ├── horizontal.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── item-placement.demo.vue │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── customize-icon.demo.vue │ │ │ ├── horizontal.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── item-placement.demo.vue │ │ │ ├── nested-debug.demo.vue │ │ │ └── size.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Timeline.tsx │ │ │ ├── TimelineItem.tsx │ │ │ └── styles/ │ │ │ └── index.cssr.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Timeline.spec.ts │ │ └── server.spec.tsx │ ├── tooltip/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── arrow.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── body-style.demo.vue │ │ │ │ ├── event.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── placement.demo.vue │ │ │ │ └── trigger.demo.vue │ │ │ └── zhCN/ │ │ │ ├── arrow.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── body-style.demo.vue │ │ │ ├── event.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── placement.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ └── trigger.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ └── Tooltip.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Tooltip.spec.ts │ │ └── server.spec.tsx │ ├── transfer/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── filterable.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── large-data.demo.vue │ │ │ │ ├── render-label.demo.vue │ │ │ │ ├── render-source-list.demo.vue │ │ │ │ └── size.demo.vue │ │ │ └── zhCN/ │ │ │ ├── asynchronous-options-debug.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── filterable.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── large-data.demo.vue │ │ │ ├── render-label.demo.vue │ │ │ ├── render-source-list.demo.vue │ │ │ ├── size.demo.vue │ │ │ └── value-debug.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Transfer.tsx │ │ │ ├── TransferFilter.tsx │ │ │ ├── TransferHeader.tsx │ │ │ ├── TransferList.tsx │ │ │ ├── TransferListItem.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── use-transfer-data.ts │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Transfer.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Transfer.spec.ts.snap │ │ └── server.spec.tsx │ ├── tree/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── async.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── batch-render.demo.vue │ │ │ │ ├── cascade.demo.vue │ │ │ │ ├── checkbox-placement.demo.vue │ │ │ │ ├── custom-field.demo.vue │ │ │ │ ├── disabled.demo.vue │ │ │ │ ├── drag-drop.demo.vue │ │ │ │ ├── file-tree.demo.vue │ │ │ │ ├── filter.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── multiple.demo.vue │ │ │ │ ├── node-props.demo.vue │ │ │ │ ├── override-click-behavior.demo.vue │ │ │ │ ├── prefix-and-suffix.demo.vue │ │ │ │ ├── show-line.demo.vue │ │ │ │ ├── switcher-icon.demo.vue │ │ │ │ └── virtual.demo.vue │ │ │ └── zhCN/ │ │ │ ├── async.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── batch-render.demo.vue │ │ │ ├── cascade.demo.vue │ │ │ ├── change-debug.demo.vue │ │ │ ├── check-strategy-debug.demo.vue │ │ │ ├── checkbox-placement.demo.vue │ │ │ ├── custom-field.demo.vue │ │ │ ├── disabled.demo.vue │ │ │ ├── drag-drop.demo.vue │ │ │ ├── ellipsis.demo.vue │ │ │ ├── expand-debug.demo.vue │ │ │ ├── file-tree.demo.vue │ │ │ ├── filter.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── multiple.demo.vue │ │ │ ├── node-props.demo.vue │ │ │ ├── override-click-behavior.demo.vue │ │ │ ├── prefix-and-suffix.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── scroll-debug.demo.vue │ │ │ ├── scrollbar-debug.demo.vue │ │ │ ├── show-line.demo.vue │ │ │ ├── switcher-icon.demo.vue │ │ │ └── virtual.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── MotionWrapper.tsx │ │ │ ├── Tree.tsx │ │ │ ├── TreeNode.tsx │ │ │ ├── TreeNodeCheckbox.tsx │ │ │ ├── TreeNodeContent.tsx │ │ │ ├── TreeNodeSwitcher.tsx │ │ │ ├── dnd.tsx │ │ │ ├── interface.ts │ │ │ ├── keyboard.tsx │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Tree.spec.ts │ │ └── server.spec.tsx │ ├── tree-select/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── action.demo.vue │ │ │ │ ├── async.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── check-strategy.demo.vue │ │ │ │ ├── checkbox.demo.vue │ │ │ │ ├── custom-field.demo.vue │ │ │ │ ├── debug.demo.vue │ │ │ │ ├── file-picker.demo.vue │ │ │ │ ├── filterable.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── multiple.demo.vue │ │ │ │ ├── show-line.demo.vue │ │ │ │ └── status.demo.vue │ │ │ └── zhCN/ │ │ │ ├── action.demo.vue │ │ │ ├── async.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── check-strategy-debug.demo.vue │ │ │ ├── check-strategy.demo.vue │ │ │ ├── checkbox.demo.vue │ │ │ ├── custom-field.demo.vue │ │ │ ├── debug.demo.vue │ │ │ ├── field-search-debug.demo.vue │ │ │ ├── file-picker.demo.vue │ │ │ ├── filterable.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── multiple.demo.vue │ │ │ ├── render-debug.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ ├── show-line.demo.vue │ │ │ └── status.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── TreeSelect.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ └── index.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── TreeSelect.spec.ts │ │ └── server.spec.tsx │ ├── tsconfig.cjs.json │ ├── tsconfig.demo.json │ ├── tsconfig.esm.json │ ├── typography/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── header.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── router-link.demo.vue │ │ │ │ ├── tags.demo.vue │ │ │ │ └── text.demo.vue │ │ │ └── zhCN/ │ │ │ ├── header.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── router-link.demo.vue │ │ │ ├── tags.demo.vue │ │ │ └── text.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── a.tsx │ │ │ ├── blockquote.tsx │ │ │ ├── create-header.ts │ │ │ ├── headers.ts │ │ │ ├── hr.tsx │ │ │ ├── li.tsx │ │ │ ├── ol.tsx │ │ │ ├── p.tsx │ │ │ ├── styles/ │ │ │ │ ├── a.cssr.ts │ │ │ │ ├── blockquote.cssr.ts │ │ │ │ ├── header.cssr.ts │ │ │ │ ├── hr.cssr.ts │ │ │ │ ├── list.cssr.ts │ │ │ │ ├── p.cssr.ts │ │ │ │ └── text.cssr.ts │ │ │ ├── text.tsx │ │ │ └── ul.tsx │ │ ├── styles/ │ │ │ ├── _common.ts │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ └── light.ts │ │ └── tests/ │ │ ├── Typography.spec.ts │ │ ├── __snapshots__/ │ │ │ └── Typography.spec.ts.snap │ │ └── server.spec.tsx │ ├── upload/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── abstract.demo.vue │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── before-upload.demo.vue │ │ │ │ ├── controlled.demo.vue │ │ │ │ ├── custom-download.demo.vue │ │ │ │ ├── custom-request.demo.vue │ │ │ │ ├── default-files.demo.vue │ │ │ │ ├── download.demo.vue │ │ │ │ ├── drag.demo.vue │ │ │ │ ├── image-card-style.demo.vue │ │ │ │ ├── image-style.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── on-finish.demo.vue │ │ │ │ └── submit-manually.demo.vue │ │ │ └── zhCN/ │ │ │ ├── abstract.demo.vue │ │ │ ├── basic.demo.vue │ │ │ ├── before-upload.demo.vue │ │ │ ├── controlled.demo.vue │ │ │ ├── custom-download.demo.vue │ │ │ ├── custom-request.demo.vue │ │ │ ├── debug.demo.vue │ │ │ ├── default-files.demo.vue │ │ │ ├── download.demo.vue │ │ │ ├── drag.demo.vue │ │ │ ├── image-card-style.demo.vue │ │ │ ├── image-style.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── on-finish.demo.vue │ │ │ ├── rtl-debug.demo.vue │ │ │ └── submit-manually.demo.vue │ │ ├── index.ts │ │ ├── src/ │ │ │ ├── Upload.tsx │ │ │ ├── UploadDragger.tsx │ │ │ ├── UploadFile.tsx │ │ │ ├── UploadFileList.tsx │ │ │ ├── UploadProgress.tsx │ │ │ ├── UploadTrigger.tsx │ │ │ ├── icons.tsx │ │ │ ├── interface.ts │ │ │ ├── public-types.ts │ │ │ ├── styles/ │ │ │ │ ├── index.cssr.ts │ │ │ │ └── rtl.cssr.ts │ │ │ └── utils.ts │ │ ├── styles/ │ │ │ ├── dark.ts │ │ │ ├── index.ts │ │ │ ├── light.ts │ │ │ └── rtl.ts │ │ └── tests/ │ │ ├── Upload.spec.tsx │ │ └── server.spec.tsx │ ├── version.ts │ ├── virtual-list/ │ │ ├── demos/ │ │ │ ├── enUS/ │ │ │ │ ├── basic.demo.vue │ │ │ │ ├── dynamic-size.demo.vue │ │ │ │ ├── index.demo-entry.md │ │ │ │ ├── keep-alive.demo.vue │ │ │ │ └── scroll.demo.vue │ │ │ └── zhCN/ │ │ │ ├── basic.demo.vue │ │ │ ├── dynamic-size.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ ├── keep-alive.demo.vue │ │ │ └── scroll.demo.vue │ │ ├── index.ts │ │ └── src/ │ │ └── VirtualList.tsx │ ├── vitest-setup.ts │ └── watermark/ │ ├── demos/ │ │ ├── enUS/ │ │ │ ├── basic.demo.vue │ │ │ ├── custom.demo.vue │ │ │ ├── fullscreen.demo.vue │ │ │ ├── image.demo.vue │ │ │ ├── index.demo-entry.md │ │ │ └── multiline.demo.vue │ │ └── zhCN/ │ │ ├── basic.demo.vue │ │ ├── custom.demo.vue │ │ ├── fullscreen.demo.vue │ │ ├── image.demo.vue │ │ ├── index.demo-entry.md │ │ └── multiline.demo.vue │ ├── index.ts │ ├── src/ │ │ ├── Watermark.tsx │ │ └── styles/ │ │ └── index.cssr.ts │ ├── styles/ │ │ ├── dark.ts │ │ ├── index.ts │ │ └── light.ts │ └── tests/ │ ├── Watermark.spec.ts │ └── server.spec.tsx ├── test.html ├── themes/ │ └── tusimple/ │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── src/ │ │ ├── TsConfigProvider.tsx │ │ ├── data-table.tsx │ │ ├── icons.tsx │ │ ├── index.ts │ │ ├── theme-overrides-dark.ts │ │ ├── theme-overrides-light.ts │ │ ├── unconfigurable-style-dark.ts │ │ ├── unconfigurable-style-light.ts │ │ ├── use-ts-dialog.ts │ │ ├── use-ts-message.ts │ │ └── vars.ts │ ├── tsconfig.cjs.json │ └── tsconfig.esm.json ├── tsconfig.cjs.json ├── tsconfig.esbuild.json ├── tsconfig.esm.json ├── tsconfig.json ├── tsconfig.scripts.json ├── tsconfig.test.json ├── umd-test/ │ ├── index.spec.js │ └── setupVue.js ├── vite.config.mts ├── volar.d.ts └── vue3.md ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms # github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] # patreon: # Replace with a single Patreon username # open_collective: # Replace with a single Open Collective username # ko_fi: # Replace with a single Ko-fi username # tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry # liberapay: # Replace with a single Liberapay username # issuehunt: # Replace with a single IssueHunt username # otechie: # Replace with a single Otechie username # custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.yml ================================================ name: 🐞 Bug report description: Report an issue with naive-ui labels: [untriaged] body: - type: markdown attributes: value: | Thanks for taking the time to fill out this bug report! - type: textarea id: bug-description attributes: label: Describe the bug description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks! placeholder: Bug description validations: required: true - type: textarea id: steps attributes: label: Steps to reproduce description: Clear and concise steps to reproduce this bug. placeholder: | 1. apply magic 2. wait 3.1415 seconds 3. 🧙🏽‍♂️ validations: required: true - type: input id: reproduction attributes: label: Link to minimal reproduction description: Please provide a [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example). Provide a streamlined [Playground](https://play-naive.pro-components.cn)/CodePen/CodeSandbox or GitHub repository link. Please don't fill in a link randomly. placeholder: Reproduction validations: required: true - type: textarea id: system-info attributes: label: System Info description: Output of `npx envinfo --system --npmPackages 'naive-ui,vue' --binaries --browsers` render: Shell placeholder: System, Binaries, Browsers validations: required: true - type: dropdown id: package-manager attributes: label: Used Package Manager description: Select the used package manager options: - npm - yarn - pnpm validations: required: true - type: checkboxes id: checkboxes attributes: label: Validations description: Before submitting the issue, please make sure you do the following options: - label: Read the [Contributing Guidelines](https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md). required: true - label: Read the [docs](https://www.naiveui.com/en-US/). required: true - label: Check that there isn't [already an issue](https://github.com/tusen-ai/naive-ui/issues) that reports the same bug to avoid creating a duplicate. required: true - label: Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/tusen-ai/naive-ui/discussions). required: true - label: The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug. required: true ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.zh-CN.yml ================================================ name: 🐞 错误报告 description: 报告 naive-ui 的问题 labels: [untriaged] body: - type: markdown attributes: value: | 感谢您抽出时间填写此错误报告！ - type: textarea id: bug-description attributes: label: 描述错误 description: 对错误的清晰而简明的描述。如果您打算为此问题提交 PR，请在描述中告诉我们。谢谢！ placeholder: 错误描述 validations: required: true - type: textarea id: steps attributes: label: 复现步骤 description: 复现此错误的清晰而简明的步骤。 placeholder: | 1. 应用魔法 2. 等待 3.1415 秒 3. 🧙🏽‍♂️ validations: required: true - type: input id: reproduction attributes: label: 最小复现链接 description: 请提供[最小复现](https://stackoverflow.com/help/minimal-reproducible-example)链接。提供一个简化的 [Playground](https://play.pro-components.cn)/CodePen/CodeSandbox 或 GitHub 仓库链接。请不要随机填写链接。 placeholder: 复现链接 validations: required: true - type: textarea id: system-info attributes: label: 系统信息 description: "`npx envinfo --system --npmPackages 'naive-ui,vue' --binaries --browsers` 命令的输出" render: Shell placeholder: 系统信息，二进制文件，浏览器 validations: required: true - type: dropdown id: package-manager attributes: label: 使用的包管理器 description: 选择所使用的包管理器 options: - npm - yarn - pnpm validations: required: true - type: checkboxes id: checkboxes attributes: label: 验证 description: 在提交问题之前，请确保完成以下步骤 options: - label: 阅读 [贡献指南](https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.zh-CN.md)。 required: true - label: 阅读 [文档](https://www.naiveui.com/zh-CN/)。 required: true - label: 检查是否已经存在[相同问题的问题](https://github.com/tusen-ai/naive-ui/issues)，以避免创建重复的问题。 required: true - label: 确保这是一个具体的 bug。有关问题和答案，请打开 [GitHub 讨论](https://github.com/tusen-ai/naive-ui/discussions)。 required: true - label: 提供的复现是[最小可复现的示例](https://stackoverflow.com/help/minimal-reproducible-example)。 required: true ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ blank_issues_enabled: false contact_links: - name: 💬 Discord Chat url: https://discord.gg/Pqv7Mev5Dd about: Ask questions and discuss with other Naive UI users in real time. - name: ❓ Questions & Discussions url: https://github.com/tusen-ai/naive-ui/discussions about: Use GitHub discussions for message-board style questions and discussions. ================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.yml ================================================ name: 🚀 New feature request description: Propose a new feature to be added to Naive UI labels: [feature request] body: - type: markdown attributes: value: | Thanks for your interest in the project and taking the time to fill out this feature request! - type: textarea id: feature-description attributes: label: Clear and concise description of the problem description: 'As a developer using Naive UI I want [goal / wish] so that [benefit]. If you intend to submit a PR for this issue, tell us in the description. Thanks!' validations: required: true - type: textarea id: suggested-solution attributes: label: Suggested solution description: 'In module [xy] we could provide following implementation...' validations: required: true - type: textarea id: alternative attributes: label: Alternative description: Clear and concise description of any alternative solutions or features you've considered. - type: textarea id: additional-context attributes: label: Additional context description: Any other context or screenshots about the feature request here. - type: checkboxes id: checkboxes attributes: label: Validations description: Before submitting the issue, please make sure you do the following options: - label: Read the [Contributing Guidelines](https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md). required: true - label: Read the [docs](https://www.naiveui.com/en-US). required: true - label: Check that there isn't already an issue that request the same feature to avoid creating a duplicate. required: true ================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.zh-CN.yml ================================================ name: 🚀 新功能请求 description: 提议将新功能添加到 Naive UI labels: [feature request] body: - type: markdown attributes: value: | 感谢您对该项目的关注，并抽出时间填写此功能请求！ - type: textarea id: feature-description attributes: label: 问题的清晰而简明的描述 description: '作为使用 Naive UI 的开发者，我希望 [目标/愿望]，以便 [好处]。如果您打算为此问题提交 PR，请在描述中告诉我们。谢谢！' validations: required: true - type: textarea id: suggested-solution attributes: label: 建议的解决方案 description: '在模块 [xy] 中，我们可以提供以下实现...' validations: required: true - type: textarea id: alternative attributes: label: 备选方案 description: 对您考虑过的任何备选解决方案或功能的清晰而简明的描述。 - type: textarea id: additional-context attributes: label: 附加上下文 description: 在这里提供有关功能请求的任何其他上下文或截图。 - type: checkboxes id: checkboxes attributes: label: 验证 description: 在提交问题之前，请确保完成以下步骤 options: - label: 阅读 [贡献指南](https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md)。 required: true - label: 阅读 [文档](https://www.naiveui.com/en-US)。 required: true - label: 检查是否已经存在请求相同功能的问题，以避免创建重复的问题。 required: true ================================================ FILE: .github/dependabot.yml ================================================ # To get started with Dependabot version updates, you'll need to specify which # package ecosystems to update and where the package manifests are located. # Please see the documentation for all configuration options: # https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates version: 2 updates: - package-ecosystem: npm # See documentation for possible values directory: "/" # Location of package manifests schedule: interval: "daily" ================================================ FILE: .github/pull_request_template.md ================================================ ================================================ FILE: .github/workflows/node.js.yml ================================================ # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions name: Node.js CI on: push: branches: [main, feat, docs] pull_request: branches: [main, feat, docs] jobs: lint: environment: test runs-on: ubuntu-latest strategy: matrix: node-version: [22] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - uses: actions/checkout@v3 - name: Install pnpm run: corepack enable - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} - run: pnpm install - name: Lint run: pnpm run lint test: environment: test runs-on: ubuntu-latest strategy: matrix: node-version: [22] steps: - uses: actions/checkout@v3 - name: Install pnpm run: corepack enable - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} - name: Setup timezone uses: szenius/set-timezone@v2.0 with: timezoneLinux: Asia/Shanghai timezoneMacos: Asia/Shanghai timezoneWindows: Asia/Shanghai - run: pnpm install - name: Test run: pnpm run test:cov - name: Code coverage uses: codecov/codecov-action@v3 with: token: ${{ secrets.CODECOV_TOKEN }} files: coverage/lcov.info ================================================ FILE: .github/workflows/publish-to-pkg.pr.new.yml ================================================ name: Publish to pkg.pr.new on: push: branches: [main] pull_request: types: [labeled] # Cancel all previous workflows on main. concurrency: group: ${{ github.workflow }}-${{ github.ref }} cancel-in-progress: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }} jobs: publish: runs-on: ubuntu-latest if: github.event_name == 'push' || (github.event_name == 'pull_request' && contains(github.event.label.name, 'preview')) steps: - name: Checkout code uses: actions/checkout@v4 - run: corepack enable - uses: actions/setup-node@v4 with: node-version: 22 cache: "pnpm" cache-dependency-path: "package.json" - name: Install dependencies run: pnpm install - name: Build run: pnpm build:package - name: Publish preview run: pnpx pkg-pr-new publish --compact ================================================ FILE: .gitignore ================================================ node_modules dist docDist build-doc/deploy-doc.sh build-doc/dist test-size test-bundle test/unit/coverage package-lock.json playground/temp yarn.lock .DS_Store .vscode .idea .pulsar *.swp *.tgz coverage /fonts /site /package lib es *.tsbuildinfo pnpm-lock.yaml web-types.json ~* .pnpm-debug.log .history ================================================ FILE: .husky/pre-commit ================================================ pnpm exec lint-staged ================================================ FILE: .npmrc ================================================ shell-emulator=true ================================================ FILE: .nvmrc ================================================ 22 ================================================ FILE: .pnpmfile.cjs ================================================ // We will lock vue version if there's regression const lockVueVersion = false const vueVersion = '3.2.36' const isSameVersionVuePackage = (pkgName) => [ 'vue', '@vue/shared', '@vue/compiler-sfc', '@vue/server-renderer', '@vue/reactivity', '@vue/reactivity-transform', '@vue/compiler-dom', '@vue/compiler-ssr', '@vue/compiler-core' ].some((name) => name === pkgName) function readPackage(pkg) { if (isSameVersionVuePackage(pkg.name)) { pkg.version = vueVersion } ;['dependencies', 'peerDependencies'].forEach((depsType) => { const deps = { ...pkg[depsType] } for (dep in pkg[depsType]) { if (isSameVersionVuePackage(dep)) { deps[dep] = vueVersion } } pkg[depsType] = deps }) return pkg } module.exports = lockVueVersion ? { hooks: { readPackage } } : {} ================================================ FILE: .prettierignore ================================================ *.cssr.js *.cssr.ts ================================================ FILE: .prettierrc ================================================ { "semi": false, "singleQuote": true, "printWidth": 80, "trailingComma": "none", "proseWrap": "never" } ================================================ FILE: CHANGELOG.en-US.md ================================================ # CHANGELOG ## NEXT_VERSION ### Fixes - Fix `n-color-picker` passed `style` and `click` (onClick) not applied to trigger, closes [#7528](https://github.com/tusen-ai/naive-ui/issues/7528). ## 2.44.1 `2026-03-08` ### Feats - `n-config-provider` adds per-component `size` options in `component-options` (`AutoComplete`, `Cascader`, `ColorPicker`, `DatePicker`, `InputNumber`, `InputOtp`, `Mention`, `Select`, `TimePicker`, `Transfer`, `TreeSelect`). ### Fixes - `n-config-provider` fixes `size` prop doesn't work for some components. ## 2.44.0 `2026-03-08` ### Breaking Changes - `n-color-picker` refactor DOM structure & trigger class names. - `n-card`'s `n-card__content` class name is renamed to `n-card-content`. - `n-select` will clear options created by `tag` prop by default when clear button is clicked. ### Feats - `n-color-picker` adds `trigger` slot, closes [#7192](https://github.com/tusen-ai/naive-ui/issues/7192). - `n-select` adds `clear-created-options-on-clear` prop to control whether created options are cleared when clearing while `tag` and clearable are enabled. - `n-select`, `n-auto-complete`, `n-mention`, `n-popselect`, `n-cascader`, `n-pagination` add `scrollbar-props` prop. - `n-config-provider` adds component-level `renderEmpty` options (`Cascader`, `DataTable`, `Select`, `Transfer`, `Tree`, `TreeSelect`). - `n-config-provider` adds per-component `size` options in `component-options` (`Button`, `Card`, `Checkbox`, `DataTable`, `Descriptions`, `Dropdown`, `DynamicTags`, `Form`, `Input`, `Pagination`, `Popselect`, `Radio`, `Rate`, `Result`, `Skeleton`, `Space`, `Switch`, `Table`, `Tabs`, `Tag`), closes [#356](https://github.com/tusen-ai/naive-ui/issues/356). - `n-upload`'s `submit` method adds `retry` option. - `n-breadcrumb-item` adds `show-separator` prop for controlling separator visibility when used with `transition-group`, closes [#3614](https://github.com/tusen-ai/naive-ui/issues/3614). - `n-card` adds `content-scrollable` prop, closes [#4848](https://github.com/tusen-ai/naive-ui/issues/4848), [#6759](https://github.com/tusen-ai/naive-ui/pull/6759). - `n-date-picker` adds `fast-year-select` prop. - `n-date-picker` adds `fast-month-select` prop. - `n-button` adds `spin-props` prop. - `n-cascader` adds `spin-props` prop. - `n-log` adds `spin-props` prop. - `n-message` adds `spin-props` prop. - `n-switch` adds `spin-props` prop. - `n-tree` adds `spin-props` prop. - `n-spin` adds `radius` and `scale` props. - `n-tree-select` adds `show-line` prop. ### Fixes - Fix `katex` type compatibility by upgrading to `0.16.28` and removing `@types/katex` dependency, closes [#7423](https://github.com/tusen-ai/naive-ui/issues/7423). - Fix `n-select`'s created option is not cleared when clearing dynamic options while `tag` and `clearable` are enabled, closes [#7405](https://github.com/tusen-ai/naive-ui/issues/7405). - Fix `n-modal` event listeners not removed, closes [#7341](https://github.com/tusen-ai/naive-ui/issues/7341) by [@lu-han](https://github.com/lu-han). - Fix `n-marquee` component Non-function value encountered for default slot warning. - Fix `n-data-table`'s empty slot is not shown in a `display: flex` container. - Fix `n-data-table` missing header scrollbar in `n-data-table` when in empty state with `max-height` or `flex-height`, closes [#7479](https://github.com/tusen-ai/naive-ui/pull/7479). - Fix `n-input`, `n-select`, `n-date-picker`, `n-auto-complete`, `n-cascader`, `n-color-picker`, `n-input-number`, `n-input-otp`, `n-mention`, `n-time-picker`, `n-transfer`, `n-tree-select` not reading global `size` config from `n-config-provider`. - Fix `n-data-table` and `n-tag` `size` prop default value preventing global config from taking effect. ## 2.43.2 `2025-11-16` ### Fixes - Fix seemly dependency version range allows incompatible versions. - Fix `n-progress` style is incorrect after using the dashboard mode exceeding 100%, closes [#6627](https://github.com/tusen-ai/naive-ui/issues/6627). - Fix `n-modal`'s outside content can't be interacted with when `show-mask` is set to `false`. ### Feats - `n-date-picker` prop `defaultTime` can also accept a function that will return a formatted string. - `n-steps` adds `content-placement` prop, closes [#7044](https://github.com/tusen-ai/naive-ui/issues/7044). ## 2.43.1 `2025-09-14` ### Fixes - Fix esm format files are importing `lodash` rather than `lodash-es`. ## 2.43.0 `2025-09-13` ### Breaking Changes - Modal's inner close button won't be focusable using keyboard and it'll no longer be focused first by default. ### i18n - Add daDK locale. ### Fixes - Fix `n-color-picker` black and white effect of text is not obvious, closes [#7074](https://github.com/tusen-ai/naive-ui/issues/7074). - Fix `n-image` zoom in & out locale text in `da-DK` `sv-SE`. - Fix `n-popover`'s `themeOverrides` property does not have the `Scrollbar` style configuration. - Fix `n-input`'s `themeOverrides` property does not have the `Scrollbar` style configuration. - Fix `n-anchor` can't activate link in the bottom of the page by click, closes [#7033](https://github.com/tusen-ai/naive-ui/issues/7033), closes [#6918](https://github.com/tusen-ai/naive-ui/issues/6918), [#6844](https://github.com/tusen-ai/naive-ui/issues/6844), [#6782](https://github.com/tusen-ai/naive-ui/issues/6782). - Fix `n-upload` component `'Non-function value encountered for default slot'` warning. - Fix `n-input`'s `tabindex` property setting of `input-props` does not take effect. - Fix `n-tab` scroll shadow pseudo-class style conflicts in multi-layer tab nesting scenarios, closes [#6854](https://github.com/tusen-ai/naive-ui/issues/6854). - Fix `n-menu`'s disabled style not working when parent node is set to `disabled` and child node has `type: "group"`, closes [#6792](https://github.com/tusen-ai/naive-ui/issues/6792). - Fix `n-input-group-label` not injecting `formItemInjectionKey`, causing the `size` property to fail, and close [#7066](https://github.com/tusen-ai/naive-ui/issues/7066). - Fix the issue of style confusion in `n-carousel` when there is only one image, close [#6476](https://github.com/tusen-ai/naive-ui/issues/6476). - Fix `n-marquee` component 'Non-function value encountered for default slot' warning. - Fix memory leak caused by `n-upload` icon. ### Features - `n-data-table`'s column adds `customNextSortOrder` attribute, closes [#6850](https://github.com/tusen-ai/naive-ui/issues/6850). - Add `n-avatar-group`'s corresponding generic component `NGAvatarGroup`, closes [#6909](https://github.com/tusen-ai/naive-ui/issues/6909). - `n-avatar-group` adds `size` prop. - `n-popover` supports RTL. - `n-tooltip` supports RTL. - `n-upload` supports RTL. - `n-tree-select` supports RTL. - `useDialog`'s option supports `z-index`, closes [#4349](https://github.com/tusen-ai/naive-ui/issues/4349). - Add `n-heatmap` component. - - `n-image` adds showPreview methods, closes [#6695](https://github.com/tusen-ai/naive-ui/issues/6695). - Add `n-image-preview` component. - `n-image-group` can be used without `n-image`. - `n-input-otp` adds `focusOnChar` util method, closes [#7073](https://github.com/tusen-ai/naive-ui/issues/7073). - `n-form-item` adds `content-class`、`content-style` props. - `n-message` adds `border` theme variable, closes [#7105](https://github.com/tusen-ai/naive-ui/issues/7105). - `n-modal` adds `show-mask` prop. - `useModal` add `render` function, closes [#5857](https://github.com/tusen-ai/naive-ui/issues/5857). - `n-card` add `close-focusable` prop. - `n-dialog` add `close-focusable` prop. - `n-form-item` adds `invalidateLabelWidth` method，`n-form` adds `invalidateLabelWidths` method，closes [#5939](https://github.com/tusen-ai/naive-ui/issues/5939). ## 2.42.0 `2025-06-17` ### Breaking Changes - Fix `n-date-picker`'s `time-picker-format` prop doesn't work, the prop is misspelled as `timer-picker-format` before, closes [#6820](https://github.com/tusen-ai/naive-ui/issues/6820). ### Fixes - Fix `n-input-otp` event bindings not removed when elements are disabled (disabled/readonly), fix width style specificity conflict. - Fix `n-date-picker`'s `shortcuts`' time value will be overrided if `default-time` is set in with `type="datetimerange"`, closes [#6902](https://github.com/tusen-ai/naive-ui/pull/6902), [#6901](https://github.com/tusen-ai/naive-ui/pull/6901). - Fix `n-radio`, `n-radio-button` can't use `n-popover` inside, closes [#6837](https://github.com/tusen-ai/naive-ui/pull/6837), [#6832](https://github.com/tusen-ai/naive-ui/pull/6832). - Fix scrolling performance issue caused by too many layers, closes [#6887](https://github.com/tusen-ai/naive-ui/issues/6887). ### Features - `n-anchor-link` adds `title` slot, closes [#6845](https://github.com/tusen-ai/naive-ui/issues/6845). ## 2.41.1 `2025-06-08` ### Fixes - Fix `n-tabs`'s type exception of the tab slots in TabPane. - Fix `n-data-table` missing css variable of sorting cells, closes [#6521](https://github.com/tusen-ai/naive-ui/issues/6521). ### Features - 🌟 Adds `n-input-otp` component, closes [#1385](https://github.com/tusen-ai/naive-ui/issues/1385), [#5681](https://github.com/tusen-ai/naive-ui/issues/5681), [#6222](https://github.com/tusen-ai/naive-ui/issues/6222). - `n-upload` adds `custom-download`, closes [#5946](https://github.com/tusen-ai/naive-ui/issues/5946), [#6800](https://github.com/tusen-ai/naive-ui/issues/6800). - `n-upload` adds `uploadDownload` util method. - `n-tree-select` adds `indent` prop. ## 2.41.0 `2025-01-05` ### Breaking Changes - (**Vue 3.3+ required**) Add slot type for all components. ### i18n - Add kmKH locale. - Add ugCN locale. ### Features - `n-modal` adds `draggable` prop, closes [#6525](https://github.com/tusen-ai/naive-ui/issues/6525), [#5792](https://github.com/tusen-ai/naive-ui/issues/5792), [#5711](https://github.com/tusen-ai/naive-ui/issues/5711), [#5501](https://github.com/tusen-ai/naive-ui/issues/5501) and [#2152](https://github.com/tusen-ai/naive-ui/issues/2152). - `useDialog` supports `draggable` option. - `useModal` supports `draggable` option. ### Fixes - Fix `n-data-table` may have multiple expand trigger with tree data. - Fix `n-date-picker`'s `confirm`, `now`, `clear` slots doesn't work with `'month'`, `'monthrange'`, `'quarter'`, `'quarterrange'`, `'year'` and `'yearrange'` type. - Fix `n-input`'s `render-count` prop doesn't work when type is not `'textarea'`. ## 2.40.4 `2024-12-20` ### Fixes - Fix `inset` CSS property caused compatibility issues in some browsers, closes [#6604](https://github.com/tusen-ai/naive-ui/issues/6604)，close [#6602](https://github.com/tusen-ai/naive-ui/issues/6602). - Fix memory leak problem when used with new version of vue. Note: After the fix you may still find memory leak in Chrome >= 129, since they introduced a bug, see https://github.com/vuejs/core/issues/12306, https://issues.chromium.org/issues/376777343. ## 2.40.3 `2024-12-02` - Fix marquee is not exported with correct name. ## 2.40.2 `2024-11-26` ### Fixes - Fix `n-time-picker`'s `use-12-hours` type error warning, closes [#4308](https://github.com/tusen-ai/naive-ui/issues/4308). - Fix `input-number` the problem that the negative sign is replaced when the negative sign is entered. - Fix `n-data-table`'s header will show scrollbar in some old browsers, closes [#6557](https://github.com/tusen-ai/naive-ui/issues/6557). ### Features - 🌟 Adds `n-marquee` component. - `n-image` adds `error` slot, closes [#5649](https://github.com/tusen-ai/naive-ui/issues/5649). - `n-date-picker` adds `date-format` prop. - `n-date-picker` adds `calendar-day-format` prop. - `n-date-picker` adds `calendar-header-year-format` prop. - `n-date-picker` adds `calendar-header-month-format` prop. - `n-date-picker` adds `calendar-header-month-before-year` prop. - `n-date-picker` adds `calendar-header-month-year-separator` prop. - `n-progress`'s `color` prop supports gradient config. - `n-select` adds `font-weight` theme variable. - `n-input` adds `font-weight` theme variable. - `n-data-table` adds `get-csv-header` and `get-csv-cell` props, closes [#6542](https://github.com/tusen-ai/naive-ui/issues/6542). ## 2.40.1 `2024-09-26` ### Fixes - Fix `n-data-table` in virtual-x mode, when all column objects do not have the `fixed` attribute configured, it cannot be displayed normally. - Fix `css-render` dependency version is not high enough to affect the `style-mount-target` attribute of `n-config-provider`. - Fix `n-data-table`'s `rowProps` generated `class` will override the original row DOM's class. ## 2.40.0 `2024-09-26` ### Breaking Changes - Fix `n-config-provider` doesn't inherit the class prefix from it's ascendant `n-config-provider`, closes [#5970](https://github.com/tusen-ai/naive-ui/issues/5970). - Fix `n-date-picker`'s `weekFormat` uses different standards for year and week formatting. Now it uses local week and local year for year and week formatting. - Dependency `date-fns` is upgraded to V3. - `n-cascader`'s `filter` prop is now case insensitive. ### Fixes - Fix `n-infinite-scroll` reaching bottom check is not correct, closes [#6133](https://github.com/tusen-ai/naive-ui/issues/6133). - Fix `n-slider`'s rail may have styling issue in `vertical` mode when global CSS box-sizing is overrided, closes [#6114](https://github.com/tusen-ai/naive-ui/issues/6114). - Fix `n-tabs` has style issue when using `prefix` slot, `suffix` slot or `addable` prop with vertical placement, closes [#6059](https://github.com/tusen-ai/naive-ui/issues/6059), [#6060](https://github.com/tusen-ai/naive-ui/pull/6060). - Fix `n-upload` can only upload a maximum of 100 files in some old browsers when uploading directories, closes [#6027](https://github.com/tusen-ai/naive-ui/issues/6027). - Fix `n-date-picker`'s `input-readonly` prop not working in the panel's inner input for `'datetime'` or `'datetimerange'`. - Fix `n-menu` can't apply HTML attributes correctly on the component when `responsive` is set. - Fix `n-float-button` throws error when used with `popover` component, closes [#5933](https://github.com/tusen-ai/naive-ui/issues/5933). - Fix `n-badge` can't mask focus element's border, closes [#5929](https://github.com/tusen-ai/naive-ui/issues/5929). - Fix `n-button` font-weight CSS variable's name is not correct, closes [#5922](https://github.com/tusen-ai/naive-ui/issues/5922). - Fix `n-icon`'s `component` prop doesn't accept functional component. - Fix `n-mention`'s panel is misplaced if `placement` is set to `'top'` or padding is set in component's style, closes [#6241](https://github.com/tusen-ai/naive-ui/issues/6241). - Fix `n-carousel`'s transition doesn't work as expected, closes [#5993](https://github.com/tusen-ai/naive-ui/issues/5993). ### Features - 🌟 `n-data-table` adds `virtual-scroll-x`, `virtual-scroll-header`, `height-for-row`, `header-height` and `min-row-height` props for supporting horizontal virtual scrolling when there are massive columns. - 🌟 Adds `n-highlight` component. - `n-scrollbar` adds `x-placement` and `y-placement` props, closes [#6089](https://github.com/tusen-ai/naive-ui/issues/6089). - `n-date-picker` adds `clear`, `now` and `confirm` slots, closes [#6013](https://github.com/tusen-ai/naive-ui/issues/6013). - `n-upload` adds `on-retry` prop, closes [#6031](https://github.com/tusen-ai/naive-ui/issues/6031). - `n-slider`'s `marks` prop supports render function, closes [#5967](https://github.com/tusen-ai/naive-ui/issues/5967). - `n-transfer`'s `source-title` and `target-title` props support render function, closes [#6004](https://github.com/tusen-ai/naive-ui/issues/6004). - `n-data-table` add `rowData` params for `render-expand-icon` prop, closes [#6108](https://github.com/tusen-ai/naive-ui/issues/6108). - `n-empty`'s `size` prop supports `'tiny'` size. - `n-config-provider` adds `style-mount-target` prop to control where to mount components' style. - `n-data-table` adds `allowExport` prop for column object. - `n-date-picker` adds `year-range` prop. - `n-tree-select` adds `header` slot, closes [#5915](https://github.com/tusen-ai/naive-ui/issues/5915). - `n-select` adds `menu-size` prop. ## 2.39.0 `2024-07-15` ### Breaking Changes - Fix `n-input-number` Exception when the value is a string in precision mode, closes [#6091](https://github.com/tusen-ai/naive-ui/issues/6091). ### Fixes - Fix `n-form-item` validation state is not correctly updated [#6068](https://github.com/tusen-ai/naive-ui/issues/6068). - Fix `n-select`'s header make inner input unavailable, closes [#6030](https://github.com/tusen-ai/naive-ui/issues/6030). - Fix `n-tree` may have incorrect node selection status when `show-irrelevant-nodes` is disabled, close [#6115](https://github.com/tusen-ai/naive-ui/issues/6115). ### Features - `n-data-table` adds `filter-icon-popover-props` prop, closes [#6111](https://github.com/tusen-ai/naive-ui/issues/6111). - `n-input-number` adds `round` prop, closes [#6097](https://github.com/tusen-ai/naive-ui/issues/6097). - `n-color-picker` add `on-clear` props. - `n-upload`'s `on-preview` prop adds `detail.event` parameter. You can use `preventDefault` to prevent default anchor link open behavior. Closes [#6036](https://github.com/tusen-ai/naive-ui/issues/6036). - `n-data-table` adds `thColorSorting`, `thColorSortingModal`, `thColorSortingPopover`, `tdColorSorting`, `tdColorSortingModal` and `tdColorSortingPopover` theme variables, closes [#6118](https://github.com/tusen-ai/naive-ui/issues/6118), [#6120](https://github.com/tusen-ai/naive-ui/issues/6120). ### i18n - Add azAZ locale. - Add uzUZ locale. ## 2.38.2 `2024-05-03` ### Fixes - Fix `n-menu` Submenu's wai-aria role is not correct, closes [#5729](https://github.com/tusen-ai/naive-ui/issues/5729). - Fix `n-tabs` style bug with type is `segment`，closes [#5728](https://github.com/tusen-ai/naive-ui/issues/5728). - Fix the get\*String() methods for UTC/locale mismatch, closes [#5702](https://github.com/tusen-ai/naive-ui/issues/5702). - Fix `n-dialog` / `n-modal` calling `destroy` method may throw error. - Fix `useModal` setting `card` preset without corresponding props in `n-card` slots, closes [#5746](https://github.com/tusen-ai/naive-ui/issues/5746). - Fix `Submenu` component's wai-aria role setting error of `n-menu`，closes [#5729](https://github.com/tusen-ai/naive-ui/issues/5729). - Fix the `common` type error in the `theme-overrides` prop when modifying components' themes. - Fix `n-split` may emit value less than `0`. ### Features - `n-watermark` support multi-lines in content. - Adds `n-infinite-scroll` component. - `n-watermark` adds `text-align` prop. - `n-qr-code` adds `type` prop, Customize rendering output by setting `type`, providing two options: `canvas` and `svg`. - `n-card` adds `action`, `content`, `cover`, `footer` and `header-extra` props. - `n-card`'s `title` prop supports render function. - `n-upload` expose the `index` arg in `on-remove` function, closes [#5747](https://github.com/tusen-ai/naive-ui/issues/5747). - `n-upload` exports `UploadOnDownload`, `UploadOnRemove`, `UploadOnFinish` and `UploadOnChange` types. - `n-dialog` adds `action-class`, `action-style`, `content-class`, `content-style`, `title-class` and `title-style` props. - `n-split` adds `pane1-class`, `pane1-style`, `pane2-class` and `pane2-style` props. - `n-mention` adds `filter` method, closes [#5721](https://github.com/tusen-ai/naive-ui/pull/5721). - `n-slider` adds wai-aria support. - `n-date-picker` adds `time-picker-format` prop. - `n-form-item` adds `feedback-class` and `feedback-style` props. - `n-split` supports using pixel unit string as `value`. - `n-scrollbar` adds `content-style` and `content-class` props, closes [#4497](https://github.com/tusen-ai/naive-ui/issues/4497). - `n-image` adds `render-toolbar` prop. - `n-cascader` adds `get-column-style` prop. - `n-cascader` adds `get-render-prefix` prop. - `n-cascader` adds `get-render-suffix` prop. - `n-image` optimizes download icon style. - `n-scrollbar` adds `height`, `width`, `radius`, `railInsetHorizontal`, `railInsetVertical` and `railColor` theme variables. ### i18n - Add csCZ locale. - Add missing itIT locale translations. ## 2.38.1 `2024-02-26` ### Fixes - Fix `n-split`'s `min` attribute does not take effect. - Fix `n-result` built-in icons not re-rendered after hydration. - Fix `n-tabs` whose `type` is `'segment'` has capsule with wrong width and position after resize, closes [#5705](https://github.com/tusen-ai/naive-ui/issues/5705). - Fix `n-tabs`'s capsule wrong width and position after resize within `n-modal`, closes [#5569](https://github.com/tusen-ai/naive-ui/issues/5569). - Fix `n-split` doesn't work with `inline-theme-disabled` prop. - Fix `n-float-button` doesn't work with `inline-theme-disabled` prop. ### Features - `n-date-picker` adds `default-calendar-start-time` props when `type` is `'date'`/`'datetime'` or `'week'`, closes [#4493](https://github.com/tusen-ai/naive-ui/issues/4493). - `n-tree-select` adds `get-children` prop. ## 2.38.0 `2024-02-22` ### Breaking Changes - Fix `n-scrollbar`'s `scrollTo(x: number, y: number)` error where the order of method parameters does not match the document. ### Fixes - Fix `n-tree`'s `override-default-node-click-behavior` prop may conflict with default switcher click or checkbox click behavior. - Fix `n-scrollbar`'s typo on `aria-hidden` attribute. - Fix `n-form-item`'s feedback may hide and show again, closes [#5583](https://github.com/tusen-ai/naive-ui/issues/5583). - Fix `n-popselect`'s header make inner input unavailable, closes [#5494](https://github.com/tusen-ai/naive-ui/pull/5494). - Fix `n-qr-code`'s style of size. - Fix `n-badge` affects child elements' text color. ### Features - 🌟 Adds `n-modal-provider` component and `useModal` method. - 🌟 Adds `n-float-button` and `n-float-button-group` component. - 🌟 Provides ES module bundle at `/dist/index.mjs` and `/dist/index.prod.mjs`. - `n-auto-complete` adds `append` prop. - `n-select` add native `title` attribute when `filterable` and blur input. - `n-split` adds `size` prop and `on-update:size` prop. - `n-split` adds `watch-props` prop, closes [#5526](https://github.com/tusen-ai/naive-ui/issues/5526). - `n-drawer` adds `borderRadius` theme variable. - adds `n-float-button` component. - Provides ES module bundle. ### i18n - Add `etEE` locale. ## 2.37.3 `2024-01-09` ### Fixes - Fix `n-split` has no color if it's not used in a card. ## 2.37.2 `2024-01-09` ### Fixes - `n-data-table`'s `downloadCsv` method will export selection & expand column. ## 2.37.1 `2024-01-08` ### Fixes - Click clear button on components with popup may trigger reopen behaviors. - Fix `n-form`'s `validate` returned `Promise` may not `resolve`. ### Features - `n-collapse` adds `trigger-areas` prop. - `n-date-picker`'s `is-date-disabled` callback prop supports get detail info of date/year/month/quarter button as parameter, closes [#4649](https://github.com/tusen-ai/naive-ui/issues/4649). - `n-auto-complete` adds `empty` slot. - `n-auto-complete` adds `show-empty` prop. ## 2.37.0 `2024-01-07` ### Breaking Changes - `module` prop in `package.json` is changed from `es/index.js` to `es/index.mjs`. ### Fixes - Fix `n-space` vnode reuse problem caused by filtering out comment nodes of slot, closes [#5136](https://github.com/tusen-ai/naive-ui/issues/5136). - Fix `n-data-table`'s prop `pagination`'s `default-page-size` and `default-page` not work in uncontrolled mode, closes [#5201](https://github.com/tusen-ai/naive-ui/issues/5201). - Fix `n-time-picker` formatting (format="HH: mm: ss. SSS") preventing modification of milliseconds in the edit box, closes [#5224](https://github.com/tusen-ai/naive-ui/issues/5224). - Fix `n-notification` notification clips out of screen when screen width is less than 400px wide. - Fix `n-carousel` transition effect incorrect when using the `slide` effect in loop mode with only two elements, closes [#4323](https://github.com/tusen-ai/naive-ui/issues/4323). - Fix `n-carousel` trigger incorrect `current-index` value on arrow button click with single image, closes [#5130](https://github.com/tusen-ai/naive-ui/issues/5130). - Fix `n-upload-trigger` in directory drag mode with a lot of files, some of the files are not read. - Fix `n-dynamic-tags`'s abnormal behavior when using keyboard to trigger add button, closes [#5077](https://github.com/tusen-ai/naive-ui/issues/5077). - Fix `n-tree` leaf node line color. - Fix `n-collapse-item` cursor pointer to correct element, closes [#5482](https://github.com/tusen-ai/naive-ui/issues/5482). - Fix `n-data-table` throws error if summary config has empty column. - Fix `n-drawer`'s `on-mask-click` may be called multiple times. - Fix `n-tree`'s `data` When the data source 'data' switches several times according to a certain scene, some logic of animation processing can cause errors in rendering the displayed data, closes [#5217](https://github.com/tusen-ai/naive-ui/issues/5217). - Fix `n-radio` value's native input element's checked value is not updated, closes [#5184](https://github.com/tusen-ai/naive-ui/issues/5184). - Fix `n-data-table` height incorrect when set `min-height` in empty state，closes [#5108](https://github.com/tusen-ai/naive-ui/issues/5108). - Fix `n-tabs`'s bar not hidden when `value` is set manually to the value other than the children `n-tab`s, closes [#5100](https://github.com/tusen-ai/naive-ui/issues/5100). - Fix `n-spin` abnormal animation, closes [#3556](https://github.com/tusen-ai/naive-ui/issues/3556). - Fix `n-avatar`'s lazy loading and `fallback-src` prop not working when load error in lazy, closes [#5007](https://github.com/tusen-ai/naive-ui/issues/5007). - Fix `n-split` has no color if it's not used in a card. - Fix `n-card` `footer-class` prop not working. - Fix `n-input` click clear icon to trigger twice when using the `clearable`, closes [#5510](https://github.com/tusen-ai/naive-ui/issues/5510). - Fix `n-tabs` may miss over-scroll shadow if `placement` is `'left'` or `'right'`. - Fix `n-date-picker` with range type can input start time that is later than end time, closes [#5544](https://github.com/tusen-ai/naive-ui/issues/5544). ### Features - 🌟 Adds `n-flex` component. - 🌟 `n-date-picker`'s `type` prop supports `'week'`. - 🌟 `n-data-table` adds `downloadCsv` method, closes [#4260](https://github.com/tusen-ai/naive-ui/issues/4260). - 🌟 `n-date-picker` adds `month-format`, `year-format` and `quarter-format` props, closes [#4891](https://github.com/tusen-ai/naive-ui/issues/4891). - 🌟 `n-tree` adds `override-default-node-click-behavior` prop. - 🌟 `n-tree-select` adds `override-default-node-click-behavior` prop. - `n-space` adds `reverse` prop. - `n-input` adds `clear` method, closes [#5423](https://github.com/tusen-ai/naive-ui/issues/5423). - `n-time-picker` adds `'clear'` action, closes [#5334](https://github.com/tusen-ai/naive-ui/issues/5334). - `n-select` supports RTL. - `n-data-table` supports RTL. - `n-dialog` supports RTL. - `n-date-picker` adds `on-prev-month` `on-next-month` `on-prev-year` `on-next-year` prop, closes [#5350](https://github.com/tusen-ai/naive-ui/issues/5350). - `n-input-number` adds `input-props` prop, closes [#5450](https://github.com/tusen-ai/naive-ui/issues/5450). - Update `ruRU` locale. - `n-drawer` adds `content-class` prop. - `n-drawer-content` adds `body-class` `body-content-class` `footer-class` and `header-class` props. - `n-tree` adds multiple `scrollTo` configurations. - `n-form` adds `level` property from `FormItemRule` to show abnormal values but not block submit. - `n-cascader` adds `ellipsis-tag-popover-props` prop. - `n-select` adds `ellipsis-tag-popover-props` prop. - `n-tree-select` adds `ellipsis-tag-popover-props` prop. - `n-avatar-group` adds `expand-on-hover` prop. - `n-tabs` adds `tab-class`, `add-tab-style` and `add-tab-class` props. - `n-tree` adds `override-default-node-click-behavior` prop. - `n-tree-select` adds `override-default-node-click-behavior` prop. - Adds `n-flex` component. - `n-pagination` adds `show-quick-jump-dropdown` prop, closes [#5251](https://github.com/tusen-ai/naive-ui/issues/5251). ## 2.36.0 `2023-12-18` ### Fixes - Fix `n-tree` unexposed line color variable `--n-line-color`, closes [#5339](https://github.com/tusen-ai/naive-ui/issues/5339). - Fix `n-tree` The style of the selected node is not displayed in the case of 'disabled'. - Fix `n-tree` on `virtual-scroll` empty data placeholder lost problem. - Fix `n-watermark` won't clear it's content when `content` prop is set to empty. - Fix `n-tree` use `render-switcher-icon` prop to customize switcher icon will cause node selection, closes [#5380](https://github.com/tusen-ai/naive-ui/issues/5380). - Fix `n-input` will display the password reveal button by default when the `type` is set to `password`. Starting with Microsoft Edge browser Version 87. closes [#5384](https://github.com/tusen-ai/naive-ui/issues/5384). - Fix `n-radio-button` css var `buttonColor` not working. - Fix `n-input` not display vertical scrollbar when `type` is `textarea` and the inline theme is disabled, closes [#5418](https://github.com/tusen-ai/naive-ui/issues/5418). - Fix if `inline-theme-disabled` is set, custom color whose params include decimal won't work in `n-tag`, `n-avatar`, `n-badge`, `n-button`, `n-rate`. - Fix `n-tabs`'s border height in `vertical` mode. - Fix `n-tree`'s node's hover color has higher priority than selected color in `block-line` mode. - Fix `n-tree` click expand switch causes checkbox being checked. - Fix `n-progress` multiple `type="circle"` cases style override issue, closes [#7172](https://github.com/tusen-ai/naive-ui/issues/7172). ### Features - `n-tree` adds `treeGetClickTarget` method to get click target of node click event, closes [#5375](https://github.com/tusen-ai/naive-ui/issues/5375). - `n-space` adds `item-class` prop. - `n-layout` adds `content-class` prop. - `n-layout-sider` adds `collapsed-trigger-class` and `trigger-class` props. - `n-spin` adds `content-class` and `content-style` props. - `n-popover` adds `arrow-class`, `arrow-wrapper-class`, `arrow-wrapper-style`, `content-class`, `footer-class` and `header-class` props. - `n-notification-provider` adds `container-class` prop. - `n-message-provider` adds `container-class` prop. - `n-loading-bar-provider` adds `container-class` prop. - `n-thing` adds `content-class` and `description-class` props. - `n-card` adds `content-class`, `footer-class`, `header-class` and `header-extra-class` props. - `n-descriptions` adds `content-class` and `label-class` props. - `n-upload` adds `file-list-class` and `trigger-class` props. - `n-dynamic-tags` adds `input-class` and `tag-class` props. - `n-dynamic-input` adds `item-class` prop. - `n-slider` adds `on-dragstart` `on-dragend` prop, closes [#5365](https://github.com/tusen-ai/naive-ui/issues/5365). - `n-dialog` adds `close` slot. - `n-equation` export the `EquationProps` type. - `n-popselect` adds `header` slot. - `n-tree-select` adds `watch-props` prop. - Adds `n-split` component, closes [#3557](https://github.com/tusen-ai/naive-ui/issues/3557). - Adds `n-virtual-list` component. - Adds `n-qr-code` component, closes [#2535](https://github.com/tusen-ai/naive-ui/issues/2535). - `n-menu` add `responsive` prop, it will collapse overflow menu items in horizontal mode. - `n-menu` add `deriveResponsiveState` method. ## 2.35.0 `2023-10-02` ### Breaking Changes - `n-input`'s `suffix` to the back of `loading`, close [#4685](https://github.com/tusen-ai/naive-ui/issues/4685). - Fix `n-log`'s `silent` attribute spelling problem, closes [#4875](https://github.com/tusen-ai/naive-ui/issues/4875). ### Fixes - Fix `n-radio` export `radioProps` dosen't not includes `theme-overrides`. - Fix `n-description-item`'s `span` doesn't work when `n-descriptions`'s `label-placement` is `'top'` if there's only single line, closes [#4874](https://github.com/tusen-ai/naive-ui/issues/4874). - Fix `n-upload`'s `data` prop type can't include `Blob` element. - Fix `n-select` allows option to be created with existed label, closes [#4703](https://github.com/tusen-ai/naive-ui/issues/4703). - Fix `n-upload`'s `render-icon` prop's type. - Fix `n-auto-complete`'s `onSelect` type, closes [#4617](https://github.com/tusen-ai/naive-ui/issues/4617). - Fix `n-grid-item`'s suffix prop won't work with responsive config, closes [#4635](https://github.com/tusen-ai/naive-ui/issues/4635). - Fix `n-tabs`'s `paneWrapperStyle` prop missing height after animation. - Fix `n-tree` should check all items instead of uncheck all if indeterminate checkbox is clicked, closes [#4941](https://github.com/tusen-ai/naive-ui/issues/4941). - Fix the Popover was not displayed when the `n-internal-selection` was disabled and the mouse was moved over the '+n' tag, closes [#4789](https://github.com/tusen-ai/naive-ui/issues/4789). - Fix `n-input` doesn't display the vertical scroll bar when `type` is `textarea`, closes [#4570](https://github.com/tusen-ai/naive-ui/issues/4570). - Fix `n-alert`'s content style problem, when there is no title and use closable, closes [#4588](https://github.com/tusen-ai/naive-ui/issues/4588). - Fix `n-select`'s `empty` slot action then it is an interactive component, closes [#4700](https://github.com/tusen-ai/naive-ui/issues/4700). - Fix `n-data-table` header and body's scrolling are not sync when using the keyboard, closes [#3941](https://github.com/tusen-ai/naive-ui/issues/3941). - Fix `n-data-table` drag column causing text selection in Safari, closes [#4957](https://github.com/tusen-ai/naive-ui/issues/4957). - Fix `n-data-table` ellipsis content in table cell would wrap with expand button when using tree data, closes [#3755](https://github.com/tusen-ai/naive-ui/issues/3755). - Fix `useLoadingBar` can't finish loading when called `finish` method, closes [#4965](https://github.com/tusen-ai/naive-ui/issues/4965). - Fix `n-select` can still trigger focus and blur event in the disabled state, closes [#4454](https://github.com/tusen-ai/naive-ui/issues/4454). - Fix `n-steps` may have line wrap issue if step is more than 9. - Fix `n-grid` v-show reports errors when switching multiple times, closes [#4422](https://github.com/tusen-ai/naive-ui/issues/4422). - Fix `n-tree`'s `TreeOption`'s `checkboxDisabled` prop doesn't work when `check-on-click` is `true`. - Fix rapid clicks on `n-date-input`'s buttons triggering a text select for the rest of the website. - Fix `n-auto-complete`'s autocomplete menu's unexpected open when clicking the clear icon with the input not focused, closes [#4658](https://github.com/tusen-ai/naive-ui/issues/4658). - Fix `n-input`'s `on-keyup` prop type, closes [#5101](https://github.com/tusen-ai/naive-ui/issues/5101). - Fix `n-data-table`'s default sorter to place null values at the very top or bottom, closes [#5281](https://github.com/tusen-ai/naive-ui/issues/5281). - Fix `n-popconfirm`'s action button should not be triggered multiple times，closes [#4687](https://github.com/tusen-ai/naive-ui/issues/4687). ### Features - `n-drawer` adds `max-height`, `min-height`, `max-width` and `max-width` props. - `n-progress` supports indicator slot when the `indicator-placement` is set to `'inside'` in the `'line'` type, closes [#4888](https://github.com/tusen-ai/naive-ui/issues/4888). - `n-image-preview` adds `downaload` button, closes [#4302](https://github.com/tusen-ai/naive-ui/issues/4302). - `n-transfer` adds `select-all-text` and `clear-text` prop, closes [#4910](https://github.com/tusen-ai/naive-ui/issues/4910). - `n-tree` adds `scrollbar-props` prop, closes [#4021](https://github.com/tusen-ai/naive-ui/issues/4666). - `n-select` adds `focusInput` `blurInput` methods. - `n-tree-select` adds `focusInput` `blurInput` methods. - `n-image-group` adds `on-preview-prev` `on-preview-next` prop. - `n-tree` adds `show-line` prop, closes [#3796](https://github.com/tusen-ai/naive-ui/issues/3796), [#4554](https://github.com/tusen-ai/naive-ui/pull/4554). - `n-tree` adds node information for `render-switcher-icon` props, closes [#4815](https://github.com/tusen-ai/naive-ui/issues/4815). - `n-input-number` export the `select` method. - `n-data-table` adds `n-data-table-tr--expanded` class to expanded rows, and `n-data-table-tr n-data-table-tr--expand` class to the additional row, closes [#4420](https://github.com/tusen-ai/naive-ui/issues/4420). - `n-spin` adds `delay` prop. - Adds `n-performant-ellipsis` component. - `DataTableBaseColumn` adds `ellipsisComponent` prop. ### i18n - Update `zhTW` locale. - Add `svSE` locale. - Update `jaJP` locale. ## 2.34.4 `2023-05-21` ### Fixes - Fix `n-notification`'s `description` does not wrap when there is English, closes [#4609](https://github.com/tusen-ai/naive-ui/issues/4609). - Fix `n-dynamic-input` can't access `value[index]` by `index` passed in `on-remove` prop. - Fix `n-dynamic-input` doesn't return correct `index` in `on-create` callback. - Fix `trTR` i18n, closes [#4231](https://github.com/tusen-ai/naive-ui/issues/4231). - Fix `n-input`'s show password icon is offset when use both `password` and `disabled`, closes [#4364](https://github.com/tusen-ai/naive-ui/issues/4364). - Fix `n-image` set `fallback-src` prop and lazy loading dosen't work, closes[#4480](https://github.com/tusen-ai/naive-ui/issues/4480). - Fix `n-upload` warning cause by extraneous non-props attributes were passed to vue component `TransitionGroup` but could not be automatically inherited, closes [#4447](https://github.com/tusen-ai/naive-ui/issues/4447). - Fix `n-menu` `show` `default` attribute spelling problem, closes [#4750](https://github.com/tusen-ai/naive-ui/issues/4750). - Fix `n-icon-wrapper`'s theme error, closes [#4768](https://github.com/tusen-ai/naive-ui/issues/4768). ### Feats - `n-dynamic-input` adds `action` slot, closes [#3981](https://github.com/tusen-ai/naive-ui/issues/3981). - `n-dynamic-input` add `disabled` prop, closes [#4055](https://github.com/tusen-ai/naive-ui/issues/4055). - `n-data-table` adds `titleAlign` prop, closes [#3954](https://github.com/tusen-ai/naive-ui/issues/3954). - `n-rate` exposes `index` in the default slot, closes [#4413](https://github.com/tusen-ai/naive-ui/issues/4413). - `n-scrollbar` adds `size` prop, closes [#3896](https://github.com/tusen-ai/naive-ui/issues/3896). - `n-data-table`'s `render-expand-icon` add `expanded` param, closes [#4439](https://github.com/tusen-ai/naive-ui/issues/4439). - `n-tabs` adds `pane-wrapper-class` `pane-wrapper-style` prop. - `n-collapse` adds `titlePadding` theme variable, closes [#4728](https://github.com/tusen-ai/naive-ui/issues/4728). - `n-tabs` adds `placement` prop. ### i18n - Update `zhTW` locale. - Add `faIR` locale. ## 2.34.3 `2022-12-24` ### Fixes - Fix `n-progress`'s `indicator-text-color` prop doesn't work when `indicator-placement` is `'inside'`. - Fix `n-image` error while operating the previewed image, closes [#4157](https://github.com/tusen-ai/naive-ui/issues/4157). - Fix `n-tree` cannot access `mergedFilterRef` before initialization error, closes [#4134](https://github.com/tusen-ai/naive-ui/issues/4134). - Fix `n-menu` can't override submenu dropdown's `trigger` by `dropdown-props`, closes [#4147](https://github.com/tusen-ai/naive-ui/issues/4147). - Fix `n-ellipsis` cannot be closed when using `keep-alive`, closes [#4079](https://github.com/tusen-ai/naive-ui/issues/4079). - Fix `n-upload` doesn't show thumbnail for file with image type file name, closes [#4198](https://github.com/tusen-ai/naive-ui/issues/4198). - Fix `n-input` style bug of tiny size with autosize prop, closes [#4167](https://github.com/tusen-ai/naive-ui/issues/4167). - Fix `n-image` & `n-avatar` in `lazy` mode, after setting the `intersection-observer-options` `rootMargin` attribute, the preload does not take effect. ### Feats - `n-tree` adds `get-children` prop, closes [#4128](https://github.com/tusen-ai/naive-ui/issues/4128). - `n-badge` adds `offset` prop, closes [#4149](https://github.com/tusen-ai/naive-ui/issues/4149). - `n-card` adds `tag` prop. - demos can now use `` return script } export async function convertMd2ComponentDocumentation( text: string, url: string, env: string = 'development' ): Promise { const forceShowAnchor = !!~text.search('') const colSpan = ~text.search('') ? 1 : 2 const hasApi = !!~text.search('## API') const tokens = marked.lexer(text) // resolve external components const componentsIndex = tokens.findIndex( token => token.type === 'code' && (token as Tokens.Code).lang === 'component' ) let components: ComponentInfo[] = [] if (~componentsIndex) { const token = tokens[componentsIndex] as Tokens.Code components = token.text .split('\n') .map((component) => { const [ids, importStmt] = component.split(':') if (!ids.trim()) throw new Error('No component id') if (!importStmt.trim()) throw new Error('No component source url') return { ids: ids.split(',').map(id => id.trim()), importStmt: importStmt.trim() } }) .filter(({ ids, importStmt }) => ids && importStmt) tokens.splice(componentsIndex, 1) } // add edit on github button on title const titleIndex = tokens.findIndex( token => token.type === 'heading' && token.depth === 1 ) if (titleIndex > -1) { const titleText = JSON.stringify( (tokens[titleIndex] as Tokens.Heading).text ) const btnTemplate = `<\/edit-on-github-header>` tokens.splice(titleIndex, 1, { type: 'html', pre: false, text: btnTemplate } as Tokens.HTML) } // resolve demos, debug demos are removed from production build const demosIndex = tokens.findIndex( token => token.type === 'code' && (token as Tokens.Code).lang === 'demo' ) let demoInfos: DemoInfo[] = [] if (~demosIndex) { demoInfos = await resolveDemoInfos( (tokens[demosIndex] as Tokens.Code).text, url, env ) tokens.splice(demosIndex, 1, { type: 'html', pre: false, text: genDemosTemplate(demoInfos, colSpan) } as any) } const docMainTemplate = marked.parser(tokens, { gfm: true, renderer: mdRenderer }) // generate page const docTemplate = ` ` const docScript = await genScript(demoInfos, components, url, forceShowAnchor) return `${docTemplate}\n\n${docScript}` } ================================================ FILE: build/loaders/convert-vue-to-demo.ts ================================================ import type { Token } from 'marked' import fs from 'node:fs' import path from 'node:path' import process from 'node:process' import { fileURLToPath } from 'node:url' import { marked } from 'marked' import { handleMergeCode } from '../utils/handle-merge-code' import { createRenderer } from './md-renderer' interface Parts { template?: string script?: string style?: string title: string content: string language: 'ts' | 'js' api: 'composition' | 'options' } interface MergedParts extends Parts { tsCode: string jsCode: string } interface MergePartsOptions { parts: Parts isVue: boolean } interface ConvertVue2DemoOptions { content: string resourcePath: string relativeUrl: string isVue?: boolean } const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) const mdRenderer = createRenderer() const __HTTP__ = process.env.NODE_ENV !== 'production' ? 'http' : 'https' const demoBlock = fs .readFileSync(path.resolve(__dirname, 'ComponentDemoTemplate.vue')) .toString() function mergeParts({ parts, isVue }: MergePartsOptions): MergedParts { const mergedParts: Partial = { ...parts, title: parts.title, content: parts.content, tsCode: '', jsCode: '' } handleMergeCode({ parts, mergedParts: mergedParts as MergedParts, isVue }) mergedParts.tsCode = encodeURIComponent(mergedParts.tsCode!) mergedParts.jsCode = encodeURIComponent(mergedParts.jsCode!) return mergedParts as MergedParts } const cssRuleRegex = /([^{}]*)(\{[^}]*\})/g // simulate scss style // to remove dep of sass // xxx { // mystyle // } function genStyle(sourceStyle: string): string | null { let match let matched = false const rules: string[] = [] let matchResult = cssRuleRegex.exec(sourceStyle) while (matchResult !== null) { match = matchResult matchResult = cssRuleRegex.exec(sourceStyle) matched = true const selector = match[1] const body = match[2] rules.push( selector .split(',') .map(part => `.demo-card__view ${part}, .naive-ui-doc ${part}`) .join(',') + body ) } if (!matched) return null return `` } function genVueComponent( parts: MergedParts, fileName: string, relativeUrl: string ): string { const demoFileNameReg = //g const relativeUrlReg = //g const titleReg = //g const contentReg = // const tsCodeReg = // const jsCodeReg = // const scriptReg = // const styleReg = // const demoReg = // const languageTypeReg = // let src = demoBlock src = src.replace(demoFileNameReg, fileName) src = src.replace(relativeUrlReg, relativeUrl) if (parts.content) { src = src.replace(contentReg, parts.content) } if (parts.title) { src = src.replace(titleReg, parts.title) } if (parts.tsCode) { src = src.replace(tsCodeReg, parts.tsCode) } if (parts.jsCode) { src = src.replace(jsCodeReg, parts.jsCode) } if (parts.script) { const attributes = `${parts.api === 'composition' ? ' setup' : ''}${ parts.language === 'ts' ? ' lang="ts"' : '' }` const startScriptTag = `\n` src = src.replace(scriptReg, `${startScriptTag + parts.script}\n`) } if (parts.language) { src = src.replace(languageTypeReg, parts.language) } if (parts.style) { const style = genStyle(parts.style) if (style !== null) { src = src.replace(styleReg, style) } } if (parts.template) { src = src.replace(demoReg, parts.template) } if (/__HTTP__/.test(src)) { src = src.replace(/__HTTP__/g, __HTTP__) } return src.trim() } function getFileName(resourcePath: string): [string, string] { const dirs = resourcePath.split('/') const fileNameWithExtension = dirs[dirs.length - 1] return [fileNameWithExtension.split('.')[0], fileNameWithExtension] } function getPartsOfDemo(text: string): Parts { // slot template const firstIndex = text.indexOf('') template = template.slice(0, lastIndex) const script = text.match(/([\s\S]*?)<\/script>/)?.[1]?.trim() const style = text.match(/` mergedParts.tsCode += style mergedParts.jsCode += style } } else { // only js when md or vue file if (parts.template) { mergedParts.jsCode += isVue ? `` : `` } if (parts.script) { if (parts.template) { mergedParts.jsCode += '\n\n' } mergedParts.jsCode += `\n${parts.script}\n` } if (parts.style) { if (parts.template || parts.script) { mergedParts.jsCode += '\n\n' } const style = isVue ? `` : `` mergedParts.jsCode += style } } } ================================================ FILE: build/utils/terse-cssr.ts ================================================ import { generate } from '@babel/generator' import { parse } from '@babel/parser' import _traverse from '@babel/traverse' export function terseCssr(code: string): string { // https://github.com/babel/babel/discussions/13093 const traverse = (_traverse as any)?.default ?? _traverse const patternSpace = / +/g const patternEnter = /\n+/g const ast: any = parse(code, { sourceType: 'module' }) traverse(ast, { TemplateElement(path: any) { ;(['raw', 'cooked'] as const).forEach((type) => { path.node.value[type] = path.node.value[type] .replace(patternSpace, ' ') .replace(patternEnter, '\n') }) } }) return generate(ast).code } ================================================ FILE: build/utils/tsToJs.ts ================================================ import { transformSync } from 'esbuild' export function tsToJs(content: string | null): string { if (!content) { return '' } // esbuild will remove blank line const beforeTransformContent = content.replace( /\n(\s)*\n/g, '\n__blankline\n' ) const { code } = transformSync(beforeTransformContent, { loader: 'ts', minify: false, minifyWhitespace: false, charset: 'utf8' }) return code.trim().replace(/__blankline;/g, '') } ================================================ FILE: build/vite-plugin-css-render.ts ================================================ import type { Plugin } from 'vite' import { terseCssr } from './utils/terse-cssr' export function cssRenderPlugin(): Plugin { return { name: 'css-render-vite', transform(src: string, id: string) { if (id.endsWith('.cssr.ts') || id.endsWith('.cssr.js')) { return terseCssr(src) } } } } ================================================ FILE: build/vite-plugin-demo.ts ================================================ import type { Plugin } from 'vite' import vue from '@vitejs/plugin-vue' import { getTransformedVueSrc } from './utils/get-demo-by-path' import { cssRenderPlugin } from './vite-plugin-css-render' import { demoIndexTransFormPlugin } from './vite-plugin-index-tranform' const fileRegex = /\.(md|vue)$/ const vuePlugin = vue({ include: [/\.vue$/, /\.md$/] }) export function createDemoPlugin(): Plugin[] { const naiveDemoVitePlugin: Plugin = { name: 'demo-vite', async transform(_, id) { if (fileRegex.test(id)) { return await getTransformedVueSrc(id) } }, async handleHotUpdate(ctx) { const { file } = ctx if (fileRegex.test(file)) { const code = await getTransformedVueSrc(file) if (code === undefined) return [] const { handleHotUpdate } = vuePlugin if (typeof handleHotUpdate === 'function') { return handleHotUpdate({ ...ctx, read: () => code }) } else if (handleHotUpdate?.handler) { return handleHotUpdate.handler({ ...ctx, read: () => code }) } return [] } } } const cssrPlugin = cssRenderPlugin() return [demoIndexTransFormPlugin, naiveDemoVitePlugin, vuePlugin, cssrPlugin] } ================================================ FILE: build/vite-plugin-index-tranform.ts ================================================ import type { Plugin } from 'vite' import { env } from 'node:process' function transformIndexHtml(code: string): string { switch (env.NODE_ENV) { case 'production': return code.replace(/__INDEX__/, 'demo/index.prod.js') default: return code.replace(/__INDEX__/, 'demo/index.dev.js') } } export const demoIndexTransFormPlugin: Plugin = { name: 'demo-transform', transformIndexHtml: { order: 'pre', handler: (code: string) => { return transformIndexHtml(code) } } } ================================================ FILE: demo/Caveat.md ================================================ # Caveat Code is messy here because I've no time to refactor it. It works matter. ================================================ FILE: demo/Site.vue ================================================ ================================================ FILE: demo/SiteHeader.vue ================================================ ================================================ FILE: demo/SiteRoot.vue ================================================ ================================================ FILE: demo/index.dev.js ================================================ import { createApp } from 'vue' import naive, { NThemeEditor } from '../src/index' import createDemoRouter from './routes/router' import { routes } from './routes/routes' import { installDemoComponents } from './setup' import SiteRoot from './SiteRoot.vue' const app = createApp(SiteRoot) const router = createDemoRouter(app, routes) app.use(router) app.use(naive) app.component('NThemeEditor', NThemeEditor) installDemoComponents(app) router.isReady().then(() => { app.mount('#app') }) ================================================ FILE: demo/index.prod.js ================================================ import naive, { NThemeEditor } from 'naive-ui' import { createApp } from 'vue' import createDemoRouter from './routes/router' import { routes } from './routes/routes' import { installDemoComponents } from './setup' import SiteRoot from './SiteRoot.vue' const app = createApp(SiteRoot) const router = createDemoRouter(app, routes) app.use(router) app.use(naive) app.component('NThemeEditor', NThemeEditor) installDemoComponents(app) router.isReady().then(() => { app.mount('#app') }) ================================================ FILE: demo/pages/Layout.vue ================================================ ================================================ FILE: demo/pages/docs/changelog/enUS/index.vue ================================================ ================================================ FILE: demo/pages/docs/changelog/zhCN/index.vue ================================================ ================================================ FILE: demo/pages/docs/common-issues/enUS/index.md ================================================ # Common Issues ## 1. The difference between @update:xxx and on-update:xxx ### Case 1 If you are not using `v-model:xxx` with `on-update:xxx` on the same component, there is no difference between `@update:xxx` and `on-update:xxx` when used in templates. In Naive UI, all API documents use the `on-update:xxx` format, because `@` is just a shorthand provided by Vue. If you prefer camelCase, you can use `onUpdate:xxx`. If you are using JSX, you can use `onUpdateXxx` (all `onUpdate:xxx` have an equivalent implementation of `onUpdateXxx`). ### Case 2 If you are using `v-model:xxx`, you should use `@update:xxx` on the same component. ✅ example ``. ❌ example ``. That is because `v-model:value="xxx"` will be transformed to `:onUpdate:value="xxx"`. If you are using `@update:value="yyy"` together, it will be `:onUpdate:value="[xxx, yyy]"`, and then Naive UI would take care of if. However if you are using `on-update:value="yyy"`, Vue would generate code like `:onUpdate:value="xxx" :on-update-value="yyy"` and the second one would override the first one in Vue runtime. The `v-model:value` would be broken. If you have any problems, feel free to create a PR or issue on GitHub. ## 2. How to use in Single File Component(SFC)? please see [Usage in SFC](usage-sfc) ================================================ FILE: demo/pages/docs/common-issues/zhCN/index.md ================================================ # 常见问题 ## 1. @update:xxx 和 on-update:xxx 的区别 ### 情况 1 如果你没有在同一个组件上同时使用 `v-model:xxx` 和 `on-update:xxx`，`@update:xxx` 和 `on-update:xxx` 在模版中使用时没有任何区别。 在 Naive UI 中，全部的 API 文档使用 `on-update:xxx` 格式，因为 `@` 只是 Vue 提供的一种简写。 如果你偏爱 camelCase，可以使用 `onUpdate:xxx`。 如果你在使用 JSX，可以使用 `onUpdateXxx`（所有的 `onUpdate:xxx` 都有一个 `onUpdateXxx` 的对等实现）。 ### 情况 2 如果你在一个组件上使用了 `v-model:xxx`，你应该使用 `@update:xxx`。 ✅ 例子 ``。 ❌ 例子 ``。 这是因为 `v-model:value="xxx"` 会被转化为 `:onUpdate:value="xxx"`。如果你同时使用了 `@update:value="yyy"`，他们会被转化为 `:onUpdate:value="[xxx, yyy]"`，然后 Naive UI 会来处理这种情况。 然而如果你使用了 `on-update:value="yyy"`，Vue 会生成类似于 `:onUpdate:value="xxx" :on-update:value="yyy"` 的代码，然后第二个属性会在运行时覆盖掉第一个，`v-model:value` 会崩掉。 如果你发现任何问题，欢迎在 GitHub 上提交 issue 和 PR。 ## 2. 如何在单文件组件（SFC - Single File Component）中使用？ 详见 [在 SFC 中使用](usage-sfc) ================================================ FILE: demo/pages/docs/community/enUS/index.md ================================================ # Third-Party Libraries Naive UI is a high-quality Vue component library of unified design specifications. We prefer to provide only UI components with a unified specification and visual presentation. So we recommend the following great resources from the community that complement Naive UI. If you want to contribute excellent resources, you can create a pull request of this page in naive-ui's github repo. | Resources | Descriptions | | --- | --- | | [Naive UI Admin](https://github.com/jekip/naive-ui-admin) | A free open source out-of-box UI solution for enterprise applications. | | [Admin Work](https://github.com/qingqingxuan/admin-work) | A free open source, powerful, easy to use, beautiful back-office management system solution. | | [Soybean Admin](https://github.com/honghuangdc/soybean-admin) | A beautiful vue admin template, based on Vue3 + Vite + Naive UI + TypeScript. | | [Rengar Admin](https://github.com/RengarJS/rengar-admin) | A mid-backend management system template based on Vue 3.5 + Vite 7 + TypeScript + Naive UI + Pinia + UnoCSS, which is concise without excessive encapsulation and has simple and easy-to-understand code. | | [GoView](https://github.com/dromara/go-view) | A free open source and powerful yet accessible data visualization tool. | | [Vue Naive Admin](https://github.com/zclzone/vue-naive-admin) | A lightweight backend management template base on Vue3 + Vite4 + Pinia + Unocss + Naive UI. | | [Vue Bag Admin](https://vite.itnavs.com/admin/) | 🎉vue-bag-admin，Using Vite4, Vue3, TypeScript, JavaScript construction, support a variety of writing and call, a complete framework system, responsive background management system | | [Celeris Web](https://github.com/kirklin/celeris-web) | Celeris Web, based on Vue 3 and Vite, is a free and open-source front-end framework with Naive UI components and TypeScript support, featuring a Monorepo structure. It also integrates with OpenAI, providing natural language processing capabilities for modern web development. | | [Nova admin](https://github.com/chansee97/nova-admin) | a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI. It implements complete functionality in a simple way, while also considering code standards, readability, and avoiding excessive encapsulation to facilitate secondary development. | | [chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web) | ChatGPT demo web page built with Express and Vue3 | | [pro-naive-ui](https://github.com/Zheng-Changfu/pro-naive-ui) | Based on Naive UI secondary encapsulation, more functions are extended on the original components | | [vue3-dynamic-form](https://github.com/yayaluoya/vue3-dynamic-form) | A dynamic form designer based on Vue3, Naive UI, to implement a lot of basic controls, can be very convenient to customize the control. | | [astral-3d-editor](https://github.com/mlt131220/Astral3DEditor) | 3D scene building tool based on Vue3 + Naive UI + ThreeJS + Vite5 + Typescript, supporting CAD & BIM analysis, including weather system, particle system, plug-in center... | | [it-tools](https://github.com/CorentinTh/it-tools) | Developed based on Vue3 and the Naive UI component library, it brings together a variety of practical online tools | | [Lithe Admin](https://github.com/tenianon/lithe-admin) | A lightweight and elegant backend management template, built using Vue3 + Naive UI + Vite + TypeScript + Pinia, featuring a Tailwind CSS Color color scheme and a frosted texture design. | ================================================ FILE: demo/pages/docs/community/zhCN/index.md ================================================ # 社区精选资源 Naive UI 是统一设计规范的高质量 Vue 组件库，我们倾向于只提供符合统一规范且带有视觉展现的 UI 组件。所以我们推荐以下社区已有的优秀资源，与 Naive UI 形成互补。 想贡献优秀资源，可直接在项目中 PR 此页面。 | 资源 | 描述 | | --- | --- | | [Naive UI Admin](https://github.com/jekip/naive-ui-admin) | 免费开源的中后台模板 | | [Admin Work](https://github.com/qingqingxuan/admin-work) | 一款免费开源、功能强大、方便易用、漂亮的中后台管理系统模板 | | [Soybean Admin](https://github.com/honghuangdc/soybean-admin) | 一个基于 Vue3 + Vite + Naive UI + TypeScript 的漂亮清爽的中后台模版 | | [Rengar Admin](https://github.com/RengarJS/rengar-admin) | 基于 Vue 3.5 + Vite 7 + TypeScript + Naive UI + Pinia + UnoCSS 的中后台管理系统模板，简洁不过度封装，代码简单易懂 | | [GoView](https://gitee.com/dromara/go-view) | 开源、精美、便捷的「数据可视化」低代码开发平台 | | [Vue Naive Admin](https://github.com/zclzone/vue-naive-admin) | 基于 Vue3 + Vite4 + Pinia + Unocss + Naive UI 的轻量级后台管理模板 | | [Vue Bag Admin](https://vite.itnavs.com/admin/) | 🎉vue-bag-admin，采用Vite4、Vue3、TypeScript、JavaScript构建，支持多种写法和调用，完整的框架体系，响应式中后台管理系统 | | [Celeris Web](https://github.com/kirklin/celeris-web) | 一个基于 Vue 3 和 Vite 的免费开源前端框架，具有 Naive UI 组件和 TypeScript 支持，采用 Monorepo 结构。它还集成了 OpenAI，为现代 Web 开发提供自然语言处理能力。 | | [Nova admin](https://github.com/chansee97/nova-admin) | 一个基于Vue3、Vite5、Typescript、Naive UI, 简洁干净后台管理模板，用简单的方式实现完整功能，并尽可能的考虑代码规范，易读易理解无过度封装，方便二次开发。 | | [chatgpt-web](https://github.com/Chanzhaoyu/chatgpt-web) | 使用 Express 和 Vue3 搭建的 ChatGPT 演示网页 | | [pro-naive-ui](https://github.com/Zheng-Changfu/pro-naive-ui) | 基于 Naive UI 二次封装, 基于原有组件扩展了更多功能 | | [vue3-dynamic-form](https://github.com/yayaluoya/vue3-dynamic-form) | 一个基于 Vue3、Naive UI 的动态表单设计器，实现了很多基础控件，能非常方便的自定义控件。 | | [astral-3d-editor](https://github.com/mlt131220/Astral3DEditor) | 基于 Vue3 + Naive UI + ThreeJS + Vite5 + Typescript 的三维场景构建工具，支持 CAD & BIM 解析，内含天气系统、粒子系统、插件中心... | | [it-tools](https://github.com/CorentinTh/it-tools) | 基于 Vue3 和 Naive UI 组件库开发，汇集了多种实用的在线工具 | | [Lithe Admin](https://github.com/tenianon/lithe-admin) | 一个轻盈而优雅的后台管理模板，基于 Vue3 + Naive UI + Vite + TypeScript + Pinia 构建，采用 Tailwind CSS Color 配色方案和磨砂纹理质感的设计 | | [DVHA Pro](https://github.com/duxweb/dvha) | 一款基于 Vue 3 的无头（Headless）中后台前端开发框架，搭配了 Naive UI 封装了开箱即用的异步能力，同时增加了异步渲染基座模式，无需编译即可集成到任何后端使用。 | ================================================ FILE: demo/pages/docs/controlled-uncontrolled/enUS/index.md ================================================ # Controlled manner & uncontrolled manner A component's manner can be controlled or uncontrolled. Uncontrolled manner means you only listen to its change but not control its value. Controlled manner means you control the component's value. ## Uncontrolled manner In this situation, you don't set ``'s `value` but only listen to its change. Component's value will be controlled by itself. ```html ``` ## Controlled manner In the situation, you listen to component's value & change at the same time. If you don't update `value`, component's value won't be changed. Its value is controlled by you. ```html ``` ### `v-model` A component with `v-model` works in controlled manner, since `v-model` is the same as `:model-value` and `@update:model-value`. ## Uncontrolled manner in naive-ui Different library has different behavior on how to distinguish controlled or uncontrolled manner. In naive-ui, if `value` is `undefined` or not passed, it will be uncontrolled. That is to say, if you set a component's value to `undefined` won't clear it but transform it from controlled manner to uncontrolled manner. If you need to clear it, at most time you can use `null`. ### Not only `value` Any props pair like `xxx` & `@update:xxx` can work both in controlled manner or uncontrolled manner. ================================================ FILE: demo/pages/docs/controlled-uncontrolled/zhCN/index.md ================================================ # 受控模式与非受控模式 一个组件的行为可以分为受控模式和非受控模式两种。非受控模式指的是只监听组件的变化，而不去控制组件的 value，受控模式指的是控制组件的值。 ## 非受控模式 在这种情况下，你不能控制 `` 的 `value`，而只能监听它的变化，组件值的变化由组件自身控制。 ```html ``` ## 受控模式 在这种情况下，你既监听了组件的变化，然后也控制了组件的值。如果你不更新 `value`，那么组件的值不会改变，组件值的变化由你控制。 ```html ``` ### `v-model` `v-model` 控制的组件在受控模式下，因为 `v-model` 等同于 `:model-value` 和 `@update:model-value` 的组合。 ## naive-ui 中的受控模式 不同的组件库区分受控与非受控模式的区别是不同的。在 naive-ui 中，只要 `value` 是 `undefined` 或者根本没有传，那么组件的值会是非受控的。也就是说你将一个组件的值设为 `undefined` 并不能清空它，只会改变它的控制模式。一般情况下清空可以使用 `null`。 ### 不止 `value` 任何 `xxx` 与 `@update:xxx` 的属性对都可以有受控和非受控模式。 ================================================ FILE: demo/pages/docs/customize-theme/enUS/index.md ================================================ # Customizing theme Naive-ui provides `n-config-provider` to customize the theme. By default all of the components are light themed, without any configuration. To learn more about `n-config-provider`, see [Config Provider](../components/config-provider). ## Use dark theme Set `n-config-provider`'s `theme` prop to `darkTheme` imported from naive-ui to set dark theme inside `n-config-provider`. If `theme` is `undefined` it won't affect the theme of components inside. ```html ``` You may need to include `` if you want to apply the dark theme globally, not just to the components. To learn more, see [n-global-style](../docs/customize-theme#Sync-style-of-the-body-element). ## Get theme vars Whether it's the default light theme (`lightTheme`), the modified dark theme (`darkTheme`), or the custom theme we adjusted, you can get theme variables within the scope of the theme using [useThemeVars](./theme#use-theme-vars). ## Customizing theme vars (design tokens) No CSS (Scss, Less) needed. The configured global theme variables will overwrite the theme variables that take effect on descendant components. Set `n-config-provider`'s `theme-overrides` to customize theme vars. Naive-ui exports type `GlobalThemeOverrides` to help you define `theme-overrides`. For available vars please follow the type hint of `GlobalThemeOverrides`. If you want to view more theme variables, you can view them in the edit button at the bottom right corner of the Naive UI homepage. You can modify the corresponding theme variable, you can get the themeOverrides object after export. ```html ``` ## Customizing theme vars in TypeScript If you are using ts to write code, this one is more suitable for you. ```html ``` ## Customizing component theme vars The use of component theme variables is the same as the use of global theme variables, and the component theme variables will override the global theme variables. ```html ``` ## Customizing theme vars under different themes If you want to use different theme variables on light and dark theme at the same time, you can take a look at this. ```html ``` ## Use the peers vars In many cases, another component will be reused inside a component, so the theme variable of peers appears. The theme variables related to peers have not been exposed yet. Use `GlobalThemeOverrides` to view the peers variables of the corresponding component. The specific available peers will be updated later. ```html ``` ## Sync style of the body element For the following reasons, you may need to set some styles on `document.body`. 1. Naive-ui will mount some global style that is unresponsive (to theme, not media query). For example `font-family`. The style works fine by default, however they won't change when theme is changed. 2. `n-config-provider` can't sync global style (for example, body's background color) outside it. You can use `n-global-style` to sync common global style to the body element. In the following example, `n-global-style` will sync the theme provided by `n-config-provider` to `document.body`. ```html ``` ## Theme editor Naive-ui provides a theme editor to help you edit theme and export the corresponding configuration. It can be placed inside `n-config-provider`. The theme editor is not included in global installation (`app.use(naive)`). You need to import it explicitly to use it. ```html ``` ================================================ FILE: demo/pages/docs/customize-theme/zhCN/index.md ================================================ # 调整主题 Naive UI 通过使用 `n-config-provider` 调整主题。 默认情况下所有组件均为亮色主题，无需任何配置。 了解更多关于 `n-config-provider` 的信息，参见 [全局化配置](../components/config-provider)。 ## 使用暗色主题 将 `n-config-provider` 的 `theme` 设为从 naive-ui 导入的 `darkTheme` 来设定暗色主题。 若 `theme` 为 `undefined` 则不会影响内部组件的主题。 ```html ``` 如果你需要给 body 元素也应用 dark theme，而不仅仅是组件，你可能需要使用 ``。更多细节请参考 [n-global-style](../docs/customize-theme#Sync-style-of-the-body-element)。 ## 获取主题变量 无论是默认的亮色主题(`lightTheme`)，还是修改后的暗色主题(`darkTheme`)，亦或我们通过调整得到的自定义主题，在该主题生效范围内的组件中都可以通过 [useThemeVars](./theme#use-theme-vars) 来获取主题变量。 ## 调整主题变量 你不需要写任何 CSS（Scss、Less...）。 配置的全局主题变量会对后代组件生效的主题变量覆盖。 通过设定 `n-config-provider` 的 `theme-overrides` 来调整主题变量。naive-ui 导出了 `GlobalThemeOverrides` 类型帮助你定义主题。 具体可使用变量请参考 `GlobalThemeOverrides` 类型提示。 如果想要查看更多的主题变量，可在 Naive UI 主页的右下角的 edit 按钮查看。 可以修改对应的主题变量，导出后可以拿到 themeOverrides 对象。 ```html ``` ## TS 下使用主题变量 如果你正在使用 ts 写代码，这块比较适合你。 ```html ``` ## 调整组件主题变量 组件主题变量使用方法同全局主题变量使用方法，并且组件主题变量会覆盖全局主题变量。 ```html ``` ## 不同主题下调整主题变量 如果你想要在亮色和暗色上同时使用不同的主题变量，可以来看看这个。 ```html ``` ## 使用 peers 主题变量 很多时候组件内部都会复用另一个组件，因此出现了 peers 的主题变量。 peers 相关的主题变量还没有暴露，使用 `GlobalThemeOverrides` 可以查看对应组件的 peers 变量。 具体哪些可使用的 peers 后续会更新。 ```html ``` ## 同步 body 元素的样式 出于以下原因，你可能需要将某些样式设定在 `document.body` 上。 1. naive-ui 会设定一些非响应式的全局样式（例如字体），它们在默认状况下工作良好，但是不能响应主题的变化。 2. `n-config-provider` 无法将全局样式同步到它以外的地方（例如 body 背景色）。 通过使用 `n-global-style` 可以将常见的全局样式同步到 body 上。在下面的例子中，`n-global-style` 会将 `n-config-provider` 提供的主题同步到 `document.body` 上。 ```html ``` ## 主题编辑器 naive-ui 提供主题编辑器帮助你方便的编辑主题并导出对应配置。它可以被嵌套于 `n-config-provider` 中。 主题编辑器不包含在全局安装中（`app.use(naive)`）。你需要显式引入来使用它。 ```html ``` ================================================ FILE: demo/pages/docs/experimental-features/enUS/index.md ================================================ # Experimental Features The following features are unstable. Use them if you really need and perpare to follow the API changes. ## Use TuSimple Theme ```html ``` ================================================ FILE: demo/pages/docs/experimental-features/zhCN/index.md ================================================ # 试验性特性 下列的所有功能都是不稳定的。只在真的需要的时候再使用他们，API 有可能在未来被改变。 ## 使用图森主题 ```html ``` ================================================ FILE: demo/pages/docs/fonts/enUS/index.md ================================================ # Configuring Fonts Naive UI works with [vfonts](https://github.com/07akioni/vfonts). You can use fonts from `vfonts` easily which includes general fonts and monospace fonts. Just import fonts from in your app's entry file. Then it will work. ```js // entry js file of your app // ... // General Font import 'vfonts/Lato.css' // Monospace Font import 'vfonts/FiraCode.css' // then it works // ... ``` Note: Different fonts from vfonts have different font weights. If you want to use `Lato` or `OpenSans` you need to configure the global font weight of naive-ui. ```html ``` ## Change Global Fonts by Customizing Theme If you don't use `vfont` and want change global fonts by customzing theme, you need to use `n-global-style` to achieve that. Components' font won't be responsive to `theme-overrides` without `n-global-style`. Note: Make `vfont` work without `n-global-style` is a compromised design (I think this is a correct behavior). In the next major version, global reset style won't contain font related style. They'll be all put inside `n-global-style` component. ================================================ FILE: demo/pages/docs/fonts/zhCN/index.md ================================================ # 配置字体 Naive UI 可以和 [vfonts](https://github.com/07akioni/vfonts) 配合，你可以简单的引入 `vfonts` 中的字体，包含常规字体和等宽字体。 只需要在你 App 的入口文件导入字体，即可调整 Naive UI 的字体。 ```js // 你 App 的入口 js 文件 // ... // 通用字体 import 'vfonts/Lato.css' // 等宽字体 import 'vfonts/FiraCode.css' const app = createApp() app.use(naive) // ... ``` 注意：不同 vfonts 字体提供的字重不同，在使用 `Lato`、`OpenSans` 的时候你需要全局调整 naive-ui 的字重配置。 ```html ``` ## 通过定制主题修改全局字体 如果你不打算使用 `vfonts` 并且想要通过主题调整修改其为别的字体，你需要使用 `n-global-style` 来做到这一点。在不使用 `n-global-style` 的情况下组件不会响应 `theme-overrides` 中的字体变更。 题外话：不使用 `n-global-style` 就能让 `vfonts` 直接生效是一个设计上的妥协，在下个大的版本默认的全局 reset 样式将不再带有字体相关的样式，而是全部置于 `n-global-style` 组件中。 ================================================ FILE: demo/pages/docs/i18n/enUS/index.md ================================================ # Internationalization Naive-ui provides `n-config-provider` to customize the internationalization. By default, all components are in English. To learn more about `n-config-provider`, see [Config Provider](../components/config-provider). ## Configure Set `n-config-provider`'s `locale` prop to `enUS` imported from naive-ui to set Chinese theme inside `n-config-provider`. Set `n-config-provider`'s `date-locale` prop to `dateEnUS` imported from naive-ui to set Chinese theme's date inside `n-config-provider`. ```html ``` ## Supported languages PRs are welcomed for locales that are not supported yet! The following list is sorted by 'Config' column. | Language | Config | Date config | Version | | -------------------------- | ------ | ----------- | ------- | | Arabic (العربية) | arDZ | dateArDZ | 2.34.0 | | Azerbaijani (Azərbaycanca) | azAZ | dateAzAZ | 2.39.0 | | Czech (Czechia) | csCZ | dateCsCz | 2.38.2 | | Danish (Denmark) | daDK | dateDaDK | 2.43.0 | | German (Germany) | deDE | dateDeDE | | | English (British) | enGB | dateEnGB | 2.25.1 | | English | enUS | dateEnUS | | | Esperanto | eo | dateEo | 2.25.2 | | Spanish (Argentina) | esAR | dateEsAR | 2.24.2 | | Estonian | etEE | dateEtEE | 2.38.0 | | Persian | faIR | dateFaIR | 2.34.4 | | French | frFR | dateFrFR | | | Bahasa Indonesia | idID | dateIdID | | | Italiano | itIT | dateItIT | 2.24.2 | | Japanese | jaJP | dateJaJP | | | Khmer (Cambodia) | kmKH | dateKmKH | 2.41.0 | | Korean (South Korea) | koKR | dateKoKR | 2.28.1 | | Norwegian Bokmål (Norway) | nbNO | dateNbNO | | | Dutch (Netherlands) | nlNL | dateNlNL | 2.29.0 | | Polish (Poland) | plPL | datePlPL | 2.25.2 | | Portuguese (Brazil) | ptBR | datePtBR | 2.28.1 | | Russian | ruRU | dateRuRU | | | Slovak | skSK | dateSkSK | 2.25.3 | | Swedish | svSE | dateSvSE | 2.35.0 | | Thai (Thailand) | thTH | dateThTH | 2.27.0 | | Turkish | trTR | dateTrTR | 2.34.0 | | Uyghur (China) | ugCN | dateUgCN | | | Ukrainian | ukUA | dateUkUA | | | Uzbek (Uzbekistan) | uzUZ | dateUzUZ | 2.39.0 | | Vietnamese (Vietnam) | viVN | dateViVN | 2.30.7 | | Chinese (Simplified) | zhCN | dateZhCN | | | Chinese (Traditional) | zhTW | dateZhTW | | ## Customize the existing locale You can use `createLocale` to customize the existing locale. ```html ``` ================================================ FILE: demo/pages/docs/i18n/zhCN/index.md ================================================ # 国际化 Naive-ui 通过使用 `n-config-provider` 调整语言，默认情况下所有组件均为英语。 了解更多关于 `n-config-provider` 的信息，参见 [全局化配置](../components/config-provider)。 ## 配置 将 `n-config-provider` 的 `locale` 设为从 naive-ui 导入的 `zhCN` 来设定全局中文。 将 `n-config-provider` 的 `date-locale` 设为从 naive-ui 导入的 `dateZhCN` 来设定全局日期中文。 ```html ``` ## 支持语言 欢迎提交 PR 来支持尚未支持的语言。 以下列表依据“配置”列排序。 | 语言 | 配置 | 日期配置 | 版本 | | ------------------ | ---- | -------- | ------ | | 阿拉伯语 | arDZ | dateArDZ | 2.34.0 | | 阿塞拜疆语 | azAZ | dateAzAZ | 2.39.0 | | 捷克语（捷克） | csCZ | dateCsCz | 2.38.2 | | 丹麦 | daDK | dateDaDK | 2.43.0 | | 德语 | deDE | dateDeDE | | | 英国英语 | enGB | dateEnGB | 2.25.1 | | 英语 | enUS | dateEnUS | | | 世界语 | eo | dateEo | 2.25.2 | | 西班牙语（阿根廷） | esAR | dateEsAR | 2.24.2 | | 爱沙尼亚语 | etEE | dateEtEE | 2.38.0 | | 波斯语 | faIR | dateFaIR | 2.34.4 | | 法语 | frFR | dateFrFR | | | 印度尼西亚语 | idID | dateIdID | | | 意大利语 | itIT | dateItIT | 2.24.2 | | 日语 | jaJP | dateJaJP | | | 高棉语（柬埔寨） | kmKH | dateKmKH | 2.41.0 | | 韩语 | koKR | dateKoKR | 2.28.1 | | 书面挪威语 | nbNO | dateNbNO | | | 荷兰语（荷兰） | nlNL | dateNlNL | 2.29.0 | | 波兰语（波兰） | plPL | datePlPL | 2.25.2 | | 葡萄牙语 (巴西) | ptBR | datePtBR | 2.28.1 | | 俄罗斯语 | ruRU | dateRuRU | | | 斯洛伐克语 | skSK | dateSkSK | 2.25.3 | | 瑞典語 | svSE | dateSvSE | 2.35.0 | | 泰语（泰国） | thTH | dateThTH | 2.27.0 | | 土耳其语 | trTR | dateTrTR | 2.34.0 | | 维吾尔语 | ugCN | dateUgCN | 2.41.0 | | 乌克兰语 | ukUA | dateUkUA | | | 乌兹别克语 | uzUZ | dateUzUZ | 2.39.0 | | 越南语（越南） | viVN | dateViVN | 2.30.7 | | 简体中文 | zhCN | dateZhCN | | | 繁体中文 | zhTW | dateZhTW | | ## 在现有国际化基础上调整 你可以使用 `createLocale` 在现有国际化基础上调整。 ```html ``` ================================================ FILE: demo/pages/docs/import-on-demand/enUS/index.md ================================================ # Import on Demand (Tree Shaking) Naive UI supports tree shaking for components, locales and themes. By default the component theme is light, locale is enUS, and no extra imports are needed. For more info about theming, see [Customizing Theme](customize-theme). ## Import Directly ```html ``` ## Auto Import You can use the `unplugin-auto-import` plugin to automatically import APIs. If you develop using SFC, you can use the `unplugin-vue-components` plugin to automatically import components on demand.The plugin will automatically parse the components used in the template and import the components. ```ts import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/vite' // vite.config.ts import { defineConfig } from 'vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ imports: [ 'vue', { 'naive-ui': [ 'useDialog', 'useMessage', 'useNotification', 'useLoadingBar' ] } ] }), Components({ resolvers: [NaiveUiResolver()] }) ] }) ``` ## Install on Demand Globally ```js import { // create naive ui create, // component NButton } from 'naive-ui' import { createApp } from 'vue' const naive = create({ components: [NButton] }) const app = createApp() app.use(naive) ``` After the installation, you can use the components you installed in SFC like this. ```html ``` ================================================ FILE: demo/pages/docs/import-on-demand/zhCN/index.md ================================================ # 按需引入（Tree Shaking） Naive UI 支持 tree shaking，组件、语言、主题均可 tree-shaking。 默认情况组件主题为亮色，语言为英文，无需额外导入。 了解更多关于主题设定的信息，参见[调整主题](customize-theme)。 ## 手动引入 ```html ``` ## 自动引入 可以使用 `unplugin-auto-import` 插件来自动导入 API。 如果使用模板方式进行开发，可以使用 `unplugin-vue-components` 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件。 ```ts import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/vite' // vite.config.ts import { defineConfig } from 'vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ imports: [ 'vue', { 'naive-ui': [ 'useDialog', 'useMessage', 'useNotification', 'useLoadingBar' ] } ] }), Components({ resolvers: [NaiveUiResolver()] }) ] }) ``` ## 按需全局安装组件（手动） ```js import { // create naive ui create, // component NButton } from 'naive-ui' import { createApp } from 'vue' const naive = create({ components: [NButton] }) const app = createApp() app.use(naive) ``` 安装后，你可以这样在 SFC 中使用你安装的组件。 ```html ``` ================================================ FILE: demo/pages/docs/installation/enUS/index.md ================================================ # Installation > Please note that naive-ui only supports Vue3. If you are using Vue2, you may look at other libraries. ## npm Use npm to install. ```bash npm i -D naive-ui ``` ## UMD Please refer to [Using UMD](umd). ## Fonts ```bash npm i -D vfonts ``` ## Icons naive-ui recommends using [xicons](https://www.xicons.org) as icon library. ## Design Resources ```component ArrowDownload16Regular: import ArrowDownload16Regular from '@vicons/fluent/ArrowDownload16Regular' ``` ================================================ FILE: demo/pages/docs/installation/zhCN/index.md ================================================ # 安装 > 注意，naive-ui 仅支持 Vue3。如果你在使用 Vue2，可以去看看别的库。 ## npm 使用 npm 安装。 ```bash npm i -D naive-ui ``` ## UMD 参考 [使用 UMD](umd)。 ## 字体 ```bash npm i -D vfonts ``` ## 图标 naive-ui 建议使用 [xicons](https://www.xicons.org) 作为图标库。 ## 设计资源 ```component ArrowDownload16Regular: import ArrowDownload16Regular from '@vicons/fluent/ArrowDownload16Regular' ``` ================================================ FILE: demo/pages/docs/introduction/enUS/index.md ================================================ # Naive UI Naive UI is a Vue 3 component library. To know how to install it, see [Installation](installation). It is fairly complete, themeable, written in typescript, not too slow. ## Fairly Complete There are more than 90 components. Hope they can help you write less code. What's more, they are all treeshakable. ## Theme Customizable We provide an advanced type safe theme system that is built with typescript. All you need is to provide a theme overrides object in JS. Then all the stuffs will be done by us. What's more, no less/sass/css variables, no webpack loaders are required. And you can try the theme editor on the bottom right of the page. ## Uses TypeScript All the stuff in Naive UI is written in TypeScript. It can work with your typescript project seamlessly. What's more, you don't need to import any CSS to use the components. ## Fast I try to make it not rather slow. At least select, tree, transfer, table and cascader work with virtual list. What's more, ..., no more. Just enjoy it. ## Community - [Discord](https://discord.gg/Pqv7Mev5Dd) - 钉钉一群 33482509 (已满) - 钉钉二群 35886835 (已满) - 钉钉三群 32377370 (已满) - 钉钉四群 8165002788 (已满) - 钉钉五群 31205022250 (已满) - 钉钉六群 62720001971 (已满) - 钉钉七群 172000005810 ## Contributing Please see [CONTRIBUTING.md](https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md). ## License Naive UI is licensed under the [MIT license](https://opensource.org/licenses/MIT). ================================================ FILE: demo/pages/docs/introduction/zhCN/index.md ================================================ # Naive UI Naive UI 是一个 Vue3 的组件库。 要了解如何安装，参见[安装](installation)。 它比较完整，主题可调，用 TypeScript 写的，快。 ## 比较完整 有超过 90 个组件，希望能帮你少写点代码。 顺便一提，它们全都可以 treeshaking。 ## 主题可调 我们提供了一个使用 TypeScript 构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象，剩下的都交给我们。 顺便一提，不用 less、sass、css 变量，也不用 webpack 的 loaders。以及你可以试试右下角的主题编辑器。 ## 使用 TypeScript Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。 顺便一提，你不需要导入任何 CSS 就能让组件正常工作。 ## 快 我尽力让它不要太慢。至少 select、tree、transfer、table、cascader 都可以用虚拟列表。 顺便一提，...，没有顺便了。祝你使用愉快。 ## 社区 - [Discord](https://discord.gg/Pqv7Mev5Dd) - 钉钉一群 33482509 (已满) - 钉钉二群 35886835 (已满) - 钉钉三群 32377370 (已满) - 钉钉四群 8165002788 (已满) - 钉钉五群 31205022250 (已满) - 钉钉六群 62720001971 (已满) - 钉钉七群 172000005810 ## 贡献 请参考 [CONTRIBUTING.md](https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md)。 ## 许可 Naive UI 使用 [MIT license](https://opensource.org/licenses/MIT) 许可证书。 ================================================ FILE: demo/pages/docs/jsx/enUS/index.md ================================================ # JSX & TSX ## Enable JSX & TSX For how to enable JSX & TSX, please look at your toolchain's docs. ## Use Component We recommend importing components directly when using JSX. ```js import { NButton } from 'naive-ui' import { defineComponent } from 'vue' export default defineComponent({ render() { return {{ default: () => 'Star Kirby' }} } }) ``` ## Props look like @update:\* In naive-ui, all props look like `on-update:*` has a corresponding `onUpdate*` prop (since in JSX `on-update:*` and `onUpdate:*` are not valid prop names). If you find it doesn't exist, I must have forgotten to make it. Please create an issue or PR. For example, `` in template can be written in ``. ================================================ FILE: demo/pages/docs/jsx/zhCN/index.md ================================================ # JSX & TSX ## 启用 JSX & TSX 关于启用 JSX 和 TSX，请参考你使用的工具链的相关文档。 ## 使用组件 在 JSX 中，推荐以直接引入的形式使用组件。 ```js import { NButton } from 'naive-ui' import { defineComponent } from 'vue' export default defineComponent({ render() { return {{ default: () => 'Star Kirby' }} } }) ``` ## 形如 @update:\* 的 prop naive-ui 中，所有形如 `on-update:*` 的 prop 都有一个对应的 `onUpdate*` 属性可供使用（由于 JSX 自身的规定，`on-update:*` 和 `onUpdate:*` 不是合法的 prop 名称）。 如果你发现没有，那一定是我忘了写了，请提交一个 Issue 或者 PR。 例如，在模板中 `` 在 JSX 中可以写为 ``。 ================================================ FILE: demo/pages/docs/nuxtjs/enUS/index.md ================================================ # Nuxt.js ## Caveat This document pertains to SSR (Server-Side Rendering). Please familiarize yourself with the [SSR Caveats](ssr#Caveat) before proceeding. ## Nuxt.js Demo You can refer to [example](https://github.com/07akioni/naive-ui-nuxt-demo). ## Using Nuxt Module This is the same approach which previous demo uses. Install the [module](https://github.com/07akioni/nuxtjs-naive-ui) to your Nuxt application with one command: ```bash # npm npx nuxi module add nuxtjs-naive-ui # pnpm pnpm dlx nuxi module add nuxtjs-naive-ui ``` ## Using Auto Import in Nuxt You can also use the `unplugin-auto-import` plugin to automatically import APIs and the `unplugin-vue-components` plugin to automatically import components on demand. In this case, the `nuxt.config.ts` file will have a few additional configuration lines compared to the example above. ```ts import AutoImport from 'unplugin-auto-import/vite' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/vite' // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: ['nuxtjs-naive-ui'], vite: { plugins: [ AutoImport({ imports: [ { 'naive-ui': [ 'useDialog', 'useMessage', 'useNotification', 'useLoadingBar' ] } ] }), Components({ resolvers: [NaiveUiResolver()] }) ] } }) ``` ================================================ FILE: demo/pages/docs/nuxtjs/zhCN/index.md ================================================ # Nuxt.js ## 注意 本文档涉及到 SSR，请先了解[SSR 的注意事项](ssr#注意)。 ## Nuxt.js 示例 参考[例子](https://github.com/07akioni/naive-ui-nuxt-demo)。 ## 使用 Nuxt Module 这和上一个示例使用的是同样的方式。 在你的 Nuxt 应用中使用下列命令安装此[模块](https://github.com/07akioni/nuxtjs-naive-ui)： ```bash # npm npx nuxi module add nuxtjs-naive-ui # pnpm pnpm dlx nuxi module add nuxtjs-naive-ui ``` ## 在 Nuxt 中使用自动引入 同样可以使用 `unplugin-auto-import` 插件来自动导入 API，使用 `unplugin-vue-components` 插件来按需自动加载组件。在这种情况下，`nuxt.config.ts` 会比上面的例子多几行配置。 ```ts import AutoImport from 'unplugin-auto-import/vite' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/vite' // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: ['nuxtjs-naive-ui'], vite: { plugins: [ AutoImport({ imports: [ { 'naive-ui': [ 'useDialog', 'useMessage', 'useNotification', 'useLoadingBar' ] } ] }), Components({ resolvers: [NaiveUiResolver()] }) ] } }) ``` ================================================ FILE: demo/pages/docs/ssr/enUS/index.md ================================================ # Server-Sider Rendering Since naive-ui is using CSS in JS, in SSR mode it needs some extra configuration. ## Caveat When using SSR under any framework, it is essential to ensure that the project meets the following conditions: 1. During the build process, any direct or indirect references to the `@css-render/*` and `css-render` packages must have a version of `>=0.15.14`. 2. During the build process, each direct or indirect reference to any `@css-render/*` and `css-render` package should ultimately point to a single target (a package should not have multiple versions or multiple copies of the same version). You can search for `css-render` in the lock file to check for duplicate packages. Failure to meet these conditions may result in SSR build failures. If you encounter issues due to this, you can resolve the problem by directing all related packages to the same version using the `resolution` field in the `package.json` file. ## Nuxt.js See [Nuxt.js](nuxtjs). ## Vitepress See [Vitepress](vitepress). ## Vite SSG/SSE See [Vite SSG/SSE](vite-ssge). ## Vite Example If you are using Vite, please see [example](https://github.com/07akioni/naive-ui-vite-ssr). ## Webpack Example If you are using Webpack, please see [example](https://github.com/tusen-ai/naive-ui/tree/main/playground/ssr). ## Inline Style Optimization By default, naive-ui bind inline theme style on components, it may increase SSR rendered HTML size. You may use `inline-theme-disabled` prop on `n-config-provider` to disable it. For pros & cons see `n-config-provider`'s doc. ## Known Issues The following components has some bugs in SSR scene, please avoid using them if possible. We will fix them gradually. - `n-scrollbar`, `n-data-table` (It works after vue >= 3.2.36) - `n-anchor` - `n-avatar-group` - `n-watermark` - `n-affix` - `n-transfer` ================================================ FILE: demo/pages/docs/ssr/zhCN/index.md ================================================ # 服务端渲染 Server-Sider Rendering 由于 naive-ui 在使用 CSS in JS，在 SSR 的情况下需要一些额外的配置。 ## 注意 无论在任何框架下使用 SSR，需要确保项目满足以下条件： 1. 构建时，任何被直接和间接引用的 `@css-render/*` 和 `css-render` 包版本都 `>=0.15.14` 2. 构建时，任何被直接和间接引用的每个 `@css-render/*` 和 `css-render` 包最终只都指向一个目标（一个包不会有多个版本，也不会有同一个版本的多个副本） 你可以在 lock file 中搜索 `css-render` 去检查是否有重复的包。 如果上述条件没有满足，可能会导致 SSR 构建失败。 如果因为这个原因遇到问题，你可以通过 `package.json` 中的 `resolution` 字段来让所有相关包指向同一个版本来解决问题。 ## Nuxt.js 参考 [Nuxt.js](nuxtjs)。 ## Vitepress 参考 [Vitepress](vitepress)。 ## Vite SSG/SSE 参考 [Vite SSG/SSE](vite-ssge)。 ## Vite 示例 如果你是用的是 Vite，请参考[例子](https://github.com/07akioni/naive-ui-vite-ssr)。 ## Webpack 示例 如果你使用的是 Webpack，请参考[例子](https://github.com/tusen-ai/naive-ui/tree/main/playground/ssr)。 ## 内联样式优化 默认情况下，naive-ui 会在组件上绑定 inline 主题样式，这可能会影响 SSR 的尺寸。你可以使用 `n-config-provider` 的 `inline-theme-disabled` 属性来优化，详细的优劣请参考 `n-config-provider` 的文档。 ## 已知问题 下列组件在 SSR 场景中存在一些 Bug，使用时请尽量规避，我们会逐步修复。 - `n-scrollbar`, `n-data-table`（vue 版本 >= 3.2.36 后没有问题) - `n-anchor` - `n-avatar-group` - `n-watermark` - `n-affix` - `n-transfer` ================================================ FILE: demo/pages/docs/style-conflict/enUS/index.md ================================================ # Potential Style Conflict ## Style Element Position Sometimes you want to control where the style element should be inserted. For example. If you have a tailwind reset style, you don't want it to be inserted after naive-ui's style. Since it may override button's style, etc. You can create a `` element inside `head` element, then naive-ui's style will be inserted right before it. Also, naive-ui uses [vueuc](https://github.com/07akioni/vueuc). If you need, its style can be controlled by `` (generally it's not needed). ```html ``` ## About Tailwind's Preflight Style Override You may find adding a meta tag to your static html files doesn't work (naive's style would still be overriden), since your toolchain may always insert tailwind's style at the end of the head tag. In this situation, you need to insert the meta tag dynamically right before the app is mounted. ```ts const meta = document.createElement('meta') meta.name = 'naive-ui-style' document.head.appendChild(meta) vueApp.mount('#app') ``` ## Disable Preflight Style (CSS Reset) To make naive-ui work for most users out of box, mounting any component of naive would create global preflight style. However it may not be expected. If you want to disable it, using `n-config-provider` like this. ```html ``` ================================================ FILE: demo/pages/docs/style-conflict/zhCN/index.md ================================================ # 潜在的样式冲突 ## 样式元素的位置 有时你可能希望控制样式元素插入的位置。 例如，如果你使用了 tailwind 的 reset 样式，你不希望它被插入 naive-ui 样式的后面，因为这可能会覆盖按钮等组件的样式。 你可以在 `head` 元素中加入一个 `` 元素，naive-ui 会把所有的样式刚好插入这个元素的前面。 同时，naive-ui 依赖 [vueuc](https://github.com/07akioni/vueuc)。如果你需要（通常应该不会），它的样式位置可以通过 `` 控制。 ```html ``` ## 关于 tailwind 的 preflight 样式 你可能会发现在静态 HTML 文件中加入 meta 标签没用（naive 的样式仍然可能被覆盖），因为你的工具链可能永远会把 tailwind 的样式插入 head 的尾部。这种情况下，你需要在 app 挂载之前动态的插入 meta 标签。 ```ts const meta = document.createElement('meta') meta.name = 'naive-ui-style' document.head.appendChild(meta) vueApp.mount('#app') ``` ## 禁用 preflight 样式 为了让多数用户直接无配置的使用 naive-ui，挂载任何一个组件都会创建全局的 CSS 样式。但是这样可能不是期望的行为，你可以使用 `n-config-provider` 来禁用这个行为。 ```html ``` ================================================ FILE: demo/pages/docs/supported-platforms/enUS/index.md ================================================ # Supported Platforms ## Browsers IE is not supported. Modern browsers such as `Edge`, `Firefox`, `Chrome`, `Safari` are tested on the latest 2 versions. No strict tests are being implemented on other versions due to the constraint of development resources, but naive-ui is expected to work on those browsers whose version is not too old (eg. in 2 years). If you find any problems please feel free to create an issue. ## Vue Only Vue 3 (>3.0.5) is supported. ## TypeScript Requires version > 4.1. ================================================ FILE: demo/pages/docs/supported-platforms/zhCN/index.md ================================================ # 支持的平台 ## 浏览器 不支持 IE 浏览器。 `Edge`、`Firefox`、`Chrome`、`Safari` 等现代浏览器的最新的 2 个版本确保会被支持。 对于这些浏览器的其他版本中，由于开发资源的限制并没有做过严格的测试。但是我们预期 naive-ui 应该在这些浏览器不算太老的版本上能正常的运行（比如 2 年之内的版本）。如果你发现了任何问题欢迎来提 issue。 ## Vue 只支持 Vue 3（>3.0.5）。 ## TypeScript 需要版本 > 4.1。 ================================================ FILE: demo/pages/docs/theme/enUS/element.demo.vue ================================================ # Use Naive Element Naive UI has `n-element` component. See [Element](../components/element). ================================================ FILE: demo/pages/docs/theme/enUS/index.demo-entry.md ================================================ # Create Themed Component You may not want to use only the provided components and want to write themed components. Naive UI provides some tools for developers to create themed components easier. ## Demos ```demo provide-theme.vue element.vue use-theme-vars.vue ``` ================================================ FILE: demo/pages/docs/theme/enUS/provide-theme.demo.vue ================================================ # Provide Theme Use `n-config-provider` to set the theme of all its descendant components. ================================================ FILE: demo/pages/docs/theme/enUS/use-theme-vars.demo.vue ================================================ # useThemeVars Naive UI provides `useThemeVars`. It contains common theme variables. ================================================ FILE: demo/pages/docs/theme/zhCN/element.demo.vue ================================================ # 使用元素组件 Naive UI 提供 `n-element` 组件，参考 [Element](../components/element)。 ================================================ FILE: demo/pages/docs/theme/zhCN/index.demo-entry.md ================================================ # 创建适配主题的组件 你可能觉得只用内置的组件不够爽，想自己也写适配主题的组件。 Naive UI 提供一些工具帮助开发者简单的创建支持主题的组件。 ## 演示 ```demo provide-theme.vue element.vue use-theme-vars.vue ``` ================================================ FILE: demo/pages/docs/theme/zhCN/provide-theme.demo.vue ================================================ # 提供主题 使用 `n-config-provider` 来设定它全部的后代组件主题。 ================================================ FILE: demo/pages/docs/theme/zhCN/use-theme-vars.demo.vue ================================================ # useThemeVars Naive UI 提供 `useThemeVars`，它包含了常见的主题变量。 ================================================ FILE: demo/pages/docs/umd/enUS/index.md ================================================ # Using UMD There is a self-closing bug in UMD version of naive. Please close tags explicitly like <n-input></n-input>. After version `2.30.3`, you can use UMD version of naive. If you want to use a minified version of naive, use `https://unpkg.com/naive-ui@version/dist/index.prod.js` as `src`. `version` is the version of naive-ui you want to use. If you don't specify a version, latest version would be used. It's preferable to link to a specific version of the package, as always relying on the latest version may lead to breaking changes. Here's a basic [demo](https://jsbin.com/saxubitaki/1/edit?html,output): ```html
{{ message }}
``` ================================================ FILE: demo/pages/docs/umd/zhCN/index.md ================================================ # 使用 UMD 目前 UMD 版本的 naive 标签自闭合存在问题。请显式进行标签闭合。如：<n-input></n-input>。 在 `2.30.3` 版本后，你可以使用 UMD 版本的 naive。 如果你要使用 minify 版本的包，将 `https://unpkg.com/naive-ui@version/dist/index.prod.js` 作为 `src`，`version` 是你期望使用的版本，如果不指定 `version` 则会使用最新的版本。 你最好锁定包的版本，不然可能会有不兼容变更。 下面是个基本 [demo](https://jsbin.com/saxubitaki/1/edit?html,output)： ```html
{{ message }}
``` ================================================ FILE: demo/pages/docs/usage-sfc/enUS/index.md ================================================ # Usage in SFC If you want to use the Single File Component(SFC) style, you can directly import components from Naive UI or install it globally to a Vue app. ## Import Directly (Recommended) You can import a component directly and use it. In this form, only components imported will be bundled. If you want to know how to import themes and locales, please see [Import on Demand](import-on-demand). ```html ``` If you can use vue setup script, you can use it like this. ```html ``` ## Install Globally (Not Recommended) ### Install All Components No tree-shaking. Bundle will have redundant codes. If you want to install globally but don't want all components, please see [Import on Demand](import-on-demand). ```js import naive from 'naive-ui' import { createApp } from 'vue' const app = createApp(App) app.use(naive) ``` After the installation, you can use all the components in your SFC like this. ```html ``` ### Volar support (2.24.2) If you are using Volar, you can specify global component types by configuring `compilerOptions.types` in `tsconfig.json`. ```json // tsconfig.json { "compilerOptions": { // ... "types": ["naive-ui/volar"] } } ``` ================================================ FILE: demo/pages/docs/usage-sfc/zhCN/index.md ================================================ # 在 SFC 中使用 如果你想使用单文件组件风格（SFC - Single File Component），可以选择直接引入或全局安装在 Vue App 中。 ## 直接引入（推荐） 你可以直接导入组件并使用它。这种情况下，只有导入的组件才会被打包。 如果你想知道如何按需引入主题和语言包，请参考[按需引入](import-on-demand)。 ```html ``` 如果你可以使用 setup script，你可以用下面的方式使用组件。 ```html ``` ## 全局安装（不推荐） ### 安装全部组件 失去 tree-shaking 的能力，打包有冗余代码。 如果你想全局安装但是不想安装全部组件，请参考[按需引入](import-on-demand)。 ```js import naive from 'naive-ui' import { createApp } from 'vue' const app = createApp(App) app.use(naive) ``` 安装后，你可以这样在 SFC 中使用全部组件。 ```html ``` ### Volar 支持（2.24.2） 如果你在使用 Volar，那么可以在 `tsconfig.json` 中配置 `compilerOptions.types` 来指定全局组件类型。 ```json // tsconfig.json { "compilerOptions": { // ... "types": ["naive-ui/volar"] } } ``` ================================================ FILE: demo/pages/docs/vite-ssge/enUS/index.md ================================================ # Vite SSG/SSE ## Caveat This document pertains to SSR (Server-Side Rendering). Please familiarize yourself with the [SSR Caveats](ssr#Caveat) before proceeding. ## Setup Guide If you are using `vite-sse` or `vite-ssg`. Follow the following steps to setup `naive-ui`. ### 1. Install `naive-ui`, `@css-render/vue3-ssr` ```bash # pnpm pnpm i naive-ui @css-render/vue3-ssr # npm npm i naive-ui @css-render/vue3-ssr ``` ### 2. Modify `vite.config.ts` Add following content. If there exists content already, merge them. ```ts import { setup } from '@css-render/vue3-ssr' defineConfig({ ssr: { noExternal: ['naive-ui', 'vueuc', 'date-fns'] }, ssgOptions: { async onBeforePageRender(_, __, appCtx) { const { collect } = setup(appCtx.app) ;(appCtx as any).__collectStyle = collect return undefined }, async onPageRendered(_, renderedHTML, appCtx) { return renderedHTML.replace( /<\/head>/, `${(appCtx as any).__collectStyle()}` ) } } }) ``` Then you can using naive-ui in `vite-ssg` or `vite-sse` project. ================================================ FILE: demo/pages/docs/vite-ssge/zhCN/index.md ================================================ # Vite SSG/SSE ## 注意 本文档涉及到 SSR，请先了解[SSR 的注意事项](ssr#注意)。 ## 配置指南 如果你正在使用 `vite-sse` 或者 `vite-ssg`，通过下面的步骤设定 `naive-ui`。 ### 1. 安装 `naive-ui`、`@css-render/vue3-ssr` ```bash # pnpm pnpm i naive-ui @css-render/vue3-ssr # npm npm i naive-ui @css-render/vue3-ssr ``` ### 2. 修改 `vite.config.ts` 增加下列内容，如果已经存在一些内容，则合并他们。 ```ts import { setup } from '@css-render/vue3-ssr' defineConfig({ ssr: { noExternal: ['naive-ui', 'vueuc', 'date-fns'] }, ssgOptions: { async onBeforePageRender(_, __, appCtx) { const { collect } = setup(appCtx.app) ;(appCtx as any).__collectStyle = collect return undefined }, async onPageRendered(_, renderedHTML, appCtx) { return renderedHTML.replace( /<\/head>/, `${(appCtx as any).__collectStyle()}` ) } } }) ``` 现在你可以在 `vite-ssg` 或 `vite-sse` 项目中使用 `naive-ui` 了。 ================================================ FILE: demo/pages/docs/vitepress/enUS/index.md ================================================ # Vitepress ## Caveat This document pertains to SSR (Server-Side Rendering). Please familiarize yourself with the [SSR Caveats](ssr#Caveat) before proceeding. ## Example This is a [demo](https://github.com/07akioni/naive-ui-vitepress-demo) for using `naive-ui` in `vitepress` with SSR enabled. You can directly use the demo. ## Key process from scratch If you want to build your own demo from scratch, follow the next steps: ### 0. Install `@css-render/vue3-ssr` Make sure its version `>=0.15.14`. ```bash # npm npm install --save-dev @css-render/vue3-ssr # pnpm pnpm install --save-dev @css-render/vue3-ssr ``` ### 1. Add this content to `.vitepress/theme/index.js` ```js // .vitepress/theme/index.js import { setup } from '@css-render/vue3-ssr' import { NConfigProvider } from 'naive-ui' import { useRoute } from 'vitepress' import DefaultTheme from 'vitepress/theme' import { defineComponent, h, inject } from 'vue' const { Layout } = DefaultTheme const CssRenderStyle = defineComponent({ setup() { const collect = inject('css-render-collect') return { style: collect() } }, render() { return h('css-render-style', { innerHTML: this.style }) } }) const VitepressPath = defineComponent({ setup() { const route = useRoute() return () => { return h('vitepress-path', null, [route.path]) } } }) const NaiveUIProvider = defineComponent({ render() { return h( NConfigProvider, { abstract: true, inlineThemeDisabled: true }, { default: () => [ h(Layout, null, { default: this.$slots.default?.() }), import.meta.env.SSR ? [h(CssRenderStyle), h(VitepressPath)] : null ] } ) } }) export default { extends: DefaultTheme, Layout: NaiveUIProvider, enhanceApp: ({ app }) => { if (import.meta.env.SSR) { const { collect } = setup(app) app.provide('css-render-collect', collect) } } } ``` ### 2. Add this content to `.vitepress/config.mts` ```ts import { defineConfig } from 'vitepress' const fileAndStyles: Record = {} export default defineConfig({ // ... vite: { ssr: { noExternal: ['naive-ui', 'date-fns', 'vueuc'] } }, postRender(context) { const styleRegex = /((.|\s)+)<\/css-render-style>/ const vitepressPathRegex = /(.+)<\/vitepress-path>/ const style = styleRegex.exec(context.content)?.[1] const vitepressPath = vitepressPathRegex.exec(context.content)?.[1] if (vitepressPath && style) { fileAndStyles[vitepressPath] = style } context.content = context.content.replace(styleRegex, '') context.content = context.content.replace(vitepressPathRegex, '') }, transformHtml(code, id) { const html = id.split('/').pop() if (!html) return const style = fileAndStyles[`/${html}`] if (style) { return code.replace(/<\/head>/, `${style}`) } } }) ``` ### 3. Start using naive-ui in your markdown file ```md ... Hello World ... ``` ================================================ FILE: demo/pages/docs/vitepress/zhCN/index.md ================================================ # Vitepress ## 注意 本文档涉及到 SSR，请先了解[SSR 的注意事项](ssr#注意)。 ## 例子 这是一个使用 `naive-ui`、`vitepress` 的[样例](https://github.com/07akioni/naive-ui-vitepress-demo)，支持 SSR。 你可以直接使用这个样例。 ## 从零开始的关键步骤 如果你希望从头开始改造一个 vitepress 项目，遵循下列步骤 ### 0. 安装 `@css-render/vue3-ssr` 确保其版本 `>=0.15.14`。 ```bash # npm npm install --save-dev @css-render/vue3-ssr # pnpm pnpm install --save-dev @css-render/vue3-ssr ``` ### 1. 把下面的内容增加到 `.vitepress/theme/index.js` ```js // .vitepress/theme/index.js import { setup } from '@css-render/vue3-ssr' import { NConfigProvider } from 'naive-ui' import { useRoute } from 'vitepress' import DefaultTheme from 'vitepress/theme' import { defineComponent, h, inject } from 'vue' const { Layout } = DefaultTheme const CssRenderStyle = defineComponent({ setup() { const collect = inject('css-render-collect') return { style: collect() } }, render() { return h('css-render-style', { innerHTML: this.style }) } }) const VitepressPath = defineComponent({ setup() { const route = useRoute() return () => { return h('vitepress-path', null, [route.path]) } } }) const NaiveUIProvider = defineComponent({ render() { return h( NConfigProvider, { abstract: true, inlineThemeDisabled: true }, { default: () => [ h(Layout, null, { default: this.$slots.default?.() }), import.meta.env.SSR ? [h(CssRenderStyle), h(VitepressPath)] : null ] } ) } }) export default { extends: DefaultTheme, Layout: NaiveUIProvider, enhanceApp: ({ app }) => { if (import.meta.env.SSR) { const { collect } = setup(app) app.provide('css-render-collect', collect) } } } ``` ### 2. 把下面的内容增加到 `.vitepress/config.mts` ```ts import { defineConfig } from 'vitepress' const fileAndStyles: Record = {} export default defineConfig({ // ... vite: { ssr: { noExternal: ['naive-ui', 'date-fns', 'vueuc'] } }, postRender(context) { const styleRegex = /((.|\s)+)<\/css-render-style>/ const vitepressPathRegex = /(.+)<\/vitepress-path>/ const style = styleRegex.exec(context.content)?.[1] const vitepressPath = vitepressPathRegex.exec(context.content)?.[1] if (vitepressPath && style) { fileAndStyles[vitepressPath] = style } context.content = context.content.replace(styleRegex, '') context.content = context.content.replace(vitepressPathRegex, '') }, transformHtml(code, id) { const html = id.split('/').pop() if (!html) return const style = fileAndStyles[`/${html}`] if (style) { return code.replace(/<\/head>/, `${style}`) } } }) ``` ### 3. 在 markdown 文件中开始使用 naive-ui ```md ... Hello World ... ``` ================================================ FILE: demo/pages/docs/vue3/enUS/index.vue ================================================ ================================================ FILE: demo/pages/docs/vue3/zhCN/index.vue ================================================ ================================================ FILE: demo/pages/home/Footer.vue ================================================ ================================================ FILE: demo/pages/home/Left.vue ================================================ ================================================ FILE: demo/pages/home/Right.vue ================================================ ================================================ FILE: demo/pages/home/index.vue ================================================ ================================================ FILE: demo/routes/router.js ================================================ import { nextTick } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import { useLocaleName } from '../store' export const loadingBarApiRef = {} export default function createDemoRouter(app, routes) { const router = createRouter({ history: createWebHistory(), routes }) router.beforeEach((to, from, next) => { if (!from || to.path !== from.path) { if (loadingBarApiRef.value) { loadingBarApiRef.value.start() } } next() }) router.afterEach((to, from) => { if (!from || to.path !== from.path) { if (loadingBarApiRef.value) { loadingBarApiRef.value.finish() } if (to.hash && to.hash !== from.hash) { nextTick(() => { const el = document.querySelector(to.hash) if (el) el.scrollIntoView() }) } nextTick(() => { const h1s = document.getElementsByTagName('h1') if (to.name !== 'home' && h1s.length !== 0) { document.title = `${h1s[0].textContent} - Naive UI` } else { // defined in index.html window.deriveTitleFromLocale(useLocaleName().value) } }) } }) return router } ================================================ FILE: demo/routes/routes.js ================================================ export const enDocRoutes = [ // basic docs { path: 'introduction', component: () => import('../pages/docs/introduction/enUS/index.md') }, { path: 'installation', component: () => import('../pages/docs/installation/enUS/index.md') }, { path: 'usage-sfc', component: () => import('../pages/docs/usage-sfc/enUS/index.md') }, { path: 'supported-platforms', component: () => import('../pages/docs/supported-platforms/enUS/index.md') }, // { // path: 'from-v1', // component: () => import('../pages/docs/vue3/enUS/index.vue') // }, // { // path: 'experimental-features', // component: () => import('../pages/docs/experimental-features/enUS/index.md') // }, { path: 'customize-theme', component: () => import('../pages/docs/customize-theme/enUS/index.md') }, { path: 'community', component: () => import('../pages/docs/community/enUS/index.md') }, { path: 'i18n', component: () => import('../pages/docs/i18n/enUS/index.md') }, { path: 'changelog', component: () => import('../pages/docs/changelog/enUS/index.vue') }, { path: 'theme', component: () => import('../pages/docs/theme/enUS/index.demo-entry.md') }, { path: 'jsx', component: () => import('../pages/docs/jsx/enUS/index.md') }, { path: 'ssr', component: () => import('../pages/docs/ssr/enUS/index.md') }, { path: 'nuxtjs', component: () => import('../pages/docs/nuxtjs/enUS/index.md') }, { path: 'vitepress', component: () => import('../pages/docs/vitepress/enUS/index.md') }, { path: 'vite-ssge', component: () => import('../pages/docs/vite-ssge/enUS/index.md') }, { path: 'common-issues', component: () => import('../pages/docs/common-issues/enUS/index.md') }, { path: 'fonts', component: () => import('../pages/docs/fonts/enUS/index.md') }, { path: 'import-on-demand', component: () => import('../pages/docs/import-on-demand/enUS/index.md') }, { path: 'style-conflict', component: () => import('../pages/docs/style-conflict/enUS/index.md') }, { path: 'controlled-uncontrolled', component: () => import('../pages/docs/controlled-uncontrolled/enUS/index.md') }, { path: 'umd', component: () => import('../pages/docs/umd/enUS/index.md') } ] export const zhDocRoutes = [ // basic docs { path: 'introduction', component: () => import('../pages/docs/introduction/zhCN/index.md') }, { path: 'installation', component: () => import('../pages/docs/installation/zhCN/index.md') }, { path: 'usage-sfc', component: () => import('../pages/docs/usage-sfc/zhCN/index.md') }, { path: 'supported-platforms', component: () => import('../pages/docs/supported-platforms/zhCN/index.md') }, { path: 'from-v1', component: () => import('../pages/docs/vue3/zhCN/index.vue') }, { path: 'customize-theme', component: () => import('../pages/docs/customize-theme/zhCN/index.md') }, { path: 'community', component: () => import('../pages/docs/community/zhCN/index.md') }, { path: 'i18n', component: () => import('../pages/docs/i18n/zhCN/index.md') }, // { // path: 'experimental-features', // component: () => import('../pages/docs/experimental-features/zhCN/index.md') // }, { path: 'changelog', component: () => import('../pages/docs/changelog/zhCN/index.vue') }, { path: 'theme', component: () => import('../pages/docs/theme/zhCN/index.demo-entry.md') }, { path: 'jsx', component: () => import('../pages/docs/jsx/zhCN/index.md') }, { path: 'ssr', component: () => import('../pages/docs/ssr/zhCN/index.md') }, { path: 'nuxtjs', component: () => import('../pages/docs/nuxtjs/zhCN/index.md') }, { path: 'vitepress', component: () => import('../pages/docs/vitepress/zhCN/index.md') }, { path: 'vite-ssge', component: () => import('../pages/docs/vite-ssge/zhCN/index.md') }, { path: 'common-issues', component: () => import('../pages/docs/common-issues/zhCN/index.md') }, { path: 'fonts', component: () => import('../pages/docs/fonts/zhCN/index.md') }, { path: 'import-on-demand', component: () => import('../pages/docs/import-on-demand/zhCN/index.md') }, { path: 'style-conflict', component: () => import('../pages/docs/style-conflict/zhCN/index.md') }, { path: 'controlled-uncontrolled', component: () => import('../pages/docs/controlled-uncontrolled/zhCN/index.md') }, { path: 'umd', component: () => import('../pages/docs/umd/zhCN/index.md') } ] export const enComponentRoutes = [ // components { path: 'layout', component: () => import('../../src/layout/demos/enUS/index.demo-entry.md') }, { path: 'gradient-text', component: () => import('../../src/gradient-text/demos/enUS/index.demo-entry.md') }, { path: 'icon', component: () => import('../../src/icon/demos/enUS/index.demo-entry.md') }, { path: 'checkbox', component: () => import('../../src/checkbox/demos/enUS/index.demo-entry.md') }, { path: 'button', component: () => import('../../src/button/demos/enUS/index.demo-entry.md') }, { path: 'switch', component: () => import('../../src/switch/demos/enUS/index.demo-entry.md') }, { path: 'data-table', component: () => import('../../src/data-table/demos/enUS/index.demo-entry.md') }, { path: 'input', component: () => import('../../src/input/demos/enUS/index.demo-entry.md') }, { path: 'input-otp', component: () => import('../../src/input-otp/demos/enUS/index.demo-entry.md') }, { path: 'select', component: () => import('../../src/select/demos/enUS/index.demo-entry.md') }, { path: 'cascader', component: () => import('../../src/cascader/demos/enUS/index.demo-entry.md') }, { path: 'dynamic-input', component: () => import('../../src/dynamic-input/demos/enUS/index.demo-entry.md') }, { path: 'modal', component: () => import('../../src/modal/demos/enUS/index.demo-entry.md') }, { path: 'message', component: () => import('../../src/message/demos/enUS/index.demo-entry.md') }, { path: 'tooltip', component: () => import('../../src/tooltip/demos/enUS/index.demo-entry.md') }, { path: 'popover', component: () => import('../../src/popover/demos/enUS/index.demo-entry.md') }, { path: 'notification', component: () => import('../../src/notification/demos/enUS/index.demo-entry.md') }, { path: 'pagination', component: () => import('../../src/pagination/demos/enUS/index.demo-entry.md') }, { path: 'alert', component: () => import('../../src/alert/demos/enUS/index.demo-entry.md') }, { path: 'date-picker', component: () => import('../../src/date-picker/demos/enUS/index.demo-entry.md') }, { path: 'input-number', component: () => import('../../src/input-number/demos/enUS/index.demo-entry.md') }, { path: 'radio', component: () => import('../../src/radio/demos/enUS/index.demo-entry.md') }, { path: 'form', component: () => import('../../src/form/demos/enUS/index.demo-entry.md') }, { path: 'tabs', component: () => import('../../src/tabs/demos/enUS/index.demo-entry.md') }, { path: 'time-picker', component: () => import('../../src/time-picker/demos/enUS/index.demo-entry.md') }, { path: 'dialog', component: () => import('../../src/dialog/demos/enUS/index.demo-entry.md') }, { path: 'badge', component: () => import('../../src/badge/demos/enUS/index.demo-entry.md') }, { path: 'steps', component: () => import('../../src/steps/demos/enUS/index.demo-entry.md') }, { path: 'collapse', component: () => import('../../src/collapse/demos/enUS/index.demo-entry.md') }, { path: 'progress', component: () => import('../../src/progress/demos/enUS/index.demo-entry.md') }, { path: 'tag', component: () => import('../../src/tag/demos/enUS/index.demo-entry.md') }, { path: 'menu', component: () => import('../../src/menu/demos/enUS/index.demo-entry.md') }, { path: 'timeline', component: () => import('../../src/timeline/demos/enUS/index.demo-entry.md') }, { path: 'back-top', component: () => import('../../src/back-top/demos/enUS/index.demo-entry.md') }, { path: 'divider', component: () => import('../../src/divider/demos/enUS/index.demo-entry.md') }, { path: 'popconfirm', component: () => import('../../src/popconfirm/demos/enUS/index.demo-entry.md') }, { path: 'anchor', component: () => import('../../src/anchor/demos/enUS/index.demo-entry.md') }, { path: 'dropdown', component: () => import('../../src/dropdown/demos/enUS/index.demo-entry.md') }, { path: 'popselect', component: () => import('../../src/popselect/demos/enUS/index.demo-entry.md') }, { path: 'config-provider', component: () => import('../../src/config-provider/demos/enUS/index.demo-entry.md') }, { path: 'transfer', component: () => import('../../src/transfer/demos/enUS/index.demo-entry.md') }, { path: 'legacy-transfer', component: () => import('../../src/legacy-transfer/demos/enUS/index.demo-entry.md') }, { path: 'spin', component: () => import('../../src/spin/demos/enUS/index.demo-entry.md') }, { path: 'drawer', component: () => import('../../src/drawer/demos/enUS/index.demo-entry.md') }, { path: 'loading-bar', component: () => import('../../src/loading-bar/demos/enUS/index.demo-entry.md') }, { path: 'time', component: () => import('../../src/time/demos/enUS/index.demo-entry.md') }, { path: 'slider', component: () => import('../../src/slider/demos/enUS/index.demo-entry.md') }, { path: 'tree', component: () => import('../../src/tree/demos/enUS/index.demo-entry.md') }, { path: 'affix', component: () => import('../../src/affix/demos/enUS/index.demo-entry.md') }, { path: 'statistic', component: () => import('../../src/statistic/demos/enUS/index.demo-entry.md') }, { path: 'legacy-grid', component: () => import('../../src/legacy-grid/demos/enUS/index.demo-entry.md') }, { path: 'grid', component: () => import('../../src/grid/demos/enUS/index.demo-entry.md') }, { path: 'breadcrumb', component: () => import('../../src/breadcrumb/demos/enUS/index.demo-entry.md') }, { path: 'descriptions', component: () => import('../../src/descriptions/demos/enUS/index.demo-entry.md') }, { path: 'list', component: () => import('../../src/list/demos/enUS/index.demo-entry.md') }, { path: 'card', component: () => import('../../src/card/demos/enUS/index.demo-entry.md') }, { path: 'avatar', component: () => import('../../src/avatar/demos/enUS/index.demo-entry.md') }, { path: 'result', component: () => import('../../src/result/demos/enUS/index.demo-entry.md') }, { path: 'thing', component: () => import('../../src/thing/demos/enUS/index.demo-entry.md') }, { path: 'auto-complete', component: () => import('../../src/auto-complete/demos/enUS/index.demo-entry.md') }, { path: 'empty', component: () => import('../../src/empty/demos/enUS/index.demo-entry.md') }, { path: 'element', component: () => import('../../src/element/demos/enUS/index.demo-entry.md') }, { path: 'log', component: () => import('../../src/log/demos/enUS/index.demo-entry.md') }, { path: 'code', component: () => import('../../src/code/demos/enUS/index.demo-entry.md') }, { path: 'typography', component: () => import('../../src/typography/demos/enUS/index.demo-entry.md') }, { path: 'upload', component: () => import('../../src/upload/demos/enUS/index.demo-entry.md') }, { path: 'table', component: () => import('../../src/table/demos/enUS/index.demo-entry.md') }, { path: 'space', component: () => import('../../src/space/demos/enUS/index.demo-entry.md') }, { path: 'flex', component: () => import('../../src/flex/demos/enUS/index.demo-entry.md') }, { path: 'rate', component: () => import('../../src/rate/demos/enUS/index.demo-entry.md') }, { path: 'dynamic-tags', component: () => import('../../src/dynamic-tags/demos/enUS/index.demo-entry.md') }, { path: 'ellipsis', component: () => import('../../src/ellipsis/demos/enUS/index.demo-entry.md') }, { path: 'mention', component: () => import('../../src/mention/demos/enUS/index.demo-entry.md') }, { path: 'page-header', component: () => import('../../src/page-header/demos/enUS/index.demo-entry.md') }, { path: 'global-style', component: () => import('../../src/global-style/demos/enUS/index.demo-entry.md') }, { path: 'image', component: () => import('../../src/image/demos/enUS/index.demo-entry.md') }, { path: 'skeleton', component: () => import('../../src/skeleton/demos/enUS/index.demo-entry.md') }, { path: 'calendar', component: () => import('../../src/calendar/demos/enUS/index.demo-entry.md') }, { path: 'color-picker', component: () => import('../../src/color-picker/demos/enUS/index.demo-entry.md') }, { path: 'tree-select', component: () => import('../../src/tree-select/demos/enUS/index.demo-entry.md') }, { path: 'carousel', component: () => import('../../src/carousel/demos/enUS/index.demo-entry.md') }, { path: 'collapse-transition', component: () => import('../../src/collapse-transition/demos/enUS/index.demo-entry.md') }, { path: 'scrollbar', component: () => import('../../src/scrollbar/demos/enUS/index.demo-entry.md') }, { path: 'countdown', component: () => import('../../src/countdown/demos/enUS/index.demo-entry.md') }, { path: 'number-animation', component: () => import('../../src/number-animation/demos/enUS/index.demo-entry.md') }, { path: 'watermark', component: () => import('../../src/watermark/demos/enUS/index.demo-entry.md') }, { path: 'discrete', component: () => import('../../src/discrete/demos/enUS/index.demo-entry.md') }, { path: 'equation', component: () => import('../../src/equation/demos/enUS/index.demo-entry.md') }, { path: 'qr-code', component: () => import('../../src/qr-code/demos/enUS/index.demo-entry.md') }, { path: 'virtual-list', component: () => import('../../src/virtual-list/demos/enUS/index.demo-entry.md') }, { path: 'split', component: () => import('../../src/split/demos/enUS/index.demo-entry.md') }, { path: 'infinite-scroll', component: () => import('../../src/infinite-scroll/demos/enUS/index.demo-entry.md') }, { path: 'float-button', component: () => import('../../src/float-button/demos/enUS/index.demo-entry.md') }, { path: 'highlight', component: () => import('../../src/highlight/demos/enUS/index.demo-entry.md') }, { path: 'marquee', component: () => import('../../src/marquee/demos/enUS/index.demo-entry.md') }, { path: 'heatmap', component: () => import('../../src/heatmap/demos/enUS/index.demo-entry.md') } ] export const zhComponentRoutes = [ // components { path: 'layout', component: () => import('../../src/layout/demos/zhCN/index.demo-entry.md') }, { path: 'gradient-text', component: () => import('../../src/gradient-text/demos/zhCN/index.demo-entry.md') }, { path: 'icon', component: () => import('../../src/icon/demos/zhCN/index.demo-entry.md') }, { path: 'checkbox', component: () => import('../../src/checkbox/demos/zhCN/index.demo-entry.md') }, { path: 'button', component: () => import('../../src/button/demos/zhCN/index.demo-entry.md') }, { path: 'switch', component: () => import('../../src/switch/demos/zhCN/index.demo-entry.md') }, { path: 'data-table', component: () => import('../../src/data-table/demos/zhCN/index.demo-entry.md') }, { path: 'input', component: () => import('../../src/input/demos/zhCN/index.demo-entry.md') }, { path: 'input-otp', component: () => import('../../src/input-otp/demos/zhCN/index.demo-entry.md') }, { path: 'select', component: () => import('../../src/select/demos/zhCN/index.demo-entry.md') }, { path: 'cascader', component: () => import('../../src/cascader/demos/zhCN/index.demo-entry.md') }, { path: 'dynamic-input', component: () => import('../../src/dynamic-input/demos/zhCN/index.demo-entry.md') }, { path: 'modal', component: () => import('../../src/modal/demos/zhCN/index.demo-entry.md') }, { path: 'message', component: () => import('../../src/message/demos/zhCN/index.demo-entry.md') }, { path: 'tooltip', component: () => import('../../src/tooltip/demos/zhCN/index.demo-entry.md') }, { path: 'popover', component: () => import('../../src/popover/demos/zhCN/index.demo-entry.md') }, { path: 'notification', component: () => import('../../src/notification/demos/zhCN/index.demo-entry.md') }, { path: 'pagination', component: () => import('../../src/pagination/demos/zhCN/index.demo-entry.md') }, { path: 'alert', component: () => import('../../src/alert/demos/zhCN/index.demo-entry.md') }, { path: 'date-picker', component: () => import('../../src/date-picker/demos/zhCN/index.demo-entry.md') }, { path: 'input-number', component: () => import('../../src/input-number/demos/zhCN/index.demo-entry.md') }, { path: 'radio', component: () => import('../../src/radio/demos/zhCN/index.demo-entry.md') }, { path: 'form', component: () => import('../../src/form/demos/zhCN/index.demo-entry.md') }, { path: 'tabs', component: () => import('../../src/tabs/demos/zhCN/index.demo-entry.md') }, { path: 'time-picker', component: () => import('../../src/time-picker/demos/zhCN/index.demo-entry.md') }, { path: 'dialog', component: () => import('../../src/dialog/demos/zhCN/index.demo-entry.md') }, { path: 'badge', component: () => import('../../src/badge/demos/zhCN/index.demo-entry.md') }, { path: 'steps', component: () => import('../../src/steps/demos/zhCN/index.demo-entry.md') }, { path: 'collapse', component: () => import('../../src/collapse/demos/zhCN/index.demo-entry.md') }, { path: 'progress', component: () => import('../../src/progress/demos/zhCN/index.demo-entry.md') }, { path: 'tag', component: () => import('../../src/tag/demos/zhCN/index.demo-entry.md') }, { path: 'menu', component: () => import('../../src/menu/demos/zhCN/index.demo-entry.md') }, { path: 'timeline', component: () => import('../../src/timeline/demos/zhCN/index.demo-entry.md') }, { path: 'back-top', component: () => import('../../src/back-top/demos/zhCN/index.demo-entry.md') }, { path: 'divider', component: () => import('../../src/divider/demos/zhCN/index.demo-entry.md') }, { path: 'popconfirm', component: () => import('../../src/popconfirm/demos/zhCN/index.demo-entry.md') }, { path: 'anchor', component: () => import('../../src/anchor/demos/zhCN/index.demo-entry.md') }, { path: 'dropdown', component: () => import('../../src/dropdown/demos/zhCN/index.demo-entry.md') }, { path: 'popselect', component: () => import('../../src/popselect/demos/zhCN/index.demo-entry.md') }, { path: 'config-provider', component: () => import('../../src/config-provider/demos/zhCN/index.demo-entry.md') }, { path: 'transfer', component: () => import('../../src/transfer/demos/zhCN/index.demo-entry.md') }, { path: 'legacy-transfer', component: () => import('../../src/legacy-transfer/demos/zhCN/index.demo-entry.md') }, { path: 'spin', component: () => import('../../src/spin/demos/zhCN/index.demo-entry.md') }, { path: 'drawer', component: () => import('../../src/drawer/demos/zhCN/index.demo-entry.md') }, { path: 'loading-bar', component: () => import('../../src/loading-bar/demos/zhCN/index.demo-entry.md') }, { path: 'time', component: () => import('../../src/time/demos/zhCN/index.demo-entry.md') }, { path: 'slider', component: () => import('../../src/slider/demos/zhCN/index.demo-entry.md') }, { path: 'tree', component: () => import('../../src/tree/demos/zhCN/index.demo-entry.md') }, { path: 'affix', component: () => import('../../src/affix/demos/zhCN/index.demo-entry.md') }, { path: 'statistic', component: () => import('../../src/statistic/demos/zhCN/index.demo-entry.md') }, { path: 'legacy-grid', component: () => import('../../src/legacy-grid/demos/zhCN/index.demo-entry.md') }, { path: 'grid', component: () => import('../../src/grid/demos/zhCN/index.demo-entry.md') }, { path: 'breadcrumb', component: () => import('../../src/breadcrumb/demos/zhCN/index.demo-entry.md') }, { path: 'descriptions', component: () => import('../../src/descriptions/demos/zhCN/index.demo-entry.md') }, { path: 'list', component: () => import('../../src/list/demos/zhCN/index.demo-entry.md') }, { path: 'card', component: () => import('../../src/card/demos/zhCN/index.demo-entry.md') }, { path: 'avatar', component: () => import('../../src/avatar/demos/zhCN/index.demo-entry.md') }, { path: 'result', component: () => import('../../src/result/demos/zhCN/index.demo-entry.md') }, { path: 'thing', component: () => import('../../src/thing/demos/zhCN/index.demo-entry.md') }, { path: 'auto-complete', component: () => import('../../src/auto-complete/demos/zhCN/index.demo-entry.md') }, { path: 'empty', component: () => import('../../src/empty/demos/zhCN/index.demo-entry.md') }, { path: 'element', component: () => import('../../src/element/demos/zhCN/index.demo-entry.md') }, { path: 'log', component: () => import('../../src/log/demos/zhCN/index.demo-entry.md') }, { path: 'code', component: () => import('../../src/code/demos/zhCN/index.demo-entry.md') }, { path: 'typography', component: () => import('../../src/typography/demos/zhCN/index.demo-entry.md') }, { path: 'upload', component: () => import('../../src/upload/demos/zhCN/index.demo-entry.md') }, { path: 'table', component: () => import('../../src/table/demos/zhCN/index.demo-entry.md') }, { path: 'space', component: () => import('../../src/space/demos/zhCN/index.demo-entry.md') }, { path: 'flex', component: () => import('../../src/flex/demos/zhCN/index.demo-entry.md') }, { path: 'rate', component: () => import('../../src/rate/demos/zhCN/index.demo-entry.md') }, { path: 'dynamic-tags', component: () => import('../../src/dynamic-tags/demos/zhCN/index.demo-entry.md') }, { path: 'ellipsis', component: () => import('../../src/ellipsis/demos/zhCN/index.demo-entry.md') }, { path: 'mention', component: () => import('../../src/mention/demos/zhCN/index.demo-entry.md') }, { path: 'page-header', component: () => import('../../src/page-header/demos/zhCN/index.demo-entry.md') }, { path: 'global-style', component: () => import('../../src/global-style/demos/zhCN/index.demo-entry.md') }, { path: 'image', component: () => import('../../src/image/demos/zhCN/index.demo-entry.md') }, { path: 'skeleton', component: () => import('../../src/skeleton/demos/zhCN/index.demo-entry.md') }, { path: 'calendar', component: () => import('../../src/calendar/demos/zhCN/index.demo-entry.md') }, { path: 'color-picker', component: () => import('../../src/color-picker/demos/zhCN/index.demo-entry.md') }, { path: 'tree-select', component: () => import('../../src/tree-select/demos/zhCN/index.demo-entry.md') }, { path: 'carousel', component: () => import('../../src/carousel/demos/zhCN/index.demo-entry.md') }, { path: 'collapse-transition', component: () => import('../../src/collapse-transition/demos/zhCN/index.demo-entry.md') }, { path: 'scrollbar', component: () => import('../../src/scrollbar/demos/zhCN/index.demo-entry.md') }, { path: 'countdown', component: () => import('../../src/countdown/demos/zhCN/index.demo-entry.md') }, { path: 'number-animation', component: () => import('../../src/number-animation/demos/zhCN/index.demo-entry.md') }, { path: 'watermark', component: () => import('../../src/watermark/demos/zhCN/index.demo-entry.md') }, { path: 'discrete', component: () => import('../../src/discrete/demos/zhCN/index.demo-entry.md') }, { path: 'equation', component: () => import('../../src/equation/demos/zhCN/index.demo-entry.md') }, { path: 'qr-code', component: () => import('../../src/qr-code/demos/zhCN/index.demo-entry.md') }, { path: 'virtual-list', component: () => import('../../src/virtual-list/demos/zhCN/index.demo-entry.md') }, { path: 'split', component: () => import('../../src/split/demos/zhCN/index.demo-entry.md') }, { path: 'infinite-scroll', component: () => import('../../src/infinite-scroll/demos/zhCN/index.demo-entry.md') }, { path: 'float-button', component: () => import('../../src/float-button/demos/zhCN/index.demo-entry.md') }, { path: 'highlight', component: () => import('../../src/highlight/demos/zhCN/index.demo-entry.md') }, { path: 'marquee', component: () => import('../../src/marquee/demos/zhCN/index.demo-entry.md') }, { path: 'heatmap', component: () => import('../../src/heatmap/demos/zhCN/index.demo-entry.md') } ] export const routes = [ { name: 'home', path: '/:lang/:theme', component: () => import('../pages/home/index.vue') }, { name: 'enDocs', path: '/en-US/:theme/docs', component: () => import('../pages/Layout.vue'), children: enDocRoutes }, { name: 'zhDocs', path: '/zh-CN/:theme/docs', component: () => import('../pages/Layout.vue'), children: zhDocRoutes }, { name: 'enComponents', path: '/en-US/:theme/components', component: () => import('../pages/Layout.vue'), children: enComponentRoutes }, { name: 'zhComponents', path: '/zh-CN/:theme/components', component: () => import('../pages/Layout.vue'), children: zhComponentRoutes }, { name: 'not-found', path: '/:pathMatch(.*)*', redirect: { name: 'home', params: { lang: navigator.language === 'zh-CN' ? 'zh-CN' : 'en-US', theme: 'os-theme' } } } ] ================================================ FILE: demo/setup.js ================================================ import ComponentDemo from './utils/ComponentDemo.vue' import ComponentDemos from './utils/ComponentDemos' import EditOnGithubHeader from './utils/EditOnGithubHeader.vue' import './styles/demo.css' import 'vfonts/Inter.css' import 'vfonts/FiraCode.css' import 'katex/dist/katex.css' export function installDemoComponents(app) { app.component('ComponentDemo', ComponentDemo) app.component('ComponentDemos', ComponentDemos) app.component('EditOnGithubHeader', EditOnGithubHeader) } ================================================ FILE: demo/store/hljs.js ================================================ import hljs from 'highlight.js/lib/core' import cpp from 'highlight.js/lib/languages/cpp' import javascript from 'highlight.js/lib/languages/javascript' import python from 'highlight.js/lib/languages/python' import xml from 'highlight.js/lib/languages/xml' hljs.registerLanguage('javascript', javascript) hljs.registerLanguage('python', python) hljs.registerLanguage('cpp', cpp) hljs.registerLanguage('html', xml) hljs.registerLanguage('naive-log', () => ({ contains: [ { className: 'number', begin: /\d+/ } ] })) export default hljs ================================================ FILE: demo/store/index.js ================================================ import { darkTheme, dateEnUS, dateZhCN, enUS, NConfigProvider, useOsTheme, zhCN } from 'naive-ui' import { useMemo } from 'vooks' import { computed, ref } from 'vue' import { TsConfigProvider } from '../../themes/tusimple/src' import { i18n, useIsMobile } from '../utils/composables' import hljs from './hljs' import { createComponentMenuOptions, createDocumentationMenuOptions } from './menu-options' let route = null let router = null // locale let localeNameRef = null // useMemo let dateLocaleRef = null // theme const osThemeRef = useOsTheme() let themeNameRef = null let rawThemeNameRef = null // could be `os-theme` export function initRouter(_router, _route) { route = _route router = _router localeNameRef = useMemo({ get() { return route.path.startsWith('/zh-CN') ? 'zh-CN' : 'en-US' }, set(locale) { router.push(changeLangInPath(route.fullPath, locale)) } }) dateLocaleRef = useMemo(() => { return route.path.startsWith('/zh-CN') ? dateZhCN : dateEnUS }) rawThemeNameRef = useMemo(() => route.params.theme) themeNameRef = useMemo({ get() { switch (route.params.theme) { case 'os-theme': return osThemeRef.value case 'dark': return 'dark' default: return 'light' } }, set(theme) { router.push(changeThemeInPath(route.fullPath, theme)) } }) } // display mode const _displayModeRef = ref(window.localStorage.getItem('mode') ?? 'debug') const displayModeRef = computed({ get() { return _displayModeRef.value }, set(value) { _displayModeRef.value = value window.localStorage.setItem('mode', value) } }) const localeRef = computed(() => { return localeNameRef.value === 'zh-CN' ? zhCN : enUS }) const themeRef = computed(() => { const { value } = themeNameRef return value === 'dark' ? darkTheme : null }) // config provider // eslint-disable-next-line node/prefer-global/process const configProviderNameRef = ref(process.env.TUSIMPLE ? 'tusimple' : 'default') const configProviderRef = computed(() => { return configProviderNameRef.value === 'tusimple' ? TsConfigProvider : NConfigProvider }) // options const docOptionsRef = computed(() => createDocumentationMenuOptions({ theme: rawThemeNameRef.value, lang: localeNameRef.value, mode: displayModeRef.value }) ) const componentOptionsRef = computed(() => createComponentMenuOptions({ theme: rawThemeNameRef.value, lang: localeNameRef.value, mode: displayModeRef.value }) ) const flattenedDocOptionsRef = computed(() => { const flattenedItems = [] const traverse = (items) => { if (!items) return items.forEach((item) => { if (item.children) traverse(item.children) else flattenedItems.push(item) }) } traverse(docOptionsRef.value) traverse(componentOptionsRef.value) return flattenedItems }) export function siteSetup() { i18n.provide(computed(() => localeNameRef.value)) const isMobileRef = useIsMobile() return { themeEditorStyle: computed(() => { return isMobileRef.value ? 'right: 18px; bottom: 24px;' : undefined }), configProvider: configProviderRef, hljs, themeName: themeNameRef, theme: themeRef, locale: localeRef, dateLocale: dateLocaleRef } } function changeLangInPath(path, lang) { const langReg = /^\/(zh-CN|en-US)\// return path.replace(langReg, `/${lang}/`) } function changeThemeInPath(path, theme) { const themeReg = /(^\/[^/]+\/)([^/]+)/ return path.replace(themeReg, `$1${theme}`) } export function push(partialPath) { const { fullPath } = route router.push( fullPath.replace(/(^\/[^/]+\/[^/]+)((\/.*)|$)/, `$1${partialPath}`) ) } export function useDisplayMode() { return displayModeRef } export function useLocaleName() { return localeNameRef } export function useThemeName() { return themeNameRef } export function useDocOptions() { return docOptionsRef } export function useComponentOptions() { return componentOptionsRef } export function useFlattenedDocOptions() { return flattenedDocOptionsRef } export function useConfigProviderName() { return configProviderNameRef } ================================================ FILE: demo/store/menu-options.js ================================================ // rubbish code here import { NSpace, NTag } from 'naive-ui' import { h } from 'vue' import { RouterLink } from 'vue-router' export function renderMenuLabel(option) { if (!('path' in option) || option.label === '--Debug') { return option.label } return h( RouterLink, { to: option.path }, { default: () => option.label } ) } function renderNewTag(isZh) { return h( NTag, { type: 'success', size: 'small', round: true, bordered: false, style: { pointerEvents: 'none' } }, { default: isZh ? () => '新' : () => 'New' } ) } function renderItemExtra(rawItem, isZh) { if (!rawItem.enSuffix || !isZh) { return rawItem.isNew ? renderNewTag : undefined } const renderEn = () => h( NSpace, { inline: true, size: 6, wrapItem: false, align: 'center' }, { default: () => [rawItem.en, renderNewTag(isZh)] } ) return rawItem.isNew ? renderEn : rawItem.en } function getItemExtraString(rawItem, isZh) { if (!rawItem.enSuffix || !isZh) { return '' } else { return rawItem.en } } function appendCounts(item) { if (!item.children) { item.count = 1 return item } if (item.children) { item.children.forEach(appendCounts) item.count = item.children.reduce((sum, item) => sum + item.count, 0) if (item.type === 'group') { item.en += ` (${item.count})` item.zh += ` (${item.count})` } return item } } function createItems(lang, theme, prefix, items) { const isZh = lang === 'zh-CN' const langKey = isZh ? 'zh' : 'en' return items.map((rawItem) => { const item = { ...rawItem, key: rawItem.en, label: rawItem[langKey] || rawItem.en, extra: renderItemExtra(rawItem, isZh), extraString: getItemExtraString(rawItem, isZh), path: rawItem.path ? `/${lang}/${theme}${prefix}${rawItem.path}` : undefined } if (rawItem.children) { item.children = createItems(lang, theme, prefix, rawItem.children) } return item }) } export function createDocumentationMenuOptions({ lang, theme }) { return createItems(lang, theme, '/docs', [ { en: 'Introduction', zh: '介绍', type: 'group', children: [ { en: 'Naive UI', zh: 'Naive UI', path: '/introduction' } ] }, { en: 'Getting Started', zh: '快速上手', type: 'group', children: [ { en: 'Installation', zh: '安装', path: '/installation' }, { en: 'Usage in SFC', zh: '在 SFC 中使用', path: '/usage-sfc' }, { en: 'Using UMD', zh: '使用 UMD', path: '/umd' }, { en: 'Configuring Fonts', zh: '配置字体', path: '/fonts' }, { en: 'Import on Demand', zh: '按需引入', path: '/import-on-demand' }, { en: 'Supported Platforms', zh: '支持的平台', path: '/supported-platforms' }, { en: 'Common Issues', zh: '常见问题', path: '/common-issues' }, { en: 'Controlled & Uncontrolled', zh: '受控与非受控', path: '/controlled-uncontrolled' } ] }, { en: 'Guides', zh: '指南', type: 'group', children: [ { en: 'JSX & TSX', zh: 'JSX & TSX', path: '/jsx' }, { en: 'Server-Sider Rendering', zh: '服务端渲染 SSR', path: '/ssr' }, { en: 'Nuxt.js', zh: 'Nuxt.js', path: '/nuxtjs' }, { en: 'Vitepress', zh: 'Vitepress', path: '/vitepress' }, { en: 'Vite SSG/SSE', zh: 'Vite SSG/SSE', path: '/vite-ssge' }, { en: 'Customizing Theme', zh: '调整主题', path: '/customize-theme' }, { en: 'Internationalization', zh: '国际化', path: '/i18n' }, { en: 'Create Themed Component', zh: '创建适配主题的组件', path: '/theme' }, { en: 'Potential Style Conflict', zh: '潜在的样式冲突', path: '/style-conflict' }, { en: 'Third-Party Libraries', zh: '社区精选资源', path: '/community' } ] }, { en: 'Version', zh: '版本', type: 'group', children: [ { en: 'Change Log', zh: '变更日志', path: '/changelog' } ] } ]) } export function createComponentMenuOptions({ lang, theme }) { return createItems(lang, theme, '/components', [ appendCounts({ zh: '通用组件', en: 'Common Components', type: 'group', children: [ { en: 'Avatar', zh: '头像', enSuffix: true, path: '/avatar' }, { en: 'Button', zh: '按钮', enSuffix: true, path: '/button' }, { en: 'Card', zh: '卡片', enSuffix: true, path: '/card' }, { en: 'Carousel', zh: '轮播图', enSuffix: true, path: '/carousel' }, { en: 'Collapse', zh: '折叠面板', enSuffix: true, path: '/collapse' }, { en: 'Divider', zh: '分割线', enSuffix: true, path: '/divider' }, { en: 'Dropdown', zh: '下拉菜单', enSuffix: true, path: '/dropdown' }, { en: 'Ellipsis', zh: '文本省略', enSuffix: true, path: '/ellipsis' }, { en: 'Gradient Text', zh: '渐变文字', enSuffix: true, path: '/gradient-text' }, { en: 'Icon', zh: '图标', enSuffix: true, path: '/icon' }, { en: 'PageHeader', zh: '页头', enSuffix: true, path: '/page-header' }, { en: 'Tag', zh: '标签', enSuffix: true, path: '/tag' }, { en: 'Typography', zh: '排印', enSuffix: true, path: '/typography' }, { en: 'Watermark', zh: '水印', enSuffix: true, path: '/watermark' }, { en: 'Float Button', zh: '浮动按钮', enSuffix: true, path: '/float-button', isNew: true } ] }), appendCounts({ zh: '数据录入组件', en: 'Data Input Components', type: 'group', children: [ { en: 'Auto Complete', zh: '自动填充', enSuffix: true, path: '/auto-complete' }, { en: 'Cascader', zh: '级联选择', enSuffix: true, path: '/cascader' }, { en: 'Color Picker', zh: '颜色选择器', enSuffix: true, path: '/color-picker' }, { en: 'Checkbox', zh: '复选框', enSuffix: true, path: '/checkbox' }, { en: 'Date Picker', zh: '日期选择器', enSuffix: true, path: '/date-picker' }, { en: 'Dynamic Input', zh: '动态录入', enSuffix: true, path: '/dynamic-input' }, { en: 'Dynamic Tags', zh: '动态标签', enSuffix: true, path: '/dynamic-tags' }, { en: 'Form', zh: '表单', enSuffix: true, path: '/form' }, { en: 'Input', zh: '文本输入', enSuffix: true, path: '/input' }, { en: 'Input Number', zh: '数字输入', enSuffix: true, path: '/input-number' }, { en: 'Input OTP', zh: '验证码', enSuffix: true, path: '/input-otp', isNew: true }, { en: 'Mention', zh: '提及', enSuffix: true, path: '/mention' }, { en: 'Radio', zh: '单选', enSuffix: true, path: '/radio' }, { en: 'Rate', zh: '评分', enSuffix: true, path: '/rate' }, { en: 'Select', zh: '选择器', enSuffix: true, path: '/select' }, { en: 'Slider', zh: '滑动选择', enSuffix: true, path: '/slider' }, { en: 'Switch', zh: '开关', enSuffix: true, path: '/switch' }, { en: 'Time Picker', zh: '时间选择器', enSuffix: true, path: '/time-picker' }, { en: 'Transfer', zh: '穿梭框', enSuffix: true, path: '/transfer' }, { en: 'Tree Select', zh: '树型选择', enSuffix: true, path: '/tree-select' }, { en: 'Upload', zh: '上传', enSuffix: true, path: '/upload' } ] }), appendCounts({ zh: '数据展示组件', en: 'Data Display Components', type: 'group', children: [ { en: 'Calendar', zh: '日历', enSuffix: true, path: '/calendar' }, { en: 'Countdown', zh: '倒计时', enSuffix: true, path: '/countdown' }, { en: 'Code', zh: '代码', enSuffix: true, path: '/code' }, { en: 'Data Table', zh: '数据表格', enSuffix: true, path: '/data-table' }, { en: 'Descriptions', zh: '描述', enSuffix: true, path: '/descriptions' }, { en: 'Empty', zh: '无内容', enSuffix: true, path: '/empty' }, { en: 'Equation', zh: '公式', enSuffix: true, path: '/equation' }, { en: 'Image', zh: '图像', enSuffix: true, path: '/image' }, { en: 'List', zh: '列表', enSuffix: true, path: '/list' }, { en: 'Log', zh: '日志', enSuffix: true, path: '/log' }, { en: 'Number Animation', zh: '数值动画', enSuffix: true, path: '/number-animation' }, { en: 'QR Code', zh: '二维码', enSuffix: true, path: '/qr-code', isNew: true }, { en: 'Statistic', zh: '统计数据', enSuffix: true, path: '/statistic' }, { en: 'Table', zh: '表格', enSuffix: true, path: '/table' }, { en: 'Thing', zh: '东西', enSuffix: true, path: '/thing' }, { en: 'Time', zh: '时间', enSuffix: true, path: '/time' }, { en: 'Timeline', zh: '时间线', enSuffix: true, path: '/timeline' }, { en: 'Tree', zh: '树', enSuffix: true, path: '/tree' }, { en: 'Infinite Scroll', zh: '无限滚动', enSuffix: true, path: '/infinite-scroll', isNew: true }, { en: 'Highlight', zh: '高亮文本', enSuffix: true, path: '/highlight', isNew: true }, { en: 'Heatmap', zh: '热力图', enSuffix: true, path: '/heatmap', isNew: true } ] }), appendCounts({ zh: '导航组件', en: 'Navigation Components', type: 'group', children: [ { en: 'Affix', zh: '固钉', enSuffix: true, path: '/affix' }, { en: 'Anchor', zh: '侧边导航', enSuffix: true, path: '/anchor' }, { en: 'Back Top', zh: '回到顶部', enSuffix: true, path: '/back-top' }, { en: 'Breadcrumb', zh: '面包屑', enSuffix: true, path: '/breadcrumb' }, { en: 'Loading Bar', zh: '加载条', enSuffix: true, path: '/loading-bar' }, { en: 'Menu', zh: '菜单', enSuffix: true, path: '/menu' }, { en: 'Pagination', zh: '分页', enSuffix: true, path: '/pagination' }, { en: 'Steps', zh: '步骤', enSuffix: true, path: '/steps' }, { en: 'Tabs', zh: '标签页', enSuffix: true, path: '/tabs' } ] }), appendCounts({ zh: '反馈组件', en: 'Feedback Components', type: 'group', children: [ { en: 'Alert', zh: '警告信息', enSuffix: true, path: '/alert' }, { en: 'Badge', zh: '标记', enSuffix: true, path: '/badge' }, { en: 'Dialog', zh: '对话框', enSuffix: true, path: '/dialog' }, { en: 'Drawer', zh: '抽屉', enSuffix: true, path: '/drawer' }, { en: 'Marquee', zh: '跑马灯', enSuffix: true, path: '/marquee', isNew: true }, { en: 'Message', zh: '信息', enSuffix: true, path: '/message' }, { en: 'Modal', zh: '模态框', enSuffix: true, path: '/modal' }, { en: 'Notification', zh: '通知', enSuffix: true, path: '/notification' }, { en: 'Popconfirm', zh: '弹出确认', enSuffix: true, path: '/popconfirm' }, { en: 'Popover', zh: '弹出信息', enSuffix: true, path: '/popover' }, { en: 'Popselect', zh: '弹出选择', enSuffix: true, path: '/popselect' }, { en: 'Progress', zh: '进度', enSuffix: true, path: '/progress' }, { en: 'Result', zh: '结果页', enSuffix: true, path: '/result' }, { en: 'Skeleton', zh: '骨架屏', enSuffix: true, path: '/skeleton' }, { en: 'Spin', zh: '加载', enSuffix: true, path: '/spin' }, { en: 'Tooltip', zh: '弹出提示', enSuffix: true, path: '/tooltip' } ] }), appendCounts({ zh: '布局组件', en: 'Layout Components', type: 'group', children: [ { en: 'Flex', zh: '弹性布局', enSuffix: true, path: '/flex', isNew: true }, { en: 'Layout', zh: '布局', enSuffix: true, path: '/layout' }, { en: 'Legacy Grid', zh: '旧版栅格', enSuffix: true, path: '/legacy-grid' }, { en: 'Grid', zh: '栅格', enSuffix: true, path: '/grid' }, { en: 'Space', zh: '间距', enSuffix: true, path: '/space' }, { en: 'Split', zh: '面板分割', enSuffix: true, path: '/split', isNew: true } ] }), appendCounts({ zh: '工具组件', en: 'Utility Components', type: 'group', children: [ { en: 'Collapse Transition', zh: '折叠渐变', enSuffix: true, path: '/collapse-transition' }, { en: 'Discrete API', zh: '独立 API', enSuffix: true, path: '/discrete' }, { en: 'Scrollbar', zh: '滚动条', enSuffix: true, path: '/scrollbar' }, { en: 'Virtual List', zh: '虚拟列表', enSuffix: true, path: '/virtual-list', isNew: true } ] }), appendCounts({ zh: '配置组件', en: 'Config Components', type: 'group', children: [ { en: 'Config Provider', zh: '全局化配置', enSuffix: true, path: '/config-provider' }, { en: 'Element', zh: '元素', enSuffix: true, path: '/element' }, { en: 'Global Style', zh: '全局样式', enSuffix: true, path: '/global-style' } ] }), appendCounts({ zh: '废弃的组件', en: 'Deprecated Components', type: 'group', children: [ { en: 'Legacy Transfer', zh: '旧版穿梭框', enSuffix: true, path: '/legacy-transfer' } ] }) ]) } ================================================ FILE: demo/styles/Metropolis.css ================================================ @font-face { font-family: 'Metropolis'; font-weight: 600; src: url('./Metropolis-Bold.woff2'); } ================================================ FILE: demo/styles/demo.css ================================================ @import 'Metropolis.css'; body { overflow: hidden; --header-height: 64px; } .demo-card .demo-card__view:not(:first-child) { margin-top: 16px; } .demo-card .demo-card__view pre { font-family: v-mono, monospace; } .demo-card .demo-card__view code { font-family: v-mono, monospace; } .demo-card code.n-text { white-space: nowrap; } .doc .n-p, .n-blockquote { max-width: 680px; } .md-table-wrapper { margin-bottom: 16px; } .md-table-wrapper:last-child, .md-card:last-child { margin-bottom: 0; } .md-table td:first-child { font-size: 0.93em !important; font-family: v-mono, monospace; } .md-table .n-text.n-text--code { font-size: 0.93em !important; } .md-card { margin-bottom: 16px; } .ts-dark-theme .demo-card { background-color: #141414; } .md-table td { word-break: normal; } @media only screen and (max-width: 1280px) { .md-table td { word-break: break-word; } } @media only screen and (max-width: 639px) { body { overflow: visible; } .md-table td { word-break: normal; } .md-table-wrapper { overflow: auto; margin: 0 -16px; display: flex; flex-wrap: nowrap; } .md-table-wrapper::before, .md-table-wrapper::after { content: ''; width: 16px; flex-shrink: 0; } } ================================================ FILE: demo/utils/ComponentDemo.vue ================================================ ================================================ FILE: demo/utils/ComponentDemos.tsx ================================================ import { computed, defineComponent, Fragment, h } from 'vue' import { useIsMobile, useIsSmallDesktop, useIsTablet } from './composables' export default defineComponent({ name: 'ComponentDemos', props: { span: { type: Number, default: 2 } }, setup(props) { const isMobileRef = useIsMobile() const isTabletRef = useIsTablet() const isSmallDesktop = useIsSmallDesktop() const mergedColsRef = computed(() => { return isMobileRef.value || isTabletRef.value || isSmallDesktop.value ? 1 : props.span }) return { mergedCols: mergedColsRef } }, render() { const children = this.$slots.default?.() ?? [] const { mergedCols } = this return (
{mergedCols === 1 ? ( children ) : ( <>
{children.filter((_, index) => index % 2 === 0)}
{children.filter((_, index) => index % 2 === 1)}
)}
) } }) ================================================ FILE: demo/utils/CopyCodeButton.vue ================================================ ================================================ FILE: demo/utils/EditInCodeSandboxButton.vue ================================================ ================================================ FILE: demo/utils/EditInPlaygroundButton.vue ================================================ ================================================ FILE: demo/utils/EditOnGithubButton.vue ================================================ ================================================ FILE: demo/utils/EditOnGithubHeader.vue ================================================ ================================================ FILE: demo/utils/codesandbox.js ================================================ import { getParameters } from 'codesandbox/lib/api/define' const indexHtml = ` Naive UI Demo
` const appVue = ` ` const mainJs = `import { createApp } from "vue"; import naive from "naive-ui"; import App from "./App.vue"; const app = createApp(App); app.use(naive); app.mount("#app"); ` function getDeps(code) { return (code.match(/from '([^']+)'\n/g) || []) .map(v => v.slice(6, v.length - 2)) .reduce((prevV, dep) => { prevV[dep] = 'latest' return prevV }, {}) } export function getCodeSandboxParams(code) { return getParameters({ files: { 'package.json': { content: { dependencies: { ...getDeps(code), vue: 'latest', 'vue-router': 'latest', 'naive-ui': 'latest' }, devDependencies: { '@vue/cli-plugin-babel': '~4.5.0', typescript: '~4.6.3' } } }, 'index.html': { content: indexHtml }, 'src/Demo.vue': { content: code }, 'src/App.vue': { content: appVue }, 'src/main.js': { content: mainJs } } }) } ================================================ FILE: demo/utils/composables.js ================================================ import { useBreakpoint, useMemo } from 'vooks' import { inject, provide, reactive, toRef, watchEffect } from 'vue' export function useIsMobile() { const breakpointRef = useBreakpoint() return useMemo(() => { return breakpointRef.value === 'xs' }) } export function useIsTablet() { const breakpointRef = useBreakpoint() return useMemo(() => { return breakpointRef.value === 's' }) } export function useIsSmallDesktop() { const breakpointRef = useBreakpoint() return useMemo(() => { return breakpointRef.value === 'm' }) } export function i18n(data) { const localeReactive = inject('i18n', null) return { locale: toRef(localeReactive, 'locale'), t(key) { const { locale } = localeReactive return data[locale][key] } } } i18n.provide = function (localeRef) { const localeReactive = reactive({}) watchEffect(() => { localeReactive.locale = localeRef.value }) provide('i18n', localeReactive) } ================================================ FILE: demo/utils/composables.ts ================================================ import { useBreakpoint, useMemo } from 'vooks' import { inject, provide, reactive, toRef, watchEffect } from 'vue' export function useIsMobile() { const breakpointRef = useBreakpoint() return useMemo(() => { return breakpointRef.value === 'xs' }) } export function useIsTablet() { const breakpointRef = useBreakpoint() return useMemo(() => { return breakpointRef.value === 's' }) } export function useIsSmallDesktop() { const breakpointRef = useBreakpoint() return useMemo(() => { return breakpointRef.value === 'm' }) } export function i18n(data: Record>) { const localeReactive = inject<{ locale: string } | null>('i18n', null) if (!localeReactive) { throw new Error('i18n context not provided') } return { locale: toRef(localeReactive, 'locale'), t(key) { const { locale } = localeReactive return data[locale][key] } } } i18n.provide = function (localeRef) { const localeReactive = reactive<{ locale: string }>({ locale: '' }) watchEffect(() => { localeReactive.locale = localeRef.value }) provide('i18n', localeReactive) } ================================================ FILE: demo/utils/github-url.js ================================================ export const repoUrl = 'https://github.com/tusen-ai/naive-ui' export const blobUrl = `${repoUrl}/blob/main/` ================================================ FILE: demo/utils/playground.js ================================================ export const playgroundUrl = 'https://play-naive.pro-components.cn' export const appCode = ` ` ================================================ FILE: demo/utils/route.js ================================================ export function findMenuValue(options, path) { for (const option of options) { if (option.children) { const value = findMenuValue(option.children, path) if (value) return value } if (option.path === path) { return option.key } } return undefined } ================================================ FILE: design-notes/design-token-status.md ================================================ ## Color --color --color-hover --color-pressed --color-active --color-active-hover --color-active-pressed --color-focus --color-focus-hover --color-focus-active --color-focus-pressed --color-disabled --color-disabled-active disabled-active > disabled > active-hover > active > pressed > hover > default ================================================ FILE: design-notes/how-to-name-a-style-var.md ================================================ # How to Name a Style Var For example, you have a button, which has `default` and `error` type. How will you name the background color of the button. ``` buttonColor errorButtonColor ``` or ``` buttonColor buttonColorError ``` The second is the better (The second is easy to extend and read. Also it follow the css pattern for example `padding-right` and `padding-left`). When it comes to hover style? ``` buttonColor buttonColorHover buttonColorError buttonColorErrorHover <- ``` or ``` buttonColor buttonColorHover buttonColorError buttonColorHoverError <- ``` The second is the better since if you want write a map entity, you always loop on types. For example: ```js // better ;['Default', 'Error'].map((type) => [ 'buttonColor' + type, 'buttonColorHover' + type ]) // worse, hard to maintain ;['Default', 'Error'].map((type) => [ 'button' + type + 'Color', 'buttonHover' + type + 'Color' ]) ``` ================================================ FILE: design-notes/maintaining.md ================================================ # 这个文档是为仓库维护者提供的 ## 关于 PR 合并 1. docs、main 的 PR 都要 squash 合并。 2. 分支间的合并使用最普通的 merge 合并（一定不要 squash，不要 rebase） ## 发版流程 1. 将 docs 合并到 main（发起一个 PR，CI 过了就合并） 2. 拉下最新的 main 3. 从 main checkout 到 release 分支 4. 修改 package.json 版本号 5. npm run gen-version 6. 修改两个语言的 changelog 版本号（还有日期） 7. 把改动提交到 release 分支，git commit -m "x.x.x" 8. 将 release 分支合并到 main（发起一个 PR，CI 过了就合并） 9. 回到 main 分支拉回最新的代码 10. git clean -fdx && pnpm i && npm run release:package 11. 将 main 合并到 docs（发起一个 PR，CI 过了就合并） ## 提交信息 ### Commit Message 使用 Angular Style，`feat(xxx): yyy` #### 注意事项 - `feat(xxx)` 必须是组件，不能加 `n`，`feat(input)` ✅，`feat(n-input)` ❌ - feat 或者是 fix 的话如果有对应的 issue 的话需要自己增加 comment 如 fix #514 或者 close #514 ## Changelog - 新增属性 ``` - `n-xxx` add `xxx` prop. - `n-xxx` 新增 `xxx` 属性 注意 `xxx` 属性必须是 kebab-case，不能是 camelCase。 ``` - 修复 Bug ``` - Fix `n-xxx` ... - 修复 `n-xxx` ... ``` ## PR checklist - [ ] 我在中文文档中使用了中文的标点符号（`（`、`，`、`、`） - [ ] 我在英文文档中使用了英文的标点符号 - [ ] 我没有在中文 API Table 的描述中使用句号 - [ ] 我在英文文档的 API Table description 中增加了句号 - [ ] 我在中文和英文以及中文和数字之间添加了空格 - [ ] 我在文档中的 prop 使用了 kebab-case - [ ] 文档的 API 表格按照字母顺序 - [ ] feat 或者 fix 要注意有没有加 CHANGELOG - [ ] feat 尽量增加测试 - [ ] 文档要精简，可读性好，没用的空格删除 - [ ] 代码要精简，没用的代码删除 - [ ] 测试代码不要牵扯太多无关代码，测试的方式要准确、灵活 ================================================ FILE: design-notes/think.md ================================================ ## git problem... 我的锅...远程分支没设定好，推得哪个自己都不知道。 ## test 时候 vue v-model 产生的效果必须在 \$nextTick() 之后才会产生，虽然它声称自己是同步的... 我的锅，忘了为啥了。确实是同步的，是我没有考虑到 v-model 这东西应该用什么方法测试。 ## Vue loader 编译深度选择器出了问题 a >>> b 被编译成了 a > > > b ## input 的 change 不随外界 props value 的改变改变 其他的我还没想好 ## 2019.7.17 There may be a bug of chrome 在一个 single filterable select 中，会出现一个 bug...，这个 bug 会让溢出屏幕的 item 不再显示。感觉可能是 Chrome 为了性能优化没有渲染一些在屏幕外面的东西，暂时通过 translateZ(0) 解决了。 ## 2019.7.17 Popover popover 的 hover 有问题，哎...一大堆东西闪来闪去就可能 mouseleave 没触发就一直留在那了 ## 2019.7.31 Margin 没有撑开元素 overflow: hidden 可以解决，这是 BFC 的问题 ## 2019.8.1 width: fit-content, min-content, max-content, intrinsic, extrinsic flex, flex-grow ``` render (h) { console.log(this.$props) return h('div', { staticClass: 'n-steps' }, mapSteps({ ...this.$props }, this.$slots.default)) } ``` 为什么 \$props 不一样？解构赋值做了什么 document.querySelector('\*[n-id=888d3] .simulate-transparent-text') 不合法？ ## 2019.8.8 函数节流别忘了加上@scroll ## 2019.8.27 activator 外面不应该包元素检查内存泄露可能性考虑级联异步 api placement \$refs 变化更改 ## 2019.8.28 picker 在 input 聚焦的时候，esc 按钮不符合预期 ## 2019.8.29 block transition for date picker in range not via :key ## 2019.9.2 select menu 更加自治一点 比如 isSelected，可能最后要加到 vmodel 为止 tooltip css max-content 兼容性 popover z-index 问题 ## 2019.9.3 popover 停止追踪的时机 ## 2019.9.24 popover 可能 activator 和 content 不同步，在 beforeRouteEnter locale change 的时候！！！ ## 2019.9.28 confirm 有 bug = =...和 button 颜色相关，之后检查吧 ## 2019.10.21 Radio Button 默认主题下是否 hollow out，这是个问题 ## 2019.11.14 base picker focus 问题 ## 2019.12.3 Dropdown Submenu 定位问题还有那个... Modal + border 的问题，怎么解决 ## 2019.12.20 Anchor Bug 复现 at typography ## 2019.12.23 Damn eslint ``` What fixed it for me was using double quotes and an escaping slash like so: "lint": "eslint \"**/*.{js,jsx}\" --quiet", Previously, it would not work with single quotes: "lint": "eslint '**/*.{js,jsx}' --quiet", ``` ## 2019.12.30 为了按需引入打包大小依旧可控，需要用某种方式让互相的依赖变为外部依赖。或者就维持原本的文件结构，这样的话需要的是 babel。看起来还是有点麻烦，之后再解决吧。 ## 2019.2.26 虽然没啥用了，还是留着吧 ``` /** * In Chrome, Firefox, Safari, this only happens when devtool opened * However only Chrome and Firefox will refocus at input element */ const devtoolIsOpened = e.target === document.activeElement ``` ## 2020.3.7 主体差不多做完了，好累 ## 2020.3.8 zindex 有点问题 ## 2020.3.11 zindex 的问题解决了，虽然很简单，在 static 元素上设定 zindex 没用，😅 ## 2020.3.15 在搞响应式页面的时候，我意识到存粹依赖 css 是一种不可靠的方式。虽然从布局层面 grid layout 已经给出了一种近乎完美的解决方案，但是涉及到一切内联样式的... 都需要从 js 的层面来解决。目前想来最 trival 的方式就是让每个 config consumer 都能拿到这个值。 ## 2020.3.20 一想到到了 1.0 就要写 changelog，就感觉 🥚 在隐隐作痛 ## 2020.3.25 一个有趣的事情是，blur 到 document.body 之后，document.activeElement 是 body，但是 blurEvent.relatedTarget 会被设为 null ## 2020.5.18 rerender 报警了 ``` h('NLayout', { ref: 'body', style: { ...this.contentStyle }, props: { 'use-native-scrollbar': false, 'scroll-content-style': { width: '100%', boxSizing: 'border-box', padding: this.paddingBody ? '21px 48px' : null } } }, null) ``` 一个是 computed 导致重复渲染，还有一个是 getScrollParent 缓存的问题 ## 2020.5.19 我在想要不要帮用户检查值，比如说一些不存在的值...现在这个问题就出现在 checkbox 里面，这是个哲学问题 ## 2020.5.19 得看懂 vue 究竟是怎么更新组件的... ## 2020.5.28 目前看来，对于动态样式，有两种情况，一种是像直接通过 prop 生效，另一种是通过组合才生效，比如 error 的 formitem 与 input，判断是否要生成样式是个比较麻烦的事，目前看来比较凑巧的是这个样式的体积不是很大，其实放在哪边都差不多= = ## 2020.5.29 主题变量有两种组织方式： ``` light { error: { backgroundColor: { hover } } } 或者 light { backgroundColor: { error: { default } } } ``` 我目前觉得第一种好点，因为扩展一般是按照种类扩展，每次插入一个同样结构的块。而第二种是每次扩展的时候在每个块里同样的位置插入一行，这样扩展的时候写起来很别扭。 ## 2020.7.1 shouldMount 可以加到 withCssr ## 2020.7.8 style overrides RFC ## 2020.8.2 颜色命名的方式 ``` 1. { xColor, xActiveColor, xDisabledColor, secondaryTextColor, tertiaryTextColor }, { // 这种拒绝，因为只有一个状态也需要 default xColor: { default, active, disabled } } // 现在感觉第三种比较好 { xColor, xColorActive, xColorDisabled, textColor2, // 暂时可以先不改 textColor3, // textColorDisabled, textColor1, textColor2, textColor3, textColorQ... } // 还有一点是去掉 backgroundColor 中的 background，因为 color & textColor 区分度已经够了 ``` ```js // no import on demand import naive from 'naive-ui' naive.Button.overrideStyles({ light: { borderRadius: 8 }, dark: { borderRadius: 8 } }) naive.InputNumber.overrideStyles({ light: { borderRadius: 8 }, dark: { borderRadius: 8 } }) naive.themes.light.overrideStyles({ primaryColor: '1234' }) Vue.use(naive) ``` ```js // import on demand // essential import create from 'naive-ui/create' import lightStyle from 'naive-ui/styles/light' import darkStyle from 'naive-ui/styles/dark' // components import Button from 'naive-ui/button' // styles import buttonLightStyle from 'naive-ui/button/styles/light' import buttonDarkStyle from 'naive-ui/button/styles/dark' create({ components: [Button], styles: [ // base styles, required for each theme lightStyle, darkStyle, // component styles buttonLightStyle, buttonDarkStyle ] }) ``` ## 2020.10.22 ```js // extend Element.prototype.scrollTo // override 1 (xCoord, yCoord) keep it // overried 2 ScrollOptions // ScrollOptions { // x: number, // y: number, // behavior: 'auto' | 'smooth' // index?: number // key?: number // el?: Element // position?: 'bottom' | 'top', // slient?: boolean // } ``` ## TODO 排序不分先后 1. Focus Detector on Time Selector 2. Menu Root Indent = 0 可能造成问题 3. 用 RAF 优化 scrollbar 性能（不一定需要）为了有时候滚动同步的一致性，决定不做了 4. Anchor 切换有 bug，忽然闪现第一个 5. Safari select lightbar container overflow 边角（或许是 webkit 的问题）默认选中第一个可以装作这个问题不存在 6. Chrome lightbar offset @table fitler select menu 始终存在这个问题，不知道原因是什么 7. cascader 数据结构重构，维持原选项！ 这个不做了，对 Children 的处理过于边角，Patch 那块也会从声明式变成命令式 8. 排查 render 函数是否每个地方都支持数组 我现在明白了，只要套上数组，vue 就能完美的渲染 9. form async validation 10. table filter 重构支持异步 11. tabs resize bug 12. CSS 整理 暂且算做完了 13. 落地页 14. 按需引入 babel plugin 这个不做了，收益不大，工作量不小 15. form table 需要 size 16. input number 需要一个小型的 目前看来也不是很必要，input number 其实可以很小 17. layout scroll api 18. cascader select menu disabled 选项 19. icon 的默认 stroke 20. tree 组件 21. 文件上传组件 22. custom-input 废弃或者重构 23. Date 键盘操作 Time 键盘操作 先把能做的做了 24. Time 格式化 25. Date 格式化 26. base cancel mark rename suffix 27. base picker => base selection 28. base lightbar => base tracking rect 29. loader 区分 debug 和 非 debug 30. 逐步放宽对宽度必需传 number 的现实，尤其是对于 table 31. BaseLoading 代替 Log 里的 Spin 32. Modal 内部组件的卸载方式 33. Anchor 的另一种模式，追踪内容按照的是中间范围而不是自身大小 34. bug md-loader alert 内的 code 不显示 不是 bug，md 就这么渲染 35. backtop mounted blink 36. Tab keep alive 37. Cascader submenu 的 lightbar 用 base tracking rect 代替 38. Dropdown 样式微调 39. Card 用 padding 代替 margin 来避免 margin 折叠的问题 不做了，要是想避免折叠让用户自己写 bfc 吧 40. 检查 Icon 在 button 中切换有没有问题，直觉来说应该没问题 41. Radio Group 和 Steps 的镂空效果在 mounted 的时候 transition 没有关闭 42. Typography 文档待更新 43. Tab 文档待更新 44. Icon 文档待更新 45. 把 Upload 的回调 API 从 promise 改成 callback 格式的，文档也要对应修改 我决定全面提供 Promise API 而不是 callback 风格的 46. Date Picker 的 format 文档内容s 47. Button Group 样式 48. text button icon 49. tab scroll 计算有潜在 bug 50. data-table 的 header height 为啥要固定？因为固定列的问题，sticky 解决了就没事 51. scrollbar 在平时不显示用不到的 rail 52. placeholder transition 对 firefox 做兼容 53. 调整 date picker 的尺寸s 54. Select option 右侧 padding 调整 55. Popover arrow shadow 调整 56. Input number 按钮样式调整 57. 一部分组件在 Modal 内部的样式 还差 data table 的选项们 58. 更新 Progress 文档 59. 为所有的数据录入组件的尺寸 60. 审核文档 就这样吧，凑活 61. 调整 transfer 的样式 62. Table cascader 差一点国际化 63. Anchor 初次滚动的逻辑是不是要手动调整一下，现在位置实际上不一致 64. 将所有的 Typography 组件改为非 Functional 的，因为获取不到 context 本身的主题 65. 搞明白 table layout 这个 css 属性是在干什么 66. Icon 颜色 原来我早就解决了，都忘了... 67. Modal 滚动之后的 transform origin 68. Slider 对于 modal 适配 69. table fixed scroll checkbox, not sync 70. Transfer no data 71. Metropolis 从自带字体去掉 72. Input Group 73. Dropdown API 修改为 label + value，目前为止 UI 并没有出现过 key，不能只为了它搞特殊，value 可以，key 甚至会另有作用，现在占用实际是个危险的事情 74. card slot 75. table fixed computed left right 76. gradient text 的切换能解决？目前我想不出解决办法，希望未来 CSS 能增加 gradient 的渐变 77. Auto Complete Group 78. select add tag 79. dynamic input 还差英文文档 80. input 严格受控 81. 搞明白 vue 的 scoped 和 普通的关系 82. Form Item 不返回 true 的时候... 错误信息不会消失，这似乎不太合理? async-validator 的特性 83. Form Item 应该和 Input Group 也契合良好 能用 84. Notification 主题切换需要工作良好 85. Notification 这个东西很特殊...感觉也没那么特殊 86. 文件上传的回调方式改成传对象 87. 抵御外界 CSS 变化，比如 line-height 之类的，需要一个良好的测试机制 88. CSS Font 选择 对英文应该没有那么麻烦，走系统字体就好了，然而对中文又没什么好的解决方案，so 先这个样子，之后再琢磨琢磨 89. 把所有用 $slots 判断的地方都改成 $scopedSlots，[原因](https://vuejs.org/v2/api/#vm-scopedSlots) done 90. 调整默认状态下 button, input 的 icon 的颜色 91. 优化 button 的样式，现在太冗余了，关键是怎么同步按钮的主题变量呢... 92. placeable 按需注册 93. steps 列表优化 94. tabs 列表优化 95. tree 列表优化 96. cascader 列表优化 97. 更多的 tabs 选择 98. 下拉菜单应该给 icon 留空间 99. Form item feedback 好像有点问题，消失的时候，自定义时候 100. Confim 重命名 Dialog 算了不换了，牵扯的地方太多不好改了，confirm 也就凑活吧 101. Dark Debug 3，Safari 你可太秀了...... 102. close-outline icon 103. input + icon 主题切换 transition 有问题!!! 104. auto-complete 自定义元素 demo 有问题 有 pendingData 的时候 preventDefault 105. markdown 渲染缺少空格，修正了 n-select single filterable 时 placeholder 的样式问题 caused by vue compiler `preserveWhitespace: false`, change it to `whitespace: 'condense'` 106. drawer 加上滚动条，以及 overflow auto 的样式 107. 所有弹出的东西改成 body-style 108. size 切换的时候... transfer 动画问题 109. 利用了公用组件的组件样式没办法特殊调教，比如 select 组件自身是没有命名空间的，这个想要单独定制就比较麻烦。先不出来怎么解决 110. treemate 重构 cascader，异步 api 需要更改 111. 样式不能被 cloned，因为 peers 机制 ``` Done // modal transform scale // Notification content close // form required css // Md Loader 对于 strong 的处理 // pref hollowout, cache next bg color // issue fix, add delay prop // add trigger to tooltip // outside click delegate select // DatePicker range Bug // Scrollbar Firefox... // scrollbar 在 resize 之后滚动会有问题 // ResizeObserver Polyfill // Select 需要进一步重构，现在这种状况 collector 在 corner case 中不会调 updated 钩子，要把 key 换成 value ``` ```cache 需要注意的是，以 Base 开头的 CSS 文件并不会确保随着版本的更新保持稳定（我会尽力的保持）。因为它是内部实现的一部分。如果你维持按需引入时升级后样式出现了错误，可以来这里检查一下。虽然把这些公共样式各自打包进每个用到他们的组件是可行的，但是相比于升级的繁琐，我更不喜欢重复的代码。（这不意味着这种解决方案是“更好的”，它只是种选择而已） What should be noted is the CSS files start with 'Base' are not guaranteed to be stable (I'll try not to change them). Because they are parts of internal implementation of the library. If you find import mistakes after upgrade the package, you may have a look at here. It is possible to pack these common styles inside every component using it. However, compared to add routines when upgrading package, I perfer not to import duplicate codes. (It doesn't mean this is a better solution. It is only a choice.) ``` How I want to use styling API ? ```js // index.js import { createApp } from 'vue' import { create, enUS, buttonLight, inputLight } from 'naive-ui' const app = createApp() const naive = create({ // install components globally or import it in other component are both ok // components: [ // Button, // Input // ], styles: [buttonLight, inputLight], locales: [enUS] }) app.use(naive) ``` ## 2020.11.14 是否要给 icon 加上默认的 color transition? 否。前提条件是 svg 在合适的地方用到了 currentColor。 for example: ``` ``` 我期望的是 n-icon 一直跟着外部走，如果外面有 transtion 了那内部其实不需要 transition，不然的话会重叠。如果一定需要 transition 的话应该去保证样式带 color transition。 ================================================ FILE: design-notes/todo.md ================================================ # TODO ## Urgent - message fullscreen - use resolve slot!!! - manual trigger style ## DataTable ## Form - (easy) message support render function ## Popover ## Radio - (easy) Button custom align & width ## Select ## Tabs - (moderate) Left, right tabs ## Tree - (moderate) Use set to check if node is checked or selected internally ## TreeSelect - (moderate) Async ## DatePicker - Do not allow start > end https://github.com/tusen-ai/naive-ui/pull/4853 Later- ================================================ FILE: eslint.config.mjs ================================================ import antfu from '@antfu/eslint-config' export default antfu( { languageOptions: { ecmaVersion: 'latest', }, regexp: false, ignores: [ 'node_modules', 'lib', 'test/unit/coverage', 'src/_deprecated/icons', 'dist', 'es' ] }, { files: ['**/*.demo.vue'], rules: { 'no-console': 'off', 'vue/one-component-per-file': 'off' } }, { files: ['**/*.tsx'], rules: { 'unused-imports/no-unused-imports': 'off' } }, { files: ['**/*'], rules: { 'style/multiline-ternary': 'off', 'style/max-statements-per-line': 'off', 'style/comma-dangle': 'off', 'style/quote-props': 'off', 'jsdoc/require-returns-description': 'off', 'jsdoc/check-param-names': 'off' } } ) ================================================ FILE: esm-test/index.spec.js ================================================ import { NDataTable } from '../dist/index.prod.mjs' import { createApp } from 'vue' // eslint-disable-next-line n/no-exports-assign exports = undefined describe('esm', () => { it('works', () => { const div = document.createElement('div') document.body.appendChild(div) createApp(NDataTable).mount(div) expect(div.innerHTML).toContain('n-data-table') }) }) ================================================ FILE: generic/AvatarGroup.vue ================================================ ================================================ FILE: generic/index.ts ================================================ export { default as NGAvatarGroup } from './AvatarGroup.vue' ================================================ FILE: index.html ================================================ Naive UI
================================================ FILE: package.json ================================================ { "name": "naive-ui", "version": "2.44.1", "packageManager": "pnpm@10.29.2", "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast", "author": "07akioni", "license": "MIT", "homepage": "https://www.naiveui.com", "repository": { "type": "git", "url": "https://github.com/tusen-ai/naive-ui" }, "keywords": [ "naive-ui", "component library", "ui framework", "ui", "vue" ], "sideEffects": false, "main": "lib/index.js", "module": "es/index.mjs", "unpkg": "dist/index.js", "jsdelivr": "dist/index.js", "types": "es/index.d.ts", "files": [ "README.md", "dist", "es", "generic", "lib", "volar.d.ts", "web-types.json" ], "engines": { "node": ">=20" }, "scripts": { "start": "pnpm run dev", "dev": "pnpm run clean && pnpm run gen-version && pnpm run gen-volar-dts && NODE_ENV=development vite", "build:package": "pnpm run gen-version && pnpm run clean && pnpm run gen-volar-dts && tsc -b --force tsconfig.esm.json && tsx scripts/pre-build/pre-cjs-build.ts && tsc -b --force tsconfig.cjs.json && rollup -c && pnpm run test:umd && pnpm run test:esm && pnpm run post-build && rimraf {es,lib}/*.tsbuildinfo", "build:themes": "tsc -b --force themes/tusimple/tsconfig.esm.json && tsc -b --force themes/tusimple/tsconfig.cjs.json", "build:site": "bash ./scripts/pre-build-site/pre-build-site.sh && NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && bash ./scripts/post-build-site/post-build-site.sh", "clean": "rimraf site lib es dist node_modules/naive-ui themes/tusimple/es themes/tusimple/lib", "release:package": "pnpm run test && pnpm run build:package && pnpm publish --no-git-checks", "release:changelog": "tsx scripts/release-changelog.ts", "lint": "pnpm run lint:code && pnpm run lint:type", "lint:type": "pnpm run lint:src-type && pnpm run lint:demo-type", "lint:code": "eslint \"{src,build,scripts,demo}/**/*.{ts,tsx,js,vue,md}\"", "lint:fix": "eslint --fix \"{src,build,scripts,demo}/**/*.{ts,tsx,js,vue,md}\"", "lint:src-type": "tsc -b --force tsconfig.esm.json", "lint:demo-type": "NODE_OPTIONS=--max-old-space-size=4096 vue-tsc -p src/tsconfig.demo.json", "format": "pnpm run format:code && pnpm run format:md && pnpm run lint:fix", "format:code": "prettier --write \"{src,demo,scripts,build}/**/*.{vue,js,ts,tsx}\"", "format:md": "prettier --write --parser markdown --prose-wrap never \"(src|demo)/**/*.md\"", "test": "vitest run", "test:update": "vitest --run --update", "test:cov": "vitest run --coverage", "test:watch": "vitest --watch", "test:umd": "vitest run umd-test/index.spec.js", "test:esm": "vitest run esm-test/index.spec.js", "gen-version": "tsx scripts/gen-version.ts", "gen-volar-dts": "tsx scripts/gen-component-declaration.ts", "post-build": "tsx scripts/post-build/index.ts", "build:site:ts": "bash ./scripts/pre-build-site/pre-build-site.sh && TUSIMPLE=true NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && bash ./scripts/post-build-site/post-build-site.sh", "prepare": "husky", "transpile-docs": "tsx scripts/md-to-vue.ts", "release:site": "TUSIMPLE=true pnpm run build:site && node build-doc/generate-deploy-sh.js && sudo bash build-doc/deploy-doc.sh" }, "web-types": "./web-types.json", "peerDependencies": { "vue": "^3.0.0" }, "dependencies": { "@css-render/plugin-bem": "^0.15.14", "@css-render/vue3-ssr": "^0.15.14", "@types/lodash": "^4.17.20", "@types/lodash-es": "^4.17.12", "async-validator": "^4.2.5", "css-render": "^0.15.14", "csstype": "^3.1.3", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "evtd": "^0.2.4", "highlight.js": "^11.8.0", "lodash": "^4.17.21", "lodash-es": "^4.17.21", "seemly": "^0.3.10", "treemate": "^0.3.11", "vdirs": "^0.1.8", "vooks": "^0.2.12", "vueuc": "^0.4.65" }, "devDependencies": { "@antfu/eslint-config": "^5.3.0", "@babel/core": "^7.28.0", "@babel/generator": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/preset-env": "^7.28.0", "@babel/traverse": "^7.28.0", "@lylajs/web": "^2.1.0", "@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-commonjs": "^28.0.6", "@rollup/plugin-node-resolve": "^16.0.1", "@rollup/plugin-replace": "^6.0.2", "@rollup/plugin-terser": "^0.4.4", "@types/babel__core": "^7.20.5", "@types/babel__generator": "^7.27.0", "@types/babel__traverse": "^7.28.0", "@types/estree": "^1.0.1", "@types/fs-extra": "^11.0.4", "@types/node": "^24.0.12", "@types/superagent": "^8.1.9", "@vicons/fluent": "^0.13.0", "@vicons/ionicons4": "^0.13.0", "@vicons/ionicons5": "^0.13.0", "@vitejs/plugin-vue": "^6.0.0", "@vitest/coverage-v8": "^3.2.4", "@vue/compiler-sfc": "^3.5.21", "@vue/server-renderer": "^3.5.21", "@vue/test-utils": "^2.4.6", "autoprefixer": "^10.4.21", "codesandbox": "^2.2.3", "cssnano": "^7.1.0", "deepmerge": "^4.3.1", "esbuild": "0.25.10", "eslint": "^9.6.0", "express": "^5.1.0", "fast-glob": "^3.3.1", "fflate": "^0.8.2", "fs-extra": "^11.3.0", "grapheme-splitter": "^1.0.4", "husky": "^9.1.7", "inquirer": "^12.7.0", "jsdom": "^27.0.0", "katex": "^0.16.28", "lint-staged": "^16.1.6", "marked": "^12.0.2", "prettier": "^3.6.2", "rimraf": "^6.0.1", "rollup": "^4.45.1", "rollup-plugin-esbuild": "^6.2.1", "superagent": "^10.2.2", "tsx": "^4.20.3", "typescript": "^5.9.2", "vfonts": "^0.0.3", "vite": "^7.0.4", "vitest": "^3.2.4", "vue": "^3.5.21", "vue-router": "^4.5.1", "vue-tsc": "^3.0.7" }, "pnpm": { "overrides": { "cssstyle": "5.2.1" }, "peerDependencyRules": { "ignoreMissing": [ "@babel/core", "postcss", "rollup", "webpack" ] } }, "lint-staged": { "*.js": [ "prettier --write", "eslint --fix" ], "*.ts": [ "prettier --write", "eslint --fix" ], "*.tsx": [ "prettier --write", "eslint --fix" ], "*.vue": [ "prettier --parser=vue --write", "eslint --fix" ], "*.css": [ "prettier --write" ], "*.md": [ "prettier --write --parser markdown --prose-wrap never", "eslint --fix" ] } } ================================================ FILE: playground/collect-vars.js ================================================ const varRegex = /var\(--([^)]+)\)/g function getVars (input) { console.log( Array.from( new Set(Array.from(input.matchAll(varRegex)).map((v) => '// --' + v[1])) ) .sort() .join('\n') ) } getVars(document.body.textContent) ================================================ FILE: playground/ssr/app.js ================================================ import { h, defineComponent, ref } from 'vue' import { NButton } from 'naive-ui' const App = defineComponent({ setup () { return { count: ref(0) } }, render () { return [ h( NButton, { onClick: () => this.count++ }, { default: () => this.count } ) ] } }) export default App ================================================ FILE: playground/ssr/build.sh ================================================ webpack ./client.js --mode=development --output-filename=client.js webpack --config ./webpack.config.server.js ================================================ FILE: playground/ssr/client.js ================================================ import { createApp } from 'vue' import App from './app' createApp(App).mount('#app') ================================================ FILE: playground/ssr/pre-build.sh ================================================ # make sure cwd is the sh's dir cd ./../../ ./scripts/pre-build-site/pre-build-site.sh ================================================ FILE: playground/ssr/readme.md ================================================ You need to install `webpack` & `webpack-cli` globally. ``` ./pre-build.sh ./build.sh node dist/server.js # browse localhost:8086 ``` ================================================ FILE: playground/ssr/server.js ================================================ const fs = require('fs') const path = require('path') const express = require('express') const { createSSRApp } = require('vue') const { renderToString } = require('@vue/server-renderer') const { setup } = require('@css-render/vue3-ssr') const { default: App } = require('./app') const server = express() // serve js server.use((req, res, next) => { if (req.path.endsWith('.js')) { // the file will be in dist folder after build // so no `dist` is required in path.resolve res.send(fs.readFileSync(path.resolve(__dirname, 'client.js'), 'utf8')) } else { next() } }) // serve html server.use((req, res, next) => { if (req.path.endsWith('.js')) { next() return } const ssrApp = createSSRApp(App) res.write('SSR Test') const { collect } = setup(ssrApp) renderToString(ssrApp).then((html) => { res.write(collect()) res.write(`
${html}
`) res.write('') res.end() }) }) server.listen(8086) ================================================ FILE: playground/ssr/webpack.config.server.js ================================================ module.exports = { mode: 'development', externalsPresets: { node: true }, externals: [/^[@/a-z\-0-9]+$/], target: 'node', entry: './server.js', output: { filename: 'server.js', library: { type: 'commonjs2' } } } ================================================ FILE: playground/testAsyncValidator.js ================================================ const Schema = require('async-validator') const descriptor = { value: { type: 'string', required: true, validator: () => true } } const validator = new Schema(descriptor) validator.validate({ value: '123' }, (errors, fields) => { console.log('wtf') }) ================================================ FILE: playground/testColor.js ================================================ const tinyColor = require('tinycolor2') const red = tinyColor('#ce347c').getBrightness() const green = tinyColor('#00c060').getBrightness() const orange = tinyColor('#EF8745').getBrightness() const blue = tinyColor('#2090f0').getBrightness() console.log(red, green, orange, blue) ================================================ FILE: playground/uploadServer.js ================================================ const express = require('express') const multer = require('multer') const cors = require('cors') const path = require('path') const fs = require('fs') const app = express() const dest = path.resolve(__dirname, 'temp') const upload = multer({ dest }) app.options('/upload-test', cors()) app.post( '/upload-test', cors(), function (req, res, next) { req.on('close', () => { console.log('文件上传取消') }) req.on('error', () => { console.log('文件上传出错') }) next() }, upload.any(), function (req, res, next) { if (!fs.existsSync(dest)) fs.mkdirSync(dest) console.log(req.headers) console.log(req.body) res.send('very good') } ) app.listen(3000) ================================================ FILE: postcss.config.js ================================================ // this file is used by vite, keep it here module.exports = { plugins: [ require('autoprefixer'), require('cssnano')({ preset: [ 'default', { normalizeWhitespace: false, colormin: false } ] }) ] } ================================================ FILE: rollup.config.mjs ================================================ import path from 'node:path' import { fileURLToPath } from 'node:url' import babel from '@rollup/plugin-babel' import commonjs from '@rollup/plugin-commonjs' import nodeResolve from '@rollup/plugin-node-resolve' import replace from '@rollup/plugin-replace' import terser from '@rollup/plugin-terser' import merge from 'deepmerge' import { defineConfig } from 'rollup' import esbuild from 'rollup-plugin-esbuild' const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) const extensions = ['.mjs', '.js', '.json', '.ts'] const baseConfig = defineConfig({ input: path.resolve('./src/index.ts'), external: ['vue'], plugins: [ nodeResolve({ extensions }), esbuild({ tsconfig: path.resolve(__dirname, 'tsconfig.esbuild.json'), target: 'esnext', sourceMap: true }), babel({ extensions, babelHelpers: 'bundled' }), commonjs() ] }) const umdConfig = defineConfig({ output: { name: 'naive', format: 'umd', exports: 'named', globals: { vue: 'Vue' } } }) const esmConfig = defineConfig({ output: { format: 'esm' } }) const devConfig = defineConfig({ plugins: [ replace({ values: { __DEV__: JSON.stringify(true), 'process.env.NODE_ENV': JSON.stringify('development') }, preventAssignment: true }) ] }) const umdDevOutputConfig = defineConfig({ output: { file: path.resolve('dist/index.js') } }) const esmDevOutputConfig = defineConfig({ output: { file: path.resolve('dist/index.mjs') } }) const prodConfig = defineConfig({ plugins: [ replace({ values: { __DEV__: JSON.stringify(false), 'process.env.NODE_ENV': JSON.stringify('production') }, preventAssignment: true }), terser() ] }) const umdProdOutputConfig = defineConfig({ output: { file: path.resolve('dist/index.prod.js') } }) const esmProdOutputConfig = defineConfig({ output: { file: path.resolve('dist/index.prod.mjs') } }) export default [ // umd dev merge.all([baseConfig, umdConfig, devConfig, umdDevOutputConfig]), // umd prod merge.all([baseConfig, umdConfig, prodConfig, umdProdOutputConfig]), // esm dev merge.all([baseConfig, esmConfig, devConfig, esmDevOutputConfig]), // esm prod merge.all([baseConfig, esmConfig, prodConfig, esmProdOutputConfig]) ] ================================================ FILE: scripts/gen-component-declaration.ts ================================================ import { existsSync } from 'node:fs' import { readFile, writeFile } from 'node:fs/promises' import path from 'node:path' import process from 'node:process' import * as globalComponents from '../src/components' const TYPE_ROOT = process.cwd() // XButton is for tsx type checking, shouldn't be exported const excludeComponents: string[] = ['NxButton'] function exist(path: string): boolean { return existsSync(path) } function parseComponentsDeclaration(code: string): Record { if (!code) { return {} } return Object.fromEntries( Array.from(code.matchAll(/(? [i[1], i[2]] ) ) } async function generateComponentsType(): Promise { const components: Record = {} Object.keys(globalComponents).forEach((key: string) => { const entry = `(typeof import('naive-ui'))['${key}']` if (key.startsWith('N') && !excludeComponents.includes(key)) { components[key] = entry } }) const originalContent = exist(path.resolve(TYPE_ROOT, 'volar.d.ts')) ? await readFile(path.resolve(TYPE_ROOT, 'volar.d.ts'), 'utf-8') : '' const originImports = parseComponentsDeclaration(originalContent) const lines = Object.entries({ ...originImports, ...components }) .filter(([name]: [string, string]) => { return components[name] }) .map(([name, v]: [string, string]) => { if (!/^\w+$/.test(name)) { name = `'${name}'` } return `${name}: ${v}` }) const code = `// Auto generated component declarations declare module 'vue' { export interface GlobalComponents { ${lines.join('\n ')} } } export {} ` if (code !== originalContent) { await writeFile(path.resolve(TYPE_ROOT, 'volar.d.ts'), code, 'utf-8') } } generateComponentsType() ================================================ FILE: scripts/gen-css-vars-dts.ts ================================================ import { promises as fs } from 'node:fs' import path from 'node:path' import process from 'node:process' import { walk } from './utils' import { collectVars, genDts } from './utils/collect-vars' const srcPath = path.resolve(process.cwd(), 'src') ;(async () => { for await (const p of walk(srcPath)) { if (p.endsWith('.cssr.ts')) { const dts = genDts(collectVars(await fs.readFile(p, 'utf-8'))) console.log(p, dts) } } })() ================================================ FILE: scripts/gen-version.ts ================================================ import { writeFileSync } from 'node:fs' import { resolve } from 'node:path' import { cwd } from 'node:process' import packageJson from '../package.json' with { type: 'json' } writeFileSync( resolve(cwd(), 'src', 'version.ts'), `export default '${packageJson.version}'\n` ) ================================================ FILE: scripts/md-to-vue.ts ================================================ import { argv } from 'node:process' import { convertFilesByComponentName } from './utils/loader' async function translateMdToVue(): Promise { const componentName = argv[2] await convertFilesByComponentName(componentName) } translateMdToVue() ================================================ FILE: scripts/post-build/complete-path.ts ================================================ import path from 'node:path' import process from 'node:process' import * as babel from '@babel/core' import glob from 'fast-glob' import fs from 'fs-extra' interface FormatConfig { root: string parse: (code: string, filePath: string, currentDir: string) => Promise } const formatConfigs: Record = { es: { root: path.join(process.cwd(), 'es'), async parse(code: string, filePath: string, currentDir: string) { const suffix = '.mjs' const result = await babel.transformAsync(code, { root: this.root, babelrc: false, filename: filePath, sourceType: 'module', plugins: [ { visitor: { ImportDeclaration: ({ node }) => { const source = node.source.value const parsedSource = parseSource(source, currentDir, suffix) if (parsedSource) { node.source.value = parsedSource } }, ExportNamedDeclaration: ({ node }) => { if (node.source) { const source = node.source.value const parsedSource = parseSource(source, currentDir, suffix) if (parsedSource) { node.source.value = parsedSource } } }, ExportAllDeclaration: ({ node }) => { const source = node.source.value const parsedSource = parseSource(source, currentDir, suffix) if (parsedSource) { node.source.value = parsedSource } } } } ] }) const newFilePath = replaceExtname(filePath, suffix) await fs.writeFile(newFilePath, result?.code || code) await fs.unlink(filePath) } }, lib: { root: path.join(process.cwd(), 'lib'), async parse(code: string, filePath: string, currentDir: string) { const suffix = '.js' const result = await babel.transformAsync(code, { root: this.root, babelrc: false, filename: filePath, plugins: [ { visitor: { CallExpression: ({ node }) => { if ( node.callee.type === 'Identifier' && node.callee.name === 'require' ) { const firstArg = node.arguments[0] if (firstArg.type === 'StringLiteral') { const source = firstArg.value const parsedSource = parseSource(source, currentDir, suffix) if (parsedSource) { firstArg.value = parsedSource } } } } } } ] }) await fs.writeFile(filePath, result?.code || code) } } } export async function completePath(formats: ('es' | 'lib')[]): Promise { await Promise.all( formats.map(async (format) => { const config = formatConfigs[format] const files = await glob('**/*.js', { cwd: config.root, absolute: true, onlyFiles: true }) await Promise.all( files.map(async (filePath) => { const code = await fs.readFile(filePath, 'utf-8') await config.parse(code, filePath, path.dirname(filePath)) }) ) }) ) } function parseSource( source: string, currentDir: string, suffix: string ): string | null { if (source.startsWith('.')) { const fullPath = joinPath(currentDir, source) return fs.existsSync(fullPath) ? path.extname(fullPath) ? source : joinPath(source, `index${suffix}`) : source + suffix } else { return source } } function replaceExtname(filePath: string, ext: string): string { const oldExt = path.extname(filePath) if (!oldExt) return filePath + ext return joinPath(path.dirname(filePath), path.basename(filePath, oldExt) + ext) } const normalizePath = (p: string): string => p.replace(/\\/g, '/') function joinPath(firstPath: string, ...restPath: string[]): string { const joinedPath = normalizePath(path.join(firstPath, ...restPath)) return firstPath.startsWith('./') ? `./${joinedPath}` : joinedPath } ================================================ FILE: scripts/post-build/gen-web-types.ts ================================================ import fs from 'node:fs' import path from 'node:path' import process, { argv } from 'node:process' import { kebabCase } from 'lodash' import * as components from '../../src/components' import version from '../../src/version' const baseDir = path.resolve(process.cwd()) interface WebTypesScaffold { $schema: string framework: string name: string version: string 'js-types-syntax': string contributions: { html: { 'vue-components': VueComponent[] } } } interface VueComponent { name: string description?: string 'doc-url'?: string source: { symbol: string } slots: Slot[] attributes: any[] props: Prop[] js: { events: Event[] } } interface Slot { name: string 'doc-url'?: string description?: string type?: string 'description-sections'?: { since: string } } interface Prop { name: string 'doc-url'?: string type?: string description?: string default?: string 'description-sections'?: { since: string } } interface Event { name: string 'doc-url'?: string description?: string type?: string 'description-sections'?: { since: string } } export function genWebTypes(): void { const vueComponents: VueComponent[] = [] const scaffold: WebTypesScaffold = { $schema: 'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json', framework: 'vue', name: 'naive-ui', version, 'js-types-syntax': 'typescript', contributions: { html: { 'vue-components': vueComponents } } } const ignoredPropNames = ['theme', 'themeOverrides', 'builtinThemeOverrides'] Object.entries(components).forEach( ([exportName, component]: [string, any]) => { if (exportName[0] !== 'N') return if (exportName.startsWith('Nx')) return const { props: docProps, slots: docSlots, description, docUrl } = loadDocs(component.name) const { props: componentProps } = component const name = exportName const slots: Slot[] = [] const attributes: any[] = [] const props: Prop[] = [] const events: Event[] = [] componentProps && Object.entries(componentProps).forEach( ([propName, prop]: [string, any]) => { if (propName.startsWith('internal')) return if (ignoredPropNames.includes(propName)) return if (propName.startsWith('on') && /[A-Z]/.test(propName[2])) { // is event const event: Event = { name: kebabCase(propName.slice(2)), 'doc-url': docUrl } assignDocs(event, docProps[kebabCase(propName)]) delete docProps[kebabCase(propName)] events.push(event) } else { const resultProp: Prop = { name: kebabCase(propName), 'doc-url': docUrl } const type = prop ? getType(prop) : null if (type !== null) { resultProp.type = type } assignDocs(resultProp, docProps[resultProp.name]) delete docProps[resultProp.name] props.push(resultProp) } } ) // Add the rest of the props and events from docs for (const name in docProps) { const prop: Prop = { name, 'doc-url': docUrl } assignDocs(prop, docProps[name]) if (prop.name.startsWith('on-')) { ;(prop as any).name = prop.name.substring(3) events.push(prop as any) } else { props.push(prop) } } for (const name in docSlots) { const slot: Slot = { name, 'doc-url': docUrl } assignDocs(slot, docSlots[name]) slots.push(slot) } vueComponents.push({ name, description, 'doc-url': docUrl, source: { symbol: exportName }, slots, attributes, props, js: { events } }) } ) fs.writeFileSync( path.resolve(process.cwd(), 'web-types.json'), JSON.stringify(scaffold, null, 2), { encoding: 'utf-8' } ) function getType(prop: any): string | null { if (typeof prop !== 'object' && typeof prop !== 'function') { console.error(`invalid prop: ${prop}`) return null } if ('type' in prop) { return _getType(prop.type) } if ('validator' in prop) { return null } return _getType(prop) } function _getType(propType: any): string | null { if (Array.isArray(propType)) { const types = propType.map(mapType) if (types.includes(null)) return null return types.join(' | ') } return mapType(propType) } function mapType(type: any): string | null { const typeMap = new Map([ [String, 'string'], [Number, 'number'], [Boolean, 'boolean'], [Array, 'Array'], [Object, 'object'], [Function, 'Function'], [Date, 'Date'] ]) if (typeMap.has(type)) { return typeMap.get(type)! } console.error(`unknown type ${type}`) return null } function loadDocs(componentName: string): { props: Record slots: Record description?: string docUrl?: string } { let componentPath = kebabCase(componentName) switch (componentPath) { case 'row': case 'col': componentPath = 'legacy-grid' break case 'step': componentPath = 'steps' break case 'h-1': case 'h-2': case 'h-3': case 'h-4': case 'h-5': case 'h-6': case 'text': case 'p': case 'ul': case 'ol': case 'li': case 'hr': case 'a': case 'blockquote': componentPath = 'typography' break case 'th': case 'tr': case 'td': case 'thead': case 'tbody': componentPath = 'table' break case 'tab-pane': case 'tab': componentPath = 'tabs' break } let docsPath: string | undefined do { docsPath = path.resolve( baseDir, `src/${componentPath}/demos/enUS/index.demo-entry.md` ) if (fs.existsSync(docsPath)) break componentPath = componentPath.substring( 0, Math.max(0, componentPath.lastIndexOf('-')) ) } while (componentPath) if (!componentPath || !docsPath) { console.log(`Docs not found for ${componentName}`) return { props: {}, slots: {} } } const docsFile = fs.readFileSync(docsPath).toString() const props = extractSectionTable('Props') const slots = extractSectionTable('Slots') const description = extractComponentDescription() return { props, slots, description, docUrl: `https://www.naiveui.com/en-US/os-theme/components/${componentPath}` } function extractComponentDescription(): string | undefined { const description = docsFile.match( new RegExp(`#.*${componentName}\n(.*)## Demos`, 's') ) if (description) { return description[1].trim() } } function extractSectionTable(sectionName: string): Record { const result: Record = {} try { const sectionHeaderRegex = new RegExp( `##.*${componentName}[, ].*${sectionName}\n` ) const location = docsFile.match(sectionHeaderRegex) if (!location || location.index === undefined || location.index < 0) return result let end = docsFile.indexOf('##', location.index + 3) if (end < 0) end = docsFile.length const rowRegex = /\|((?:\\\||[^|])+)/g const sectionContents = docsFile.substring( location.index + location[0].length, end ) const table = sectionContents .split('\n') .map(it => it.trim()) .filter(it => !!it && !it.includes('| ---') && it.startsWith('|')) .map((it) => { const row = it.match(rowRegex) if (row === null) throw new Error(`Failed to match: ${it}`) return row.map(it => it.substring(1).trim()) }) if (table.length > 0) { if (table[0][0] !== 'Name') { throw new Error(`Bad table ${sectionName} in ${componentName}`) } for (let i = 1; i < table.length; i++) { const row = table[i] const name = row[0] const info: Record = {} for (let j = 1; j < row.length; j++) { info[table[0][j].toLowerCase()] = row[j] } result[name] = info } } } catch (e) { console.error( `Failed to build table info for section ${sectionName} of ${componentName} under ${docsPath}`, e ) } return result } } function assignDocs(target: any, docs: any): void { if (!docs) return if (docs.parameters) { // For slot const type = strip(strip(docs.parameters, '`'), '(', ')') const objDefStart = type ? type.indexOf('{') : -1 if (objDefStart >= 0) { target.type = type.substring(objDefStart).replaceAll('\\|', '|') } } if (docs.type) { // For props and events target.type = strip(docs.type, '`').replaceAll('\\|', '|') } if (docs.description) { target.description = docs.description } if (docs.default) { target.default = strip(docs.default, '`') } if (docs.version) { target['description-sections'] = { since: docs.version } } } function strip(str: string, prefix: string, suffix?: string): string { if (!str) return str if (!suffix) suffix = prefix if (str.startsWith(prefix) && str.endsWith(suffix)) { return str.substring(1, str.length - 1).trim() } return str } } if (import.meta.url === `file://${argv[1]}`) { genWebTypes() } ================================================ FILE: scripts/post-build/index.ts ================================================ import { outDirs, replaceDefine, srcDir } from '../utils' import { completePath } from './complete-path' import { genWebTypes } from './gen-web-types' import { terseCssr } from './terse-cssr' ; (async () => { await terseCssr() await replaceDefine(outDirs, { __DEV__: 'process.env.NODE_ENV !== \'production\'' }) await replaceDefine([srcDir], { // the sequence is crucial '\'lodash\'': '\'lodash-es\'' }) // complete require and import source path await completePath(['es']) // generate web-types.json for webstorm & vetur // web-types.json is only a very loose description for auto-complete // vscode is a much better choice genWebTypes() })() ================================================ FILE: scripts/post-build/terse-cssr.ts ================================================ import { promises as fs } from 'node:fs' import { argv } from 'node:process' import { terseCssr as terseCssrUtil } from '../../build/utils/terse-cssr' import { outDirs, walk } from '../utils' export async function terseCssr(): Promise { for (const dir of outDirs) { for await (const p of walk(dir)) { if (p.includes('.cssr.js')) { const code = await fs.readFile(p, 'utf-8') await fs.writeFile(p, terseCssrUtil(code)) } } } } if (import.meta.url === `file://${argv[1]}`) { terseCssr() } ================================================ FILE: scripts/post-build-site/post-build-site.sh ================================================ cp site/index.html site/404.html rm -rf node_modules/naive-ui ================================================ FILE: scripts/pre-build/pre-cjs-build.ts ================================================ import { replaceDefine, srcDir } from '../utils' ; (async () => { await replaceDefine([srcDir], { '\'lodash-es\'': '\'lodash\'' }) })() ================================================ FILE: scripts/pre-build-site/pre-build-site.sh ================================================ if ! [[ -x $(command -v pnpm) ]]; then curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6 fi pnpm run build:package pnpm pack UI_PACKAGE_NAME=$(ls | grep naive-ui) tar -xzvf $UI_PACKAGE_NAME mv package node_modules/naive-ui rm $UI_PACKAGE_NAME ================================================ FILE: scripts/release-changelog.ts ================================================ import fs from 'node:fs' import path from 'node:path' import { env } from 'node:process' import url from 'node:url' import inquirer from 'inquirer' import request from 'superagent' const __dirname = url.fileURLToPath(new URL('.', import.meta.url)) const { DINGTALK_TOKEN, DINGTALK_TOKEN_2, DINGTALK_TOKEN_3, DINGTALK_TOKEN_4, DINGTALK_TOKEN_5, DINGTALK_TOKEN_6, DINGTALK_TOKEN_7 } = env const { DISCORD_TOKEN } = env async function releaseChangelogToDingTalk(): Promise { const allLog = fs .readFileSync(path.resolve(__dirname, '../CHANGELOG.zh-CN.md'), 'utf-8') .split(/^## /gm)[1] const changelog = allLog .replace(/(^.*?\n)/g, '') .replace(/^##/gm, '') .replace(/\[([^\]]+)\]\([^)]+\)/g, '[$1]') const number = allLog.split(/^(.*)$/m)[1] const title = `变更日志 ${number.trim()}` const text = `${changelog.trim()}\n\n完整信息见 https://github.com/tusen-ai/naive-ui/blob/main/CHANGELOG.zh-CN.md\n` await inquirer .prompt([ { type: 'confirm', name: 'release-changelog', message: `发布以下变更日志到钉钉群：\n\n${title}\n\n${text}` } ]) .then(async (ans) => { if (ans['release-changelog']) { for (const token of [ DINGTALK_TOKEN, DINGTALK_TOKEN_2, DINGTALK_TOKEN_3, DINGTALK_TOKEN_4, DINGTALK_TOKEN_5, DINGTALK_TOKEN_6, DINGTALK_TOKEN_7 ]) { if (token) { await request .post('https://oapi.dingtalk.com/robot/send') .query({ access_token: token }) .type('application/json') .send({ msgtype: 'markdown', markdown: { title, text: `${title}\n\n${text}` } }) .then((res) => { console.log(res.text) }) } } } }) } async function releaseChangelogToDiscord(): Promise { const changelog = fs .readFileSync(path.resolve(__dirname, '../CHANGELOG.en-US.md'), 'utf-8') .split(/^## /gm)[1] .replace(/^##/gm, '') .replace(/\[([^\]]+)\]\([^)]+\)/g, '[$1]') const message = `Changelog ${changelog.trim()}\n\nSee https://github.com/tusen-ai/naive-ui/blob/main/CHANGELOG.en-US.md for details.\n` await inquirer .prompt([ { type: 'confirm', name: 'release-changelog', message: `发布以下变更日志到 Discord：\n\n${message}` } ]) .then((ans) => { if (ans['release-changelog']) { ;(async () => { if (DISCORD_TOKEN) { for (let i = 0; i < message.length; i += 1800) { const part = message.slice(i, i + 1800) await request .post(`https://discord.com/api/webhooks/${DISCORD_TOKEN}`) .type('application/json') .send({ content: part }) .then(() => { console.log('done') }) .catch((e) => { console.error(e) console.log('Error happens.') }) } } })() } }) } ;(async () => { await releaseChangelogToDingTalk() await releaseChangelogToDiscord() })() ================================================ FILE: scripts/utils/collect-vars.ts ================================================ const pattern = /var\(([^)]+)\)/g const patternDetail = /var\(([^)]+)\)/ const commentPattern = /^( *)(\*|(\S\S)|(\S\*))/g export function collectVars(code: string): string[] { const vars = new Set() const lines = code.split('\n') lines.forEach((line) => { if (line.match(commentPattern)) { return } const result = line.match(pattern) if (result) { result.forEach((varExpr) => { const match = varExpr.match(patternDetail) if (match) vars.add(match[1]) }) } }) return Array.from(vars).sort() } export function genDts(vars: string[]): string { console.log(vars) return `interface CssVars { ${vars.map(v => ` '${v}': string`).join('\n')} }` } ================================================ FILE: scripts/utils/index.ts ================================================ import { promises as fs } from 'node:fs' import { join, resolve } from 'node:path' import process from 'node:process' export async function* walk(dir: string): AsyncGenerator { for await (const d of await fs.opendir(dir)) { const entry = join(dir, d.name) if (d.isDirectory()) { yield* walk(entry) } else if (d.isFile()) { yield entry } } } export const outDirs = ['es', 'lib'].map(d => resolve(process.cwd(), d)) export const srcDir = resolve(process.cwd(), 'src') export { replaceDefine } from './replace-define' ================================================ FILE: scripts/utils/loader.ts ================================================ import type { TokensList } from 'marked' import path from 'node:path' import process from 'node:process' import fs from 'fs-extra' import { marked } from 'marked' const fileRegex = /\.demo\.md$/ interface DemoParts { template: string | null script: string | null style: string | null title: string | null content: string | null } interface FileInfo { path: string dir: string file: string name: string } function getPartsOfMdDemo(tokens: TokensList): DemoParts { let template = null let script = null let style = null let title = null let content = null for (const token of tokens) { if (token.type === 'heading' && token.depth === 1) { title = token.text } else if ( token.type === 'code' && (token.lang === 'template' || token.lang === 'html') ) { template = token.text } else if ( token.type === 'code' && (token.lang === 'script' || token.lang === 'js' || token.lang === 'ts') ) { script = token.text } else if ( token.type === 'code' && (token.lang === 'style' || token.lang === 'css') ) { style = token.text } else if (token.type === 'paragraph') { content = token.text } } return { template, script, style, title, content } } function createBlockTemplate( tag: string, content: string, attrs?: Record ): string { const attrsStr = attrs ? Object.keys(attrs).reduce((attrsStr, key) => { return `${attrsStr} ${key}="${attrs[key]}"` }, '') : '' return `<${tag}${attrsStr}>\n${content}\n` } async function loadFile(filepath: string): Promise { if (fs.existsSync(filepath)) { return await fs.readFile(filepath, 'utf-8') } return undefined } async function loadAllMdFile(filePathArr: string[]): Promise { const filesArr: FileInfo[] = [] for (let i = 0; i < filePathArr.length; i++) { const filePath = filePathArr[i] if (fs.existsSync(filePath)) { const files = await fs.readdir(filePath) const filesObjArr = files .filter(file => fileRegex.test(file)) .map((file) => { const index = file.lastIndexOf('.') return { path: `${filePath}/${file}`, dir: filePath, file, name: file.slice(0, index) } }) filesArr.push(...filesObjArr) } } return filesArr } async function updateIndexEntryDemo(file: FileInfo): Promise { let indexFileContent = await loadFile( path.resolve(file.dir, './index.demo-entry.md') ) if (indexFileContent) { const index = file.name.indexOf('.') const name = file.name.slice(0, index) indexFileContent = indexFileContent.replace(name, `${name}.vue`) fs.writeFileSync( path.resolve(file.dir, './index.demo-entry.md'), indexFileContent ) } } const LINE_SPACE = '\n\n' async function transformMdToVueAndUpdateEntryFile( files: FileInfo[] ): Promise { for (const file of files) { const fileString = await loadFile(file.path) if (fileString) { const tokens = marked.lexer(fileString) const parts = getPartsOfMdDemo(tokens) const vueDemoBlocks: string[] = [] if (parts.title || parts.content) { vueDemoBlocks.push( createBlockTemplate( 'markdown', `# ${parts.title}${parts.content ? `${LINE_SPACE}${parts.content}` : ''}` ) ) } if (parts.template) { vueDemoBlocks.push(createBlockTemplate('template', parts.template)) } if (parts.script) { vueDemoBlocks.push( createBlockTemplate('script', parts.script, { lang: 'ts' }) ) } if (parts.style) { vueDemoBlocks.push(createBlockTemplate('style', parts.style)) } await fs.remove(file.path) await fs.ensureDir(file.dir) fs.writeFileSync( path.resolve(file.dir, `./${file.name}.vue`), `${vueDemoBlocks.join(LINE_SPACE)}\n` ) // should be able to be modified together await updateIndexEntryDemo(file) } } } const COMPONENT_ROOT = path.resolve(process.cwd(), 'src') export async function convertFilesByComponentName( componentName: string ): Promise { const folders = ['zhCN', 'enUS'].map(item => path.resolve(COMPONENT_ROOT, `${componentName}/demos/${item}`) ) if (folders.length) { const files = await loadAllMdFile(folders) transformMdToVueAndUpdateEntryFile(files) } } ================================================ FILE: scripts/utils/replace-define.ts ================================================ import { promises as fs } from 'node:fs' import { walk } from '.' export async function replaceDefine( dirs: string[], defines: Record ): Promise { const defineKeys = Object.keys(defines) const patterns: Record = {} defineKeys.forEach((key) => { patterns[key] = new RegExp(key, 'g') }) for (const dir of dirs) { for await (const p of walk(dir)) { if (p.endsWith('.vue')) continue let code = await fs.readFile(p, 'utf-8') for (const key of defineKeys) { const pattern = patterns[key] if (pattern.test(code)) { code = code.replace(pattern, defines[key]) } } await fs.writeFile(p, code) } } } ================================================ FILE: src/_internal/README.md ================================================ Themeable components: - selection - select-menu - clear ================================================ FILE: src/_internal/clear/index.ts ================================================ export { default } from './src/Clear' ================================================ FILE: src/_internal/clear/src/Clear.tsx ================================================ import type { PropType } from 'vue' import { defineComponent, h, toRef } from 'vue' import { useStyle } from '../../../_mixins' import { resolveSlot } from '../../../_utils' import { NBaseIcon } from '../../icon' import NIconSwitchTransition from '../../icon-switch-transition' import { ClearIcon } from '../../icons' import style from './styles/index.cssr' export default defineComponent({ name: 'BaseClear', props: { clsPrefix: { type: String, required: true }, show: Boolean, onClear: Function as PropType<(e: MouseEvent) => void> }, setup(props) { useStyle('-base-clear', style, toRef(props, 'clsPrefix')) return { handleMouseDown(e: MouseEvent) { e.preventDefault() } } }, render() { const { clsPrefix } = this return (
{{ default: () => { return this.show ? (
{resolveSlot(this.$slots.icon, () => [ {{ default: () => }} ])}
) : (
{this.$slots.placeholder?.()}
) } }}
) } }) ================================================ FILE: src/_internal/clear/src/styles/index.cssr.ts ================================================ import { iconSwitchTransition } from '../../../../_styles/transitions/icon-switch.cssr' import { c, cB, cE } from '../../../../_utils/cssr' // vars: // --n-bezier // --n-clear-color // --n-clear-size // --n-clear-color-hover // --n-clear-color-pressed export default cB('base-clear', ` flex-shrink: 0; height: 1em; width: 1em; position: relative; `, [ c('>', [ cE('clear', ` font-size: var(--n-clear-size); height: 1em; width: 1em; cursor: pointer; color: var(--n-clear-color); transition: color .3s var(--n-bezier); display: flex; `, [ c('&:hover', ` color: var(--n-clear-color-hover)!important; `), c('&:active', ` color: var(--n-clear-color-pressed)!important; `) ]), cE('placeholder', ` display: flex; `), cE('clear, placeholder', ` position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); `, [ iconSwitchTransition({ originalTransform: 'translateX(-50%) translateY(-50%)', left: '50%', top: '50%' }) ]) ]) ]) ================================================ FILE: src/_internal/close/index.ts ================================================ export { default as NBaseClose } from './src/Close' ================================================ FILE: src/_internal/close/src/Close.tsx ================================================ import type { PropType } from 'vue' import { defineComponent, h, toRef } from 'vue' import { useStyle } from '../../../_mixins' import { NBaseIcon } from '../../icon' import { CloseIcon } from '../../icons' import style from './styles/index.cssr' export default defineComponent({ name: 'BaseClose', props: { isButtonTag: { type: Boolean, default: true }, clsPrefix: { type: String, required: true }, disabled: { type: Boolean, default: undefined }, focusable: { type: Boolean, default: true }, round: Boolean, onClick: Function as PropType<(e: MouseEvent) => void>, absolute: Boolean }, setup(props) { useStyle('-base-close', style, toRef(props, 'clsPrefix')) return () => { const { clsPrefix, disabled, absolute, round, isButtonTag } = props const Tag = isButtonTag ? 'button' : 'div' return ( { if (!props.focusable) { e.preventDefault() } }} onClick={props.onClick} > {{ default: () => }} ) } } }) ================================================ FILE: src/_internal/close/src/styles/index.cssr.ts ================================================ import { c, cB, cM, cNotM } from '../../../../_utils/cssr' // vars: // --n-close-border-radius // --n-close-color-hover // --n-close-color-pressed // --n-close-icon-color // --n-close-icon-color-hover // --n-close-icon-color-pressed // --n-close-icon-color-disabled export default cB('base-close', ` display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: transparent; color: var(--n-close-icon-color); border-radius: var(--n-close-border-radius); height: var(--n-close-size); width: var(--n-close-size); font-size: var(--n-close-icon-size); outline: none; border: none; position: relative; padding: 0; `, [ cM('absolute', ` height: var(--n-close-icon-size); width: var(--n-close-icon-size); `), c('&::before', ` content: ""; position: absolute; width: var(--n-close-size); height: var(--n-close-size); left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); transition: inherit; border-radius: inherit; `), cNotM('disabled', [ c('&:hover', ` color: var(--n-close-icon-color-hover); `), c('&:hover::before', ` background-color: var(--n-close-color-hover); `), c('&:focus::before', ` background-color: var(--n-close-color-hover); `), c('&:active', ` color: var(--n-close-icon-color-pressed); `), c('&:active::before', ` background-color: var(--n-close-color-pressed); `) ]), cM('disabled', ` cursor: not-allowed; color: var(--n-close-icon-color-disabled); background-color: transparent; `), cM('round', [ c('&::before', ` border-radius: 50%; `) ]) ]) ================================================ FILE: src/_internal/fade-in-expand-transition/index.ts ================================================ export { default } from './src/FadeInExpandTransition' ================================================ FILE: src/_internal/fade-in-expand-transition/src/FadeInExpandTransition.ts ================================================ import type { PropType, TransitionProps } from 'vue' import { defineComponent, h, Transition, TransitionGroup } from 'vue' export default defineComponent({ name: 'FadeInExpandTransition', props: { appear: Boolean, group: Boolean, mode: String as PropType<'in-out' | 'out-in' | 'default'>, onLeave: Function, onAfterLeave: Function, onAfterEnter: Function, width: Boolean, // reverse mode is only used in tree // it make it from expanded to collapsed after mounted reverse: Boolean }, setup(props, { slots }) { function handleBeforeLeave(el: HTMLElement): void { if (props.width) { el.style.maxWidth = `${el.offsetWidth}px` } else { el.style.maxHeight = `${el.offsetHeight}px` } void el.offsetWidth } function handleLeave(el: HTMLElement): void { if (props.width) { el.style.maxWidth = '0' } else { el.style.maxHeight = '0' } void el.offsetWidth const { onLeave } = props if (onLeave) onLeave() } function handleAfterLeave(el: HTMLElement): void { if (props.width) { el.style.maxWidth = '' } else { el.style.maxHeight = '' } const { onAfterLeave } = props if (onAfterLeave) onAfterLeave() } function handleEnter(el: HTMLElement): void { el.style.transition = 'none' if (props.width) { const memorizedWidth = el.offsetWidth el.style.maxWidth = '0' void el.offsetWidth el.style.transition = '' el.style.maxWidth = `${memorizedWidth}px` } else { if (props.reverse) { el.style.maxHeight = `${el.offsetHeight}px` void el.offsetHeight el.style.transition = '' el.style.maxHeight = '0' } else { const memorizedHeight = el.offsetHeight el.style.maxHeight = '0' void el.offsetWidth el.style.transition = '' el.style.maxHeight = `${memorizedHeight}px` } } void el.offsetWidth } function handleAfterEnter(el: HTMLElement): void { if (props.width) { el.style.maxWidth = '' } else { if (!props.reverse) { el.style.maxHeight = '' } } props.onAfterEnter?.() } return () => { const { group, width, appear, mode } = props const type = group ? TransitionGroup : Transition const resolvedProps = { name: width ? 'fade-in-width-expand-transition' : 'fade-in-height-expand-transition', appear, onEnter: handleEnter, onAfterEnter: handleAfterEnter, onBeforeLeave: handleBeforeLeave, onLeave: handleLeave, onAfterLeave: handleAfterLeave } if (!group) { ;(resolvedProps as unknown as TransitionProps).mode = mode } return h(type as any, resolvedProps, slots) } } }) ================================================ FILE: src/_internal/focus-detector/index.tsx ================================================ import FocusDetector from './src/FocusDetector' export default FocusDetector ================================================ FILE: src/_internal/focus-detector/src/FocusDetector.tsx ================================================ import type { PropType } from 'vue' import { defineComponent, h } from 'vue' export default defineComponent({ props: { onFocus: Function as PropType<(e: FocusEvent) => void>, onBlur: Function as PropType<(e: FocusEvent) => void> }, setup(props) { return () => (
) } }) ================================================ FILE: src/_internal/icon/index.ts ================================================ export { default as NBaseIcon } from './src/Icon' ================================================ FILE: src/_internal/icon/src/Icon.tsx ================================================ import type { PropType } from 'vue' import { defineComponent, h, toRef } from 'vue' import { useStyle } from '../../../_mixins' import style from './styles/index.cssr' export default defineComponent({ name: 'BaseIcon', props: { role: String, ariaLabel: String, ariaDisabled: { type: Boolean, default: undefined }, ariaHidden: { type: Boolean, default: undefined }, clsPrefix: { type: String, required: true }, onClick: Function as PropType<(e: MouseEvent) => void>, onMousedown: Function as PropType<(e: MouseEvent) => void>, onMouseup: Function as PropType<(e: MouseEvent) => void> }, setup(props) { useStyle('-base-icon', style, toRef(props, 'clsPrefix')) }, render() { return ( {this.$slots} ) } }) ================================================ FILE: src/_internal/icon/src/styles/index.cssr.ts ================================================ import { c, cB } from '../../../../_utils/cssr' export default cB('base-icon', ` height: 1em; width: 1em; line-height: 1em; text-align: center; display: inline-block; position: relative; fill: currentColor; `, [ c('svg', ` height: 1em; width: 1em; `) ]) ================================================ FILE: src/_internal/icon-switch-transition/index.ts ================================================ export { default } from './src/IconSwitchTransition' ================================================ FILE: src/_internal/icon-switch-transition/src/IconSwitchTransition.tsx ================================================ import { useIsMounted } from 'vooks' import { defineComponent, h, Transition } from 'vue' export default defineComponent({ name: 'BaseIconSwitchTransition', setup(_, { slots }) { const isMountedRef = useIsMounted() return () => ( {slots} ) } }) ================================================ FILE: src/_internal/icons/Add.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Add', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/ArrowBack.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'ArrowBack', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/ArrowDown.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'ArrowDown', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/ArrowUp.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'ArrowUp', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Attach.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('attach', () => ( )) ================================================ FILE: src/_internal/icons/Backward.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Backward', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Cancel.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('cancel', () => ( )) ================================================ FILE: src/_internal/icons/Checkmark.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Checkmark', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/ChevronDown.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'ChevronDown', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/ChevronDownFilled.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'ChevronDownFilled', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/ChevronLeft.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'ChevronLeft', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/ChevronRight.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'ChevronRight', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Clear.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('clear', () => ( )) ================================================ FILE: src/_internal/icons/Close.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('close', () => ( )) ================================================ FILE: src/_internal/icons/Date.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('date', () => ( )) ================================================ FILE: src/_internal/icons/Download.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('download', () => ( )) ================================================ FILE: src/_internal/icons/Empty.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Empty', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Error.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('error', () => ( )) ================================================ FILE: src/_internal/icons/Eye.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Eye', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/EyeOff.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'EyeOff', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/FastBackward.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'FastBackward', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/FastForward.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'FastForward', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/File.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'File', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Filter.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Filter', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Forward.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Forward', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Info.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('info', () => ( )) ================================================ FILE: src/_internal/icons/More.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'More', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Photo.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Photo', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Remove.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Remove', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/ResizeSmall.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'ResizeSmall', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Retry.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('retry', () => ( )) ================================================ FILE: src/_internal/icons/RotateClockwise.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('rotateClockwise', () => ( )) ================================================ FILE: src/_internal/icons/RotateCounterclockwise.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('rotateClockwise', () => ( )) ================================================ FILE: src/_internal/icons/Search.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Search', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Success.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('success', () => ( )) ================================================ FILE: src/_internal/icons/Switcher.tsx ================================================ import { defineComponent, h } from 'vue' export default defineComponent({ name: 'Switcher', render() { return ( ) } }) ================================================ FILE: src/_internal/icons/Time.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('time', () => ( )) ================================================ FILE: src/_internal/icons/To.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('to', () => ( )) ================================================ FILE: src/_internal/icons/Trash.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('trash', () => ( )) ================================================ FILE: src/_internal/icons/Warning.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('warning', () => ( )) ================================================ FILE: src/_internal/icons/ZoomIn.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('zoomIn', () => ( )) ================================================ FILE: src/_internal/icons/ZoomOut.tsx ================================================ import { h } from 'vue' import { replaceable } from './replaceable' export default replaceable('zoomOut', () => ( )) ================================================ FILE: src/_internal/icons/index.ts ================================================ export { default as AddIcon } from './Add' export { default as ArrowBackIcon } from './ArrowBack' export { default as ArrowDownIcon } from './ArrowDown' export { default as ArrowUpIcon } from './ArrowUp' export { default as AttachIcon } from './Attach' export { default as BackwardIcon } from './Backward' export { default as CancelIcon } from './Cancel' export { default as CheckmarkIcon } from './Checkmark' export { default as ChevronDownIcon } from './ChevronDown' export { default as ChevronDownFilledIcon } from './ChevronDownFilled' export { default as ChevronLeftIcon } from './ChevronLeft' export { default as ChevronRightIcon } from './ChevronRight' export { default as ClearIcon } from './Clear' export { default as CloseIcon } from './Close' export { default as DateIcon } from './Date' export { default as DownloadIcon } from './Download' export { default as EmptyIcon } from './Empty' export { default as ErrorIcon } from './Error' export { default as EyeIcon } from './Eye' export { default as EyeOffIcon } from './EyeOff' export { default as FastBackwardIcon } from './FastBackward' export { default as FastForwardIcon } from './FastForward' export { default as FileIcon } from './File' export { default as FilterIcon } from './Filter' export { default as ForwardIcon } from './Forward' export { default as InfoIcon } from './Info' export { default as MoreIcon } from './More' export { default as PhotoIcon } from './Photo' export { default as RemoveIcon } from './Remove' export { default as ResizeSmallIcon } from './ResizeSmall' export { default as RetryIcon } from './Retry' export { default as RotateClockwiseIcon } from './RotateClockwise' export { default as RotateCounterclockwiseIcon } from './RotateCounterclockwise' export { default as SearchIcon } from './Search' export { default as SuccessIcon } from './Success' export { default as SwitcherIcon } from './Switcher' export { default as TimeIcon } from './Time' export { default as ToIcon } from './To' export { default as TrashIcon } from './Trash' export { default as WarningIcon } from './Warning' export { default as ZoomInIcon } from './ZoomIn' export { default as ZoomOutIcon } from './ZoomOut' ================================================ FILE: src/_internal/icons/replaceable.tsx ================================================ import type { VNode } from 'vue' import type { GlobalIconConfig } from '../../config-provider/src/internal-interface' import { upperFirst } from 'lodash-es' import { defineComponent, h, inject } from 'vue' import { configProviderInjectionKey } from '../../config-provider/src/context' export function replaceable(name: keyof GlobalIconConfig, icon: () => VNode) { const IconComponent = defineComponent({ render() { return icon() } }) return defineComponent({ name: upperFirst(name), setup() { const mergedIconsRef = inject( configProviderInjectionKey, null )?.mergedIconsRef return () => { const iconOverride = mergedIconsRef?.value?.[name] return iconOverride ? iconOverride() : } } }) } ================================================ FILE: src/_internal/index.ts ================================================ export { default as NBaseClear } from './clear' export { NBaseClose } from './close' export { default as NFadeInExpandTransition } from './fade-in-expand-transition' export { default as NBaseFocusDetector } from './focus-detector' export { NBaseIcon } from './icon' export { default as NIconSwitchTransition } from './icon-switch-transition' export { default as NBaseLoading } from './loading' export type { SharedSpinProps } from './loading' export { default as NBaseMenuMask } from './menu-mask' export { NScrollbar, NxScrollbar } from './scrollbar' export type { ScrollbarInst, ScrollbarProps } from './scrollbar' export { default as NInternalSelectMenu } from './select-menu' export type { InternalSelectMenuRef } from './select-menu' export { default as NInternalSelection } from './selection' export type { InternalSelectionInst } from './selection' export { default as NBaseSlotMachine } from './slot-machine' export { default as NBaseSuffix } from './suffix' export { default as NBaseWave } from './wave' export type { BaseWaveRef } from './wave' ================================================ FILE: src/_internal/loading/index.ts ================================================ export { default } from './src/Loading' export type { SharedSpinProps } from './src/Loading' ================================================ FILE: src/_internal/loading/src/Loading.tsx ================================================ import type { ExtractPublicPropTypes } from '../../../_utils' import { defineComponent, h, toRef } from 'vue' import { useStyle } from '../../../_mixins' import NIconSwitchTransition from '../../icon-switch-transition' import style from './styles/index.cssr' const duration = '1.6s' export const exposedLoadingProps = { strokeWidth: { type: Number, default: 28 }, stroke: { type: String, default: undefined }, scale: { type: Number, default: 1 }, radius: { type: Number, default: 100 } } export type SharedSpinProps = ExtractPublicPropTypes export default defineComponent({ name: 'BaseLoading', props: { clsPrefix: { type: String, required: true }, show: { type: Boolean, default: true }, ...exposedLoadingProps }, setup(props) { useStyle('-base-loading', style, toRef(props, 'clsPrefix')) }, render() { const { clsPrefix, radius, strokeWidth, stroke, scale } = this const scaledRadius = radius / scale return ( ) } }) ================================================ FILE: src/_internal/loading/src/styles/index.cssr.ts ================================================ import { iconSwitchTransition } from '../../../../_styles/transitions/icon-switch.cssr' import { c, cB, cE } from '../../../../_utils/cssr' export default c([ c('@keyframes rotator', ` 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }`), cB('base-loading', ` position: relative; line-height: 0; width: 1em; height: 1em; `, [ cE('transition-wrapper', ` position: absolute; width: 100%; height: 100%; `, [ iconSwitchTransition() ]), cE('placeholder', ` position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); `, [ iconSwitchTransition({ left: '50%', top: '50%', originalTransform: 'translateX(-50%) translateY(-50%)' }) ]), cE('container', ` animation: rotator 3s linear infinite both; `, [ cE('icon', ` height: 1em; width: 1em; `) ]) ]) ]) ================================================ FILE: src/_internal/menu-mask/index.ts ================================================ export type { MenuMaskRef } from './src/interface' export { default } from './src/MenuMask' ================================================ FILE: src/_internal/menu-mask/src/MenuMask.tsx ================================================ import type { MenuMaskRef } from './interface' import { defineComponent, h, onBeforeUnmount, ref, toRef, Transition } from 'vue' import { useStyle } from '../../../_mixins' import style from './styles/index.cssr' export default defineComponent({ name: 'BaseMenuMask', props: { clsPrefix: { type: String, required: true } }, setup(props) { useStyle('-base-menu-mask', style, toRef(props, 'clsPrefix')) const messageRef = ref(null) let timerId: number | null = null const uncontrolledShowRef = ref(false) onBeforeUnmount(() => { if (timerId !== null) { window.clearTimeout(timerId) } }) const exposedRef: MenuMaskRef = { showOnce(message: string, duration = 1500) { if (timerId) window.clearTimeout(timerId) uncontrolledShowRef.value = true messageRef.value = message timerId = window.setTimeout(() => { uncontrolledShowRef.value = false messageRef.value = null }, duration) } } return { message: messageRef, show: uncontrolledShowRef, ...exposedRef } }, render() { return ( {{ default: () => this.show ? (
{this.message}
) : null }} ) } }) ================================================ FILE: src/_internal/menu-mask/src/interface.ts ================================================ export interface MenuMaskRef { showOnce: (message: string, duration?: number) => void } ================================================ FILE: src/_internal/menu-mask/src/styles/index.cssr.ts ================================================ import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr' import { cB } from '../../../../_utils/cssr' export default cB('base-menu-mask', ` position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; overflow: hidden; `, [ fadeInTransition() ]) ================================================ FILE: src/_internal/scrollbar/index.ts ================================================ export { default as NScrollbar, XScrollbar as NxScrollbar } from './src/Scrollbar' export type { ScrollbarInst, ScrollbarProps } from './src/Scrollbar' ================================================ FILE: src/_internal/scrollbar/src/Scrollbar.tsx ================================================ import type { CSSProperties, HTMLAttributes, PropType, VNode } from 'vue' import type { ThemeProps } from '../../../_mixins' import type { ExtractInternalPropTypes, ExtractPublicPropTypes } from '../../../_utils' import type { ScrollbarTheme } from '../styles' import { off, on } from 'evtd' import { depx, getPadding, getPreciseEventTarget, pxfy } from 'seemly' import { useIsIos } from 'vooks' import { computed, defineComponent, Fragment, h, mergeProps, onBeforeUnmount, onMounted, ref, Transition, watchEffect } from 'vue' import { VResizeObserver } from 'vueuc' import { useConfig, useRtl, useTheme, useThemeClass } from '../../../_mixins' import { rtlInset, useReactivated, Wrapper } from '../../../_utils' import { scrollbarLight } from '../styles' import style from './styles/index.cssr' interface MergedScrollOptions { left?: number top?: number el?: HTMLElement position?: 'top' | 'bottom' behavior?: ScrollBehavior debounce?: boolean index?: number elSize?: number } export interface ScrollTo { (x: number, y: number): void (options: { left?: number top?: number behavior?: ScrollBehavior debounce?: boolean }): void (options: { el: HTMLElement behavior?: ScrollBehavior debounce?: boolean }): void (options: { index: number elSize: number behavior?: ScrollBehavior debounce?: boolean }): void (options: { position: 'top' | 'bottom' behavior?: ScrollBehavior debounce?: boolean }): void } export interface ScrollBy { (x: number, y: number): void (options: { left?: number, top?: number, behavior?: ScrollBehavior }): void } export interface ScrollbarInstMethods { syncUnifiedContainer: () => void scrollTo: ScrollTo scrollBy: ScrollBy sync: () => void handleMouseEnterWrapper: () => void handleMouseLeaveWrapper: () => void } export interface ScrollbarInst extends ScrollbarInstMethods { $el: HTMLElement containerRef: HTMLElement | null contentRef: HTMLElement | null containerScrollTop: number } const scrollbarProps = { ...(useTheme.props as ThemeProps), duration: { type: Number, default: 0 }, scrollable: { type: Boolean, default: true }, xScrollable: Boolean, trigger: { type: String as PropType<'none' | 'hover'>, default: 'hover' }, useUnifiedContainer: Boolean, triggerDisplayManually: Boolean, // If container is set, resize observer won't not attached container: Function as PropType<() => HTMLElement | null | undefined>, content: Function as PropType<() => HTMLElement | null | undefined>, containerClass: String, containerStyle: [String, Object] as PropType, contentClass: [String, Array] as PropType>, contentStyle: [String, Object] as PropType, horizontalRailStyle: [String, Object] as PropType, verticalRailStyle: [String, Object] as PropType, onScroll: Function as PropType<(e: Event) => void>, onWheel: Function as PropType<(e: WheelEvent) => void>, onResize: Function as PropType<(e: ResizeObserverEntry) => void>, internalOnUpdateScrollLeft: Function as PropType< (scrollLeft: number) => void >, internalHoistYRail: Boolean, internalExposeWidthCssVar: Boolean, yPlacement: { type: String as PropType<'left' | 'right'>, default: 'right' }, xPlacement: { type: String as PropType<'top' | 'bottom'>, default: 'bottom' } } as const export type ScrollbarProps = ExtractPublicPropTypes export type ScrollbarInternalProps = ExtractInternalPropTypes< typeof scrollbarProps > const Scrollbar = defineComponent({ name: 'Scrollbar', props: scrollbarProps, inheritAttrs: false, setup(props) { const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props) const rtlEnabledRef = useRtl('Scrollbar', mergedRtlRef, mergedClsPrefixRef) // dom ref const wrapperRef = ref(null) const containerRef = ref(null) const contentRef = ref(null) const yRailRef = ref(null) const xRailRef = ref(null) // data ref const contentHeightRef = ref(null) const contentWidthRef = ref(null) const containerHeightRef = ref(null) const containerWidthRef = ref(null) const yRailSizeRef = ref(null) const xRailSizeRef = ref(null) const containerScrollTopRef = ref(0) const containerScrollLeftRef = ref(0) const isShowXBarRef = ref(false) const isShowYBarRef = ref(false) let yBarPressed = false let xBarPressed = false let xBarVanishTimerId: number | undefined let yBarVanishTimerId: number | undefined let memoYTop: number = 0 let memoXLeft: number = 0 let memoMouseX: number = 0 let memoMouseY: number = 0 const isIos = useIsIos() const themeRef = useTheme( 'Scrollbar', '-scrollbar', style, scrollbarLight, props, mergedClsPrefixRef ) const yBarSizeRef = computed(() => { const { value: containerHeight } = containerHeightRef const { value: contentHeight } = contentHeightRef const { value: yRailSize } = yRailSizeRef if ( containerHeight === null || contentHeight === null || yRailSize === null ) { return 0 } else { return Math.min( containerHeight, (yRailSize * containerHeight) / contentHeight + depx(themeRef.value.self.width) * 1.5 ) } }) const yBarSizePxRef = computed(() => { return `${yBarSizeRef.value}px` }) const xBarSizeRef = computed(() => { const { value: containerWidth } = containerWidthRef const { value: contentWidth } = contentWidthRef const { value: xRailSize } = xRailSizeRef if ( containerWidth === null || contentWidth === null || xRailSize === null ) { return 0 } else { return ( (xRailSize * containerWidth) / contentWidth + depx(themeRef.value.self.height) * 1.5 ) } }) const xBarSizePxRef = computed(() => { return `${xBarSizeRef.value}px` }) const yBarTopRef = computed(() => { const { value: containerHeight } = containerHeightRef const { value: containerScrollTop } = containerScrollTopRef const { value: contentHeight } = contentHeightRef const { value: yRailSize } = yRailSizeRef if ( containerHeight === null || contentHeight === null || yRailSize === null ) { return 0 } else { const heightDiff = contentHeight - containerHeight if (!heightDiff) return 0 return ( (containerScrollTop / heightDiff) * (yRailSize - yBarSizeRef.value) ) } }) const yBarTopPxRef = computed(() => { return `${yBarTopRef.value}px` }) const xBarLeftRef = computed(() => { const { value: containerWidth } = containerWidthRef const { value: containerScrollLeft } = containerScrollLeftRef const { value: contentWidth } = contentWidthRef const { value: xRailSize } = xRailSizeRef if ( containerWidth === null || contentWidth === null || xRailSize === null ) { return 0 } else { const widthDiff = contentWidth - containerWidth if (!widthDiff) return 0 return ( (containerScrollLeft / widthDiff) * (xRailSize - xBarSizeRef.value) ) } }) const xBarLeftPxRef = computed(() => { return `${xBarLeftRef.value}px` }) const needYBarRef = computed(() => { const { value: containerHeight } = containerHeightRef const { value: contentHeight } = contentHeightRef return ( containerHeight !== null && contentHeight !== null && contentHeight > containerHeight ) }) const needXBarRef = computed(() => { const { value: containerWidth } = containerWidthRef const { value: contentWidth } = contentWidthRef return ( containerWidth !== null && contentWidth !== null && contentWidth > containerWidth ) }) const mergedShowXBarRef = computed(() => { const { trigger } = props return trigger === 'none' || isShowXBarRef.value }) const mergedShowYBarRef = computed(() => { const { trigger } = props return trigger === 'none' || isShowYBarRef.value }) const mergedContainerRef = computed(() => { const { container } = props if (container) return container() return containerRef.value }) const mergedContentRef = computed(() => { const { content } = props if (content) return content() return contentRef.value }) const scrollTo: ScrollTo = ( options: MergedScrollOptions | number, y?: number ): void => { if (!props.scrollable) return if (typeof options === 'number') { scrollToPosition(options, y ?? 0, 0, false, 'auto') return } const { left, top, index, elSize, position, behavior, el, debounce = true } = options if (left !== undefined || top !== undefined) { scrollToPosition(left ?? 0, top ?? 0, 0, false, behavior) } if (el !== undefined) { scrollToPosition(0, el.offsetTop, el.offsetHeight, debounce, behavior) } else if (index !== undefined && elSize !== undefined) { scrollToPosition(0, index * elSize, elSize, debounce, behavior) } else if (position === 'bottom') { scrollToPosition(0, Number.MAX_SAFE_INTEGER, 0, false, behavior) } else if (position === 'top') { scrollToPosition(0, 0, 0, false, behavior) } } const activateState = useReactivated(() => { // Only restore for builtin container & content if (!props.container) { // remount scrollTo({ top: containerScrollTopRef.value, left: containerScrollLeftRef.value }) } }) // methods const handleContentResize = (): void => { if (activateState.isDeactivated) return sync() } const handleContainerResize = (e: ResizeObserverEntry): void => { if (activateState.isDeactivated) return const { onResize } = props if (onResize) onResize(e) sync() } const scrollBy: ScrollBy = ( options: ScrollOptions | number, y?: number ): void => { if (!props.scrollable) return const { value: container } = mergedContainerRef if (!container) return if (typeof options === 'object') { container.scrollBy(options) } else { container.scrollBy(options, y || 0) } } function scrollToPosition( left: number, top: number, elSize: number, debounce: boolean, behavior?: ScrollBehavior ): void { const { value: container } = mergedContainerRef if (!container) return if (debounce) { const { scrollTop, offsetHeight } = container if (top > scrollTop) { if (top + elSize <= scrollTop + offsetHeight) { // do nothing } else { container.scrollTo({ left, top: top + elSize - offsetHeight, behavior }) } return } } container.scrollTo({ left, top, behavior }) } function handleMouseEnterWrapper(): void { showXBar() showYBar() sync() } function handleMouseLeaveWrapper(): void { hideBar() } function hideBar(): void { hideYBar() hideXBar() } function hideYBar(): void { if (yBarVanishTimerId !== undefined) { window.clearTimeout(yBarVanishTimerId) } yBarVanishTimerId = window.setTimeout(() => { isShowYBarRef.value = false }, props.duration) } function hideXBar(): void { if (xBarVanishTimerId !== undefined) { window.clearTimeout(xBarVanishTimerId) } xBarVanishTimerId = window.setTimeout(() => { isShowXBarRef.value = false }, props.duration) } function showXBar(): void { if (xBarVanishTimerId !== undefined) { window.clearTimeout(xBarVanishTimerId) } isShowXBarRef.value = true } function showYBar(): void { if (yBarVanishTimerId !== undefined) { window.clearTimeout(yBarVanishTimerId) } isShowYBarRef.value = true } function handleScroll(e: Event): void { const { onScroll } = props if (onScroll) onScroll(e) syncScrollState() } function syncScrollState(): void { // only collect scroll state, do not trigger any dom event const { value: container } = mergedContainerRef if (container) { containerScrollTopRef.value = container.scrollTop containerScrollLeftRef.value = container.scrollLeft * (rtlEnabledRef?.value ? -1 : 1) } } function syncPositionState(): void { // only collect position state, do not trigger any dom event // Don't use getClientBoundingRect because element may be scale transformed const { value: content } = mergedContentRef if (content) { contentHeightRef.value = content.offsetHeight contentWidthRef.value = content.offsetWidth } const { value: container } = mergedContainerRef if (container) { containerHeightRef.value = container.offsetHeight containerWidthRef.value = container.offsetWidth } const { value: xRailEl } = xRailRef const { value: yRailEl } = yRailRef if (xRailEl) { xRailSizeRef.value = xRailEl.offsetWidth } if (yRailEl) { yRailSizeRef.value = yRailEl.offsetHeight } } /** * Sometimes there's only one element that we can scroll, * For example for textarea, there won't be a content element. */ function syncUnifiedContainer(): void { const { value: container } = mergedContainerRef if (container) { containerScrollTopRef.value = container.scrollTop containerScrollLeftRef.value = container.scrollLeft * (rtlEnabledRef?.value ? -1 : 1) containerHeightRef.value = container.offsetHeight containerWidthRef.value = container.offsetWidth contentHeightRef.value = container.scrollHeight contentWidthRef.value = container.scrollWidth } const { value: xRailEl } = xRailRef const { value: yRailEl } = yRailRef if (xRailEl) { xRailSizeRef.value = xRailEl.offsetWidth } if (yRailEl) { yRailSizeRef.value = yRailEl.offsetHeight } } function sync(): void { if (!props.scrollable) return if (props.useUnifiedContainer) { syncUnifiedContainer() } else { syncPositionState() syncScrollState() } } function isMouseUpAway(e: MouseEvent): boolean { return !wrapperRef.value?.contains( getPreciseEventTarget(e) as Node | null ) } function handleXScrollMouseDown(e: MouseEvent): void { e.preventDefault() e.stopPropagation() xBarPressed = true on('mousemove', window, handleXScrollMouseMove, true) on('mouseup', window, handleXScrollMouseUp, true) memoXLeft = containerScrollLeftRef.value memoMouseX = rtlEnabledRef?.value ? window.innerWidth - e.clientX : e.clientX } function handleXScrollMouseMove(e: MouseEvent): void { if (!xBarPressed) return if (xBarVanishTimerId !== undefined) { window.clearTimeout(xBarVanishTimerId) } if (yBarVanishTimerId !== undefined) { window.clearTimeout(yBarVanishTimerId) } const { value: containerWidth } = containerWidthRef const { value: contentWidth } = contentWidthRef const { value: xBarSize } = xBarSizeRef if (containerWidth === null || contentWidth === null) return const dX = rtlEnabledRef?.value ? window.innerWidth - e.clientX - memoMouseX : e.clientX - memoMouseX const dScrollLeft = (dX * (contentWidth - containerWidth)) / (containerWidth - xBarSize) const toScrollLeftUpperBound = contentWidth - containerWidth let toScrollLeft = memoXLeft + dScrollLeft toScrollLeft = Math.min(toScrollLeftUpperBound, toScrollLeft) toScrollLeft = Math.max(toScrollLeft, 0) const { value: container } = mergedContainerRef if (container) { container.scrollLeft = toScrollLeft * (rtlEnabledRef?.value ? -1 : 1) const { internalOnUpdateScrollLeft } = props if (internalOnUpdateScrollLeft) internalOnUpdateScrollLeft(toScrollLeft) } } function handleXScrollMouseUp(e: MouseEvent): void { e.preventDefault() e.stopPropagation() off('mousemove', window, handleXScrollMouseMove, true) off('mouseup', window, handleXScrollMouseUp, true) xBarPressed = false sync() if (isMouseUpAway(e)) { hideBar() } } function handleYScrollMouseDown(e: MouseEvent): void { e.preventDefault() e.stopPropagation() yBarPressed = true on('mousemove', window, handleYScrollMouseMove, true) on('mouseup', window, handleYScrollMouseUp, true) memoYTop = containerScrollTopRef.value memoMouseY = e.clientY } function handleYScrollMouseMove(e: MouseEvent): void { if (!yBarPressed) return if (xBarVanishTimerId !== undefined) { window.clearTimeout(xBarVanishTimerId) } if (yBarVanishTimerId !== undefined) { window.clearTimeout(yBarVanishTimerId) } const { value: containerHeight } = containerHeightRef const { value: contentHeight } = contentHeightRef const { value: yBarSize } = yBarSizeRef if (containerHeight === null || contentHeight === null) return const dY = e.clientY - memoMouseY const dScrollTop = (dY * (contentHeight - containerHeight)) / (containerHeight - yBarSize) const toScrollTopUpperBound = contentHeight - containerHeight let toScrollTop = memoYTop + dScrollTop toScrollTop = Math.min(toScrollTopUpperBound, toScrollTop) toScrollTop = Math.max(toScrollTop, 0) const { value: container } = mergedContainerRef if (container) { container.scrollTop = toScrollTop } } function handleYScrollMouseUp(e: MouseEvent): void { e.preventDefault() e.stopPropagation() off('mousemove', window, handleYScrollMouseMove, true) off('mouseup', window, handleYScrollMouseUp, true) yBarPressed = false sync() if (isMouseUpAway(e)) { hideBar() } } watchEffect(() => { const { value: needXBar } = needXBarRef const { value: needYBar } = needYBarRef const { value: mergedClsPrefix } = mergedClsPrefixRef const { value: xRailEl } = xRailRef const { value: yRailEl } = yRailRef if (xRailEl) { if (!needXBar) { xRailEl.classList.add(`${mergedClsPrefix}-scrollbar-rail--disabled`) } else { xRailEl.classList.remove( `${mergedClsPrefix}-scrollbar-rail--disabled` ) } } if (yRailEl) { if (!needYBar) { yRailEl.classList.add(`${mergedClsPrefix}-scrollbar-rail--disabled`) } else { yRailEl.classList.remove( `${mergedClsPrefix}-scrollbar-rail--disabled` ) } } }) onMounted(() => { // if container exist, it always can't be resolved when scrollbar is mounted // for example: // - component // - scrollbar // - inner // if you pass inner to scrollbar, you may use a ref inside component // however, when scrollbar is mounted, ref is not ready at component // you need to init by yourself if (props.container) return sync() }) onBeforeUnmount(() => { if (xBarVanishTimerId !== undefined) { window.clearTimeout(xBarVanishTimerId) } if (yBarVanishTimerId !== undefined) { window.clearTimeout(yBarVanishTimerId) } off('mousemove', window, handleYScrollMouseMove, true) off('mouseup', window, handleYScrollMouseUp, true) }) const cssVarsRef = computed(() => { const { common: { cubicBezierEaseInOut }, self: { color, colorHover, height, width, borderRadius, railInsetHorizontalTop, railInsetHorizontalBottom, railInsetVerticalRight, railInsetVerticalLeft, railColor } } = themeRef.value const { top: railTopHorizontalTop, right: railRightHorizontalTop, bottom: railBottomHorizontalTop, left: railLeftHorizontalTop } = getPadding(railInsetHorizontalTop) const { top: railTopHorizontalBottom, right: railRightHorizontalBottom, bottom: railBottomHorizontalBottom, left: railLeftHorizontalBottom } = getPadding(railInsetHorizontalBottom) const { top: railTopVerticalRight, right: railRightVerticalRight, bottom: railBottomVerticalRight, left: railLeftVerticalRight } = getPadding( rtlEnabledRef?.value ? rtlInset(railInsetVerticalRight) : railInsetVerticalRight ) const { top: railTopVerticalLeft, right: railRightVerticalLeft, bottom: railBottomVerticalLeft, left: railLeftVerticalLeft } = getPadding( rtlEnabledRef?.value ? rtlInset(railInsetVerticalLeft) : railInsetVerticalLeft ) return { '--n-scrollbar-bezier': cubicBezierEaseInOut, '--n-scrollbar-color': color, '--n-scrollbar-color-hover': colorHover, '--n-scrollbar-border-radius': borderRadius, '--n-scrollbar-width': width, '--n-scrollbar-height': height, '--n-scrollbar-rail-top-horizontal-top': railTopHorizontalTop, '--n-scrollbar-rail-right-horizontal-top': railRightHorizontalTop, '--n-scrollbar-rail-bottom-horizontal-top': railBottomHorizontalTop, '--n-scrollbar-rail-left-horizontal-top': railLeftHorizontalTop, '--n-scrollbar-rail-top-horizontal-bottom': railTopHorizontalBottom, '--n-scrollbar-rail-right-horizontal-bottom': railRightHorizontalBottom, '--n-scrollbar-rail-bottom-horizontal-bottom': railBottomHorizontalBottom, '--n-scrollbar-rail-left-horizontal-bottom': railLeftHorizontalBottom, '--n-scrollbar-rail-top-vertical-right': railTopVerticalRight, '--n-scrollbar-rail-right-vertical-right': railRightVerticalRight, '--n-scrollbar-rail-bottom-vertical-right': railBottomVerticalRight, '--n-scrollbar-rail-left-vertical-right': railLeftVerticalRight, '--n-scrollbar-rail-top-vertical-left': railTopVerticalLeft, '--n-scrollbar-rail-right-vertical-left': railRightVerticalLeft, '--n-scrollbar-rail-bottom-vertical-left': railBottomVerticalLeft, '--n-scrollbar-rail-left-vertical-left': railLeftVerticalLeft, '--n-scrollbar-rail-color': railColor } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass('scrollbar', undefined, cssVarsRef, props) : undefined const exposedMethods: ScrollbarInstMethods = { scrollTo, scrollBy, sync, syncUnifiedContainer, handleMouseEnterWrapper, handleMouseLeaveWrapper } return { ...exposedMethods, mergedClsPrefix: mergedClsPrefixRef, rtlEnabled: rtlEnabledRef, containerScrollTop: containerScrollTopRef, wrapperRef, containerRef, contentRef, yRailRef, xRailRef, needYBar: needYBarRef, needXBar: needXBarRef, yBarSizePx: yBarSizePxRef, xBarSizePx: xBarSizePxRef, yBarTopPx: yBarTopPxRef, xBarLeftPx: xBarLeftPxRef, isShowXBar: mergedShowXBarRef, isShowYBar: mergedShowYBarRef, isIos, handleScroll, handleContentResize, handleContainerResize, handleYScrollMouseDown, handleXScrollMouseDown, containerWidth: containerWidthRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail, yPlacement, xPlacement, xScrollable } = this if (!this.scrollable) return $slots.default?.() const triggerIsNone = this.trigger === 'none' const createYRail = ( className: string | undefined, style: CSSProperties | undefined ): VNode => { return (
{h( (triggerIsNone ? Wrapper : Transition) as any, triggerIsNone ? null : { name: 'fade-in-transition' }, { default: () => this.needYBar && this.isShowYBar && !this.isIos ? (
) : null } )}
) } const createChildren = (): VNode => { this.onRender?.() return h( 'div', mergeProps(this.$attrs, { role: 'none', ref: 'wrapperRef', class: [ `${mergedClsPrefix}-scrollbar`, this.themeClass, rtlEnabled && `${mergedClsPrefix}-scrollbar--rtl` ], style: this.cssVars, onMouseenter: triggerDisplayManually ? undefined : this.handleMouseEnterWrapper, onMouseleave: triggerDisplayManually ? undefined : this.handleMouseLeaveWrapper }), [ this.container ? ( $slots.default?.() ) : (
{{ default: () => (
{$slots}
) }}
), internalHoistYRail ? null : createYRail(undefined, undefined), xScrollable && (
{h( (triggerIsNone ? Wrapper : Transition) as any, triggerIsNone ? null : { name: 'fade-in-transition' }, { default: () => this.needXBar && this.isShowXBar && !this.isIos ? (
) : null } )}
) ] ) } const scrollbarNode = this.container ? ( createChildren() ) : ( {{ default: createChildren }} ) if (internalHoistYRail) { return ( {scrollbarNode} {createYRail(this.themeClass, this.cssVars)} ) } else { return scrollbarNode } } }) type NativeScrollbarProps = Omit type MergedProps = Partial export default Scrollbar export const XScrollbar: new () => { $props: MergedProps } = Scrollbar as any ================================================ FILE: src/_internal/scrollbar/src/styles/index.cssr.ts ================================================ import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr' import { c, cB, cE, cM } from '../../../../_utils/cssr' // vars: // --n-scrollbar-bezier // --n-scrollbar-color // --n-scrollbar-color-hover // --n-scrollbar-width // --n-scrollbar-height // --n-scrollbar-border-radius // --n-scrollbar-rail-inset-horizontal // --n-scrollbar-rail-inset-vertical // --n-scrollbar-rail-color export default cB('scrollbar', ` overflow: hidden; position: relative; z-index: auto; height: 100%; width: 100%; `, [ c('>', [ cB('scrollbar-container', ` width: 100%; overflow: scroll; height: 100%; min-height: inherit; max-height: inherit; scrollbar-width: none; `, [ c('&::-webkit-scrollbar, &::-webkit-scrollbar-track-piece, &::-webkit-scrollbar-thumb', ` width: 0; height: 0; display: none; `), c('>', [ // We can't set overflow hidden since it affects positioning. cB('scrollbar-content', ` box-sizing: border-box; min-width: 100%; `) ]) ]) ]), c('>, +', [ cB('scrollbar-rail', ` position: absolute; pointer-events: none; user-select: none; background: var(--n-scrollbar-rail-color); -webkit-user-select: none; `, [ cM('horizontal', ` height: var(--n-scrollbar-height); `, [ c('>', [ cE('scrollbar', ` height: var(--n-scrollbar-height); border-radius: var(--n-scrollbar-border-radius); right: 0; `) ]) ]), cM('horizontal--top', ` top: var(--n-scrollbar-rail-top-horizontal-top); right: var(--n-scrollbar-rail-right-horizontal-top); bottom: var(--n-scrollbar-rail-bottom-horizontal-top); left: var(--n-scrollbar-rail-left-horizontal-top); `), cM('horizontal--bottom', ` top: var(--n-scrollbar-rail-top-horizontal-bottom); right: var(--n-scrollbar-rail-right-horizontal-bottom); bottom: var(--n-scrollbar-rail-bottom-horizontal-bottom); left: var(--n-scrollbar-rail-left-horizontal-bottom); `), cM('vertical', ` width: var(--n-scrollbar-width); `, [ c('>', [ cE('scrollbar', ` width: var(--n-scrollbar-width); border-radius: var(--n-scrollbar-border-radius); bottom: 0; `) ]) ]), cM('vertical--left', ` top: var(--n-scrollbar-rail-top-vertical-left); right: var(--n-scrollbar-rail-right-vertical-left); bottom: var(--n-scrollbar-rail-bottom-vertical-left); left: var(--n-scrollbar-rail-left-vertical-left); `), cM('vertical--right', ` top: var(--n-scrollbar-rail-top-vertical-right); right: var(--n-scrollbar-rail-right-vertical-right); bottom: var(--n-scrollbar-rail-bottom-vertical-right); left: var(--n-scrollbar-rail-left-vertical-right); `), cM('disabled', [ c('>', [ cE('scrollbar', 'pointer-events: none;') ]) ]), c('>', [ cE('scrollbar', ` z-index: 1; position: absolute; cursor: pointer; pointer-events: all; background-color: var(--n-scrollbar-color); transition: background-color .2s var(--n-scrollbar-bezier); `, [ fadeInTransition(), c('&:hover', 'background-color: var(--n-scrollbar-color-hover);') ]) ]) ]) ]) ]) ================================================ FILE: src/_internal/scrollbar/src/styles/rtl.cssr.ts ================================================ import { c, cB, cE, cM } from '../../../../_utils/cssr' export default cB('scrollbar', [ cM('rtl', ` direction: rtl; `, [ c('>', [ cB('scrollbar-rail', [ cM('horizontal', [ c('>', [ cE('scrollbar', ` left: 0; right: unset; `) ]) ]) ]) ]) ]) ]) ================================================ FILE: src/_internal/scrollbar/styles/common.ts ================================================ export const commonVars = { railInsetHorizontalBottom: 'auto 2px 4px 2px', railInsetHorizontalTop: '4px 2px auto 2px', railInsetVerticalRight: '2px 4px 2px auto', railInsetVerticalLeft: '2px auto 2px 4px', railColor: 'transparent' } ================================================ FILE: src/_internal/scrollbar/styles/dark.ts ================================================ import type { ScrollbarTheme } from './light' import { commonDark } from '../../../_styles/common' import { self } from './light' const scrollbarDark: ScrollbarTheme = { name: 'Scrollbar', common: commonDark, self } export default scrollbarDark ================================================ FILE: src/_internal/scrollbar/styles/index.ts ================================================ export { default as scrollbarDark } from './dark' export { default as scrollbarLight } from './light' export type { ScrollbarTheme, ScrollbarThemeVars } from './light' export { default as scrollbarRtl } from './rtl' ================================================ FILE: src/_internal/scrollbar/styles/light.ts ================================================ import type { Theme } from '../../../_mixins' import type { ThemeCommonVars } from '../../../_styles/common' import { commonLight } from '../../../_styles/common' import { commonVars } from './common' export function self(vars: ThemeCommonVars) { const { scrollbarColor, scrollbarColorHover, scrollbarHeight, scrollbarWidth, scrollbarBorderRadius } = vars return { ...commonVars, height: scrollbarHeight, width: scrollbarWidth, borderRadius: scrollbarBorderRadius, color: scrollbarColor, colorHover: scrollbarColorHover } } export type ScrollbarThemeVars = ReturnType const scrollbarLight: Theme<'Scrollbar', ScrollbarThemeVars> = { name: 'Scrollbar', common: commonLight, self } export default scrollbarLight export type ScrollbarTheme = typeof scrollbarLight ================================================ FILE: src/_internal/scrollbar/styles/rtl.ts ================================================ import type { RtlItem } from '../../../config-provider/src/internal-interface' import rtlStyle from '../src/styles/rtl.cssr' export const scrollbarRtl: RtlItem = { name: 'Scrollbar', style: rtlStyle } export default scrollbarRtl ================================================ FILE: src/_internal/scrollbar/tests/Scrollbar.spec.ts ================================================ import { mount } from '@vue/test-utils' import { NScrollbar } from '../index' describe('n-scrollbar', () => { it('should work with import on demand', () => { mount(NScrollbar) }) }) ================================================ FILE: src/_internal/scrollbar/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NScrollbar } from '../index' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/_internal/select-menu/index.ts ================================================ export type { InternalSelectMenuRef } from './src/interface' export { default } from './src/SelectMenu' ================================================ FILE: src/_internal/select-menu/src/SelectGroupHeader.tsx ================================================ import type { TreeNode } from 'treemate' import type { PropType, Ref } from 'vue' import type { SelectGroupOption } from '../../../select/src/interface' import type { RenderLabelImpl, RenderOptionImpl } from './interface' import { defineComponent, h, inject } from 'vue' import { render } from '../../../_utils' import { internalSelectionMenuInjectionKey } from './interface' export default defineComponent({ name: 'NBaseSelectGroupHeader', props: { clsPrefix: { type: String, required: true }, tmNode: { type: Object as PropType>, required: true } }, setup() { const { renderLabelRef, renderOptionRef, labelFieldRef, nodePropsRef } = inject(internalSelectionMenuInjectionKey)! return { labelField: labelFieldRef, nodeProps: nodePropsRef, renderLabel: renderLabelRef as Ref, renderOption: renderOptionRef as Ref } }, render() { const { clsPrefix, renderLabel, renderOption, nodeProps, tmNode: { rawNode } } = this const attrs = nodeProps?.(rawNode) const children = renderLabel ? renderLabel(rawNode, false) : render(rawNode[this.labelField], rawNode, false) const node = (
{children}
) return rawNode.render ? rawNode.render({ node, option: rawNode }) : renderOption ? renderOption({ node, option: rawNode, selected: false }) : node } }) ================================================ FILE: src/_internal/select-menu/src/SelectMenu.tsx ================================================ import type { TreeNode } from 'treemate' import type { CSSProperties, PropType, WatchStopHandle } from 'vue' import type { VirtualListInst } from 'vueuc' import type { ThemeProps } from '../../../_mixins' import type { SelectGroupOption, SelectIgnoredOption, SelectOption, SelectTreeMate, Value } from '../../../select/src/interface' import type { ScrollbarInst } from '../../scrollbar' import type { ScrollbarProps } from '../../scrollbar/src/Scrollbar' import type { InternalSelectMenuTheme } from '../styles' import type { InternalExposedProps, NodeProps, RenderLabel, RenderOption, Size } from './interface' import { depx, getPadding, happensIn } from 'seemly' import { createIndexGetter } from 'treemate' import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, provide, ref, toRef, watch } from 'vue' import { VirtualList } from 'vueuc' import { useConfig, useRtl, useTheme, useThemeClass } from '../../../_mixins' import { resolveSlot, resolveWrappedSlot, useOnResize } from '../../../_utils' import { createKey } from '../../../_utils/cssr' import { NEmpty } from '../../../empty' import NFocusDetector from '../../focus-detector' import NInternalLoading from '../../loading' import { NScrollbar } from '../../scrollbar' import { internalSelectMenuLight } from '../styles' import { internalSelectionMenuBodyInjectionKey, internalSelectionMenuInjectionKey } from './interface' import NSelectGroupHeader from './SelectGroupHeader' import NSelectOption from './SelectOption' import style from './styles/index.cssr' export default defineComponent({ name: 'InternalSelectMenu', props: { ...(useTheme.props as ThemeProps), clsPrefix: { type: String, required: true }, scrollable: { type: Boolean, default: true }, treeMate: { type: Object as PropType, required: true }, multiple: Boolean, size: { type: String as PropType, default: 'medium' }, value: { type: [String, Number, Array] as PropType, default: null }, autoPending: Boolean, virtualScroll: { type: Boolean, default: true }, // show is used to toggle pending state initialization show: { type: Boolean, default: true }, labelField: { type: String, default: 'label' }, valueField: { type: String, default: 'value' }, loading: Boolean, focusable: Boolean, renderLabel: Function as PropType, renderOption: Function as PropType, nodeProps: Function as PropType, showCheckmark: { type: Boolean, default: true }, onMousedown: Function as PropType<(e: MouseEvent) => void>, onScroll: Function as PropType<(e: Event) => void>, onFocus: Function as PropType<(e: FocusEvent) => void>, onBlur: Function as PropType<(e: FocusEvent) => void>, onKeyup: Function as PropType<(e: KeyboardEvent) => void>, onKeydown: Function as PropType<(e: KeyboardEvent) => void>, onTabOut: Function as PropType<() => void>, onMouseenter: Function as PropType<(e: MouseEvent) => void>, onMouseleave: Function as PropType<(e: MouseEvent) => void>, onResize: Function as PropType<() => void>, resetMenuOnOptionsChange: { type: Boolean, default: true }, inlineThemeDisabled: Boolean, scrollbarProps: Object as PropType, // deprecated onToggle: Function as PropType<(tmNode: TreeNode) => void> }, setup(props) { const { mergedClsPrefixRef, mergedRtlRef, mergedComponentPropsRef } = useConfig(props) const rtlEnabledRef = useRtl( 'InternalSelectMenu', mergedRtlRef, mergedClsPrefixRef ) const themeRef = useTheme( 'InternalSelectMenu', '-internal-select-menu', style, internalSelectMenuLight, props, toRef(props, 'clsPrefix') ) const selfRef = ref(null) const virtualListRef = ref(null) const scrollbarRef = ref(null) const flattenedNodesRef = computed(() => props.treeMate.getFlattenedNodes()) const fIndexGetterRef = computed(() => createIndexGetter(flattenedNodesRef.value) ) const pendingNodeRef = ref | null>(null) function initPendingNode(): void { const { treeMate } = props let defaultPendingNode: TreeNode | null = null const { value } = props if (value === null) { defaultPendingNode = treeMate.getFirstAvailableNode() } else { if (props.multiple) { defaultPendingNode = treeMate.getNode( ((value as Array | null) || [])[ ((value as Array | null) || []).length - 1 ] ) } else { defaultPendingNode = treeMate.getNode(value as string | number) } if (!defaultPendingNode || defaultPendingNode.disabled) { defaultPendingNode = treeMate.getFirstAvailableNode() } } if (defaultPendingNode) { setPendingTmNode(defaultPendingNode) } else { setPendingTmNode(null) } } function clearPendingNodeIfInvalid(): void { const { value: pendingNode } = pendingNodeRef if (pendingNode && !props.treeMate.getNode(pendingNode.key)) { pendingNodeRef.value = null } } let initPendingNodeWatchStopHandle: WatchStopHandle | undefined watch( () => props.show, (show) => { if (show) { initPendingNodeWatchStopHandle = watch( () => props.treeMate, () => { if (props.resetMenuOnOptionsChange) { if (props.autoPending) { initPendingNode() } else { clearPendingNodeIfInvalid() } void nextTick(scrollToPendingNode) } else { clearPendingNodeIfInvalid() } }, { immediate: true } ) } else { initPendingNodeWatchStopHandle?.() } }, { immediate: true } ) onBeforeUnmount(() => { initPendingNodeWatchStopHandle?.() }) const itemSizeRef = computed(() => { return depx(themeRef.value.self[createKey('optionHeight', props.size)]) }) const paddingRef = computed(() => { return getPadding(themeRef.value.self[createKey('padding', props.size)]) }) const valueSetRef = computed(() => { if (props.multiple && Array.isArray(props.value)) { return new Set(props.value) } return new Set() }) const emptyRef = computed(() => { const tmNodes = flattenedNodesRef.value return tmNodes && tmNodes.length === 0 }) const mergedRenderEmptyRef = computed(() => { return mergedComponentPropsRef?.value?.Select?.renderEmpty }) function doToggle(tmNode: TreeNode): void { const { onToggle } = props if (onToggle) onToggle(tmNode) } function doScroll(e: Event): void { const { onScroll } = props if (onScroll) onScroll(e) } // required, scroller sync need to be triggered manually function handleVirtualListScroll(e: Event): void { scrollbarRef.value?.sync() doScroll(e) } function handleVirtualListResize(): void { scrollbarRef.value?.sync() } function getPendingTmNode(): TreeNode | null { const { value: pendingTmNode } = pendingNodeRef if (pendingTmNode) return pendingTmNode return null } function handleOptionMouseEnter( e: MouseEvent, tmNode: TreeNode ): void { if (tmNode.disabled) return setPendingTmNode(tmNode, false) } function handleOptionClick( e: MouseEvent, tmNode: TreeNode ): void { if (tmNode.disabled) return doToggle(tmNode) } // keyboard related methods function handleKeyUp(e: KeyboardEvent): void { if (happensIn(e, 'action')) return props.onKeyup?.(e) } function handleKeyDown(e: KeyboardEvent): void { if (happensIn(e, 'action')) return props.onKeydown?.(e) } function handleMouseDown(e: MouseEvent): void { props.onMousedown?.(e) if (props.focusable) return e.preventDefault() } function next(): void { const { value: pendingTmNode } = pendingNodeRef if (pendingTmNode) { setPendingTmNode(pendingTmNode.getNext({ loop: true }), true) } } function prev(): void { const { value: pendingTmNode } = pendingNodeRef if (pendingTmNode) { setPendingTmNode(pendingTmNode.getPrev({ loop: true }), true) } } function setPendingTmNode( tmNode: TreeNode | null, doScroll = false ): void { pendingNodeRef.value = tmNode if (doScroll) scrollToPendingNode() } function scrollToPendingNode(): void { const tmNode = pendingNodeRef.value if (!tmNode) return const fIndex = fIndexGetterRef.value(tmNode.key) if (fIndex === null) return if (props.virtualScroll) { virtualListRef.value?.scrollTo({ index: fIndex }) } else { scrollbarRef.value?.scrollTo({ index: fIndex, elSize: itemSizeRef.value }) } } function handleFocusin(e: FocusEvent): void { if (selfRef.value?.contains(e.target as Node | null)) { props.onFocus?.(e) } } function handleFocusout(e: FocusEvent): void { if (!selfRef.value?.contains(e.relatedTarget as Node | null)) { props.onBlur?.(e) } } provide(internalSelectionMenuInjectionKey, { handleOptionMouseEnter, handleOptionClick, valueSetRef, pendingTmNodeRef: pendingNodeRef, nodePropsRef: toRef(props, 'nodeProps'), showCheckmarkRef: toRef(props, 'showCheckmark'), multipleRef: toRef(props, 'multiple'), valueRef: toRef(props, 'value'), renderLabelRef: toRef(props, 'renderLabel'), renderOptionRef: toRef(props, 'renderOption'), labelFieldRef: toRef(props, 'labelField'), valueFieldRef: toRef(props, 'valueField') }) provide(internalSelectionMenuBodyInjectionKey, selfRef) onMounted(() => { const { value } = scrollbarRef if (value) value.sync() }) const cssVarsRef = computed(() => { const { size } = props const { common: { cubicBezierEaseInOut }, self: { height, borderRadius, color, groupHeaderTextColor, actionDividerColor, optionTextColorPressed, optionTextColor, optionTextColorDisabled, optionTextColorActive, optionOpacityDisabled, optionCheckColor, actionTextColor, optionColorPending, optionColorActive, loadingColor, loadingSize, optionColorActivePending, [createKey('optionFontSize', size)]: fontSize, [createKey('optionHeight', size)]: optionHeight, [createKey('optionPadding', size)]: optionPadding } } = themeRef.value return { '--n-height': height, '--n-action-divider-color': actionDividerColor, '--n-action-text-color': actionTextColor, '--n-bezier': cubicBezierEaseInOut, '--n-border-radius': borderRadius, '--n-color': color, '--n-option-font-size': fontSize, '--n-group-header-text-color': groupHeaderTextColor, '--n-option-check-color': optionCheckColor, '--n-option-color-pending': optionColorPending, '--n-option-color-active': optionColorActive, '--n-option-color-active-pending': optionColorActivePending, '--n-option-height': optionHeight, '--n-option-opacity-disabled': optionOpacityDisabled, '--n-option-text-color': optionTextColor, '--n-option-text-color-active': optionTextColorActive, '--n-option-text-color-disabled': optionTextColorDisabled, '--n-option-text-color-pressed': optionTextColorPressed, '--n-option-padding': optionPadding, '--n-option-padding-left': getPadding(optionPadding, 'left'), '--n-option-padding-right': getPadding(optionPadding, 'right'), '--n-loading-color': loadingColor, '--n-loading-size': loadingSize } }) const { inlineThemeDisabled } = props const themeClassHandle = inlineThemeDisabled ? useThemeClass( 'internal-select-menu', computed(() => props.size[0]), cssVarsRef, props ) : undefined const exposedProps: InternalExposedProps = { selfRef, next, prev, getPendingTmNode } useOnResize(selfRef, props.onResize) return { mergedTheme: themeRef, mergedClsPrefix: mergedClsPrefixRef, rtlEnabled: rtlEnabledRef, virtualListRef, scrollbarRef, itemSize: itemSizeRef, padding: paddingRef, flattenedNodes: flattenedNodesRef, empty: emptyRef, mergedRenderEmpty: mergedRenderEmptyRef, virtualListContainer() { const { value } = virtualListRef return value?.listElRef }, virtualListContent() { const { value } = virtualListRef return value?.itemsElRef }, doScroll, handleFocusin, handleFocusout, handleKeyUp, handleKeyDown, handleMouseDown, handleVirtualListResize, handleVirtualListScroll, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender, ...exposedProps } }, render() { const { $slots, virtualScroll, clsPrefix, mergedTheme, themeClass, onRender } = this onRender?.() return (
{resolveWrappedSlot( $slots.header, children => children && (
{children}
) )} {this.loading ? (
) : !this.empty ? ( {{ default: () => { return virtualScroll ? ( {{ default: ({ item: tmNode }: { item: TreeNode< SelectGroupOption | SelectOption | SelectIgnoredOption > }) => { return tmNode.isGroup ? ( } /> ) : tmNode.ignored ? null : ( } /> ) } }} ) : (
{this.flattenedNodes.map(tmNode => tmNode.isGroup ? ( } /> ) : ( } /> ) )}
) } }} ) : (
{resolveSlot($slots.empty, () => { return [ this.mergedRenderEmpty?.() || ( ) ] })}
)} {resolveWrappedSlot( $slots.action, children => children && [
{children}
, ] )}
) } }) ================================================ FILE: src/_internal/select-menu/src/SelectOption.tsx ================================================ import type { TreeNode } from 'treemate' import type { PropType, Ref, VNode } from 'vue' import type { SelectOption } from '../../../select/src/interface' import type { RenderLabelImpl, RenderOptionImpl } from './interface' import { useMemo } from 'vooks' import { defineComponent, h, inject, Transition } from 'vue' import { mergeEventHandlers, render } from '../../../_utils' import { NBaseIcon } from '../../icon' import { CheckmarkIcon } from '../../icons' import { internalSelectionMenuInjectionKey } from './interface' function renderCheckMark(show: boolean, clsPrefix: string): VNode { return ( {{ default: () => show ? ( {{ default: () => h(CheckmarkIcon) }} ) : null }} ) } export default defineComponent({ name: 'NBaseSelectOption', props: { clsPrefix: { type: String, required: true }, tmNode: { type: Object as PropType>, required: true } }, setup(props) { const { valueRef, pendingTmNodeRef, multipleRef, valueSetRef, renderLabelRef, renderOptionRef, labelFieldRef, valueFieldRef, showCheckmarkRef, nodePropsRef, handleOptionClick, handleOptionMouseEnter } = inject(internalSelectionMenuInjectionKey)! const isPendingRef = useMemo(() => { const { value: pendingTmNode } = pendingTmNodeRef if (!pendingTmNode) return false return props.tmNode.key === pendingTmNode.key }) function handleClick(e: MouseEvent): void { const { tmNode } = props if (tmNode.disabled) return handleOptionClick(e, tmNode) } function handleMouseEnter(e: MouseEvent): void { const { tmNode } = props if (tmNode.disabled) return handleOptionMouseEnter(e, tmNode) } function handleMouseMove(e: MouseEvent): void { const { tmNode } = props const { value: isPending } = isPendingRef if (tmNode.disabled || isPending) return handleOptionMouseEnter(e, tmNode) } return { multiple: multipleRef, isGrouped: useMemo(() => { const { tmNode } = props const { parent } = tmNode return parent && parent.rawNode.type === 'group' }), showCheckmark: showCheckmarkRef, nodeProps: nodePropsRef, isPending: isPendingRef, isSelected: useMemo(() => { const { value } = valueRef const { value: multiple } = multipleRef if (value === null) return false const optionValue = props.tmNode.rawNode[ valueFieldRef.value ] as NonNullable if (multiple) { const { value: valueSet } = valueSetRef return valueSet.has(optionValue) } else { return value === optionValue } }), labelField: labelFieldRef, renderLabel: renderLabelRef as Ref, renderOption: renderOptionRef as Ref, handleMouseMove, handleMouseEnter, handleClick } }, render() { const { clsPrefix, tmNode: { rawNode }, isSelected, isPending, isGrouped, showCheckmark, nodeProps, renderOption, renderLabel, handleClick, handleMouseEnter, handleMouseMove } = this const checkmark = renderCheckMark(isSelected, clsPrefix) const children = renderLabel ? [renderLabel(rawNode, isSelected), showCheckmark && checkmark] : [ render( rawNode[this.labelField] as SelectOption['label'], rawNode, isSelected ), showCheckmark && checkmark ] const attrs = nodeProps?.(rawNode) const node = (
{children}
) return rawNode.render ? rawNode.render({ node, option: rawNode, selected: isSelected }) : renderOption ? renderOption({ node, option: rawNode, selected: isSelected }) : node } }) ================================================ FILE: src/_internal/select-menu/src/interface.ts ================================================ import type { TreeNode } from 'treemate' import type { HTMLAttributes, Ref, UnwrapRef, VNode, VNodeChild } from 'vue' import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../../select/src/interface' import { createInjectionKey } from '../../../_utils/vue/create-injection-key' export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'huge' export type RenderLabel = ( option: SelectBaseOption & SelectGroupOption & SelectIgnoredOption, selected: boolean ) => VNodeChild export type RenderLabelImpl = ( option: SelectBaseOption | SelectGroupOption | SelectIgnoredOption, selected: boolean ) => VNodeChild export type RenderOption = (info: { node: VNode option: SelectBaseOption & SelectGroupOption & SelectIgnoredOption selected: boolean }) => VNodeChild export type RenderOptionImpl = (info: { node: VNode option: SelectBaseOption | SelectGroupOption | SelectIgnoredOption selected: boolean }) => VNodeChild export type NodeProps = ( option: SelectBaseOption | SelectGroupOption ) => HTMLAttributes & Record export interface InternalSelectMenuInjection { handleOptionMouseEnter: ( e: MouseEvent, tmNode: TreeNode ) => void handleOptionClick: (e: MouseEvent, tmNode: TreeNode) => void showCheckmarkRef: Ref valueSetRef: Ref> pendingTmNodeRef: Ref | null> multipleRef: Ref valueRef: Ref | null> renderLabelRef: Ref renderOptionRef: Ref labelFieldRef: Ref valueFieldRef: Ref nodePropsRef: Ref } export interface InternalExposedProps { selfRef: Ref getPendingTmNode: () => TreeNode | null prev: () => void next: () => void } export const internalSelectionMenuInjectionKey = createInjectionKey('n-internal-select-menu') export const internalSelectionMenuBodyInjectionKey = createInjectionKey< Ref >('n-internal-select-menu-body') export type InternalSelectMenuRef = UnwrapRef ================================================ FILE: src/_internal/select-menu/src/styles/index.cssr.ts ================================================ import { fadeInScaleUpTransition } from '../../../../_styles/transitions/fade-in-scale-up.cssr' import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr' // --n-loading-color // --n-loading-size // --n-option-padding-right export default cB('base-select-menu', ` line-height: 1.5; outline: none; z-index: 0; position: relative; border-radius: var(--n-border-radius); transition: background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier); background-color: var(--n-color); `, [ cB('scrollbar', ` max-height: var(--n-height); `), cB('virtual-list', ` max-height: var(--n-height); `), cB('base-select-option', ` min-height: var(--n-option-height); font-size: var(--n-option-font-size); display: flex; align-items: center; `, [ cE('content', ` z-index: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; `) ]), cB('base-select-group-header', ` min-height: var(--n-option-height); font-size: .93em; display: flex; align-items: center; `), cB('base-select-menu-option-wrapper', ` position: relative; width: 100%; `), cE('loading, empty', ` display: flex; padding: 12px 32px; flex: 1; justify-content: center; `), cE('loading', ` color: var(--n-loading-color); font-size: var(--n-loading-size); `), cE('header', ` padding: 8px var(--n-option-padding-left); font-size: var(--n-option-font-size); transition: color .3s var(--n-bezier), border-color .3s var(--n-bezier); border-bottom: 1px solid var(--n-action-divider-color); color: var(--n-action-text-color); `), cE('action', ` padding: 8px var(--n-option-padding-left); font-size: var(--n-option-font-size); transition: color .3s var(--n-bezier), border-color .3s var(--n-bezier); border-top: 1px solid var(--n-action-divider-color); color: var(--n-action-text-color); `), cB('base-select-group-header', ` position: relative; cursor: default; padding: var(--n-option-padding); color: var(--n-group-header-text-color); `), cB('base-select-option', ` cursor: pointer; position: relative; padding: var(--n-option-padding); transition: color .3s var(--n-bezier), opacity .3s var(--n-bezier); box-sizing: border-box; color: var(--n-option-text-color); opacity: 1; `, [ cM('show-checkmark', ` padding-right: calc(var(--n-option-padding-right) + 20px); `), c('&::before', ` content: ""; position: absolute; left: 4px; right: 4px; top: 0; bottom: 0; border-radius: var(--n-border-radius); transition: background-color .3s var(--n-bezier); `), c('&:active', ` color: var(--n-option-text-color-pressed); `), cM('grouped', ` padding-left: calc(var(--n-option-padding-left) * 1.5); `), cM('pending', [ c('&::before', ` background-color: var(--n-option-color-pending); `) ]), cM('selected', ` color: var(--n-option-text-color-active); `, [ c('&::before', ` background-color: var(--n-option-color-active); `), cM('pending', [ c('&::before', ` background-color: var(--n-option-color-active-pending); `) ]) ]), cM('disabled', ` cursor: not-allowed; `, [ cNotM('selected', ` color: var(--n-option-text-color-disabled); `), cM('selected', ` opacity: var(--n-option-opacity-disabled); `) ]), cE('check', ` font-size: 16px; position: absolute; right: calc(var(--n-option-padding-right) - 4px); top: calc(50% - 7px); color: var(--n-option-check-color); transition: color .3s var(--n-bezier); `, [ fadeInScaleUpTransition({ enterScale: '0.5' }) ]) ]) ]) ================================================ FILE: src/_internal/select-menu/src/styles/rtl.cssr.ts ================================================ import { cB, cE, cM } from '../../../../_utils/cssr' export default cB('base-select-menu', [ cM('rtl', ` direction: rtl; `, [ cB('base-select-option', [ cE('check', ` right: unset; left: calc(var(--n-option-padding-right) - 4px); `), cM('show-checkmark', ` padding-left: calc(var(--n-option-padding-right) + 20px); padding-right: var(--n-option-padding-left); `) ]) ]) ]) ================================================ FILE: src/_internal/select-menu/styles/_common.ts ================================================ export default { height: 'calc(var(--n-option-height) * 7.6)', paddingTiny: '4px 0', paddingSmall: '4px 0', paddingMedium: '4px 0', paddingLarge: '4px 0', paddingHuge: '4px 0', optionPaddingTiny: '0 12px', optionPaddingSmall: '0 12px', optionPaddingMedium: '0 12px', optionPaddingLarge: '0 12px', optionPaddingHuge: '0 12px', loadingSize: '18px' } ================================================ FILE: src/_internal/select-menu/styles/dark.ts ================================================ import type { InternalSelectMenuTheme } from './light' import { commonDark } from '../../../_styles/common' import { emptyDark } from '../../../empty/styles' import { scrollbarDark } from '../../scrollbar/styles' import { self } from './light' const internalSelectMenuDark: InternalSelectMenuTheme = { name: 'InternalSelectMenu', common: commonDark, peers: { Scrollbar: scrollbarDark, Empty: emptyDark }, self } export default internalSelectMenuDark ================================================ FILE: src/_internal/select-menu/styles/index.ts ================================================ export { default as internalSelectMenuDark } from './dark' export { default as internalSelectMenuLight } from './light' export type { InternalSelectMenuTheme, InternalSelectMenuThemeVars } from './light' export { internalSelectMenuRtl } from './rtl' ================================================ FILE: src/_internal/select-menu/styles/light.ts ================================================ import type { ThemeCommonVars } from '../../../_styles/common' import { createTheme } from '../../../_mixins' import { commonLight } from '../../../_styles/common' import { emptyLight } from '../../../empty/styles' import { scrollbarLight } from '../../scrollbar/styles' import commonVariables from './_common' export function self(vars: ThemeCommonVars) { const { borderRadius, popoverColor, textColor3, dividerColor, textColor2, primaryColorPressed, textColorDisabled, primaryColor, opacityDisabled, hoverColor, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeHuge, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge } = vars return { ...commonVariables, optionFontSizeTiny: fontSizeTiny, optionFontSizeSmall: fontSizeSmall, optionFontSizeMedium: fontSizeMedium, optionFontSizeLarge: fontSizeLarge, optionFontSizeHuge: fontSizeHuge, optionHeightTiny: heightTiny, optionHeightSmall: heightSmall, optionHeightMedium: heightMedium, optionHeightLarge: heightLarge, optionHeightHuge: heightHuge, borderRadius, color: popoverColor, groupHeaderTextColor: textColor3, actionDividerColor: dividerColor, optionTextColor: textColor2, optionTextColorPressed: primaryColorPressed, optionTextColorDisabled: textColorDisabled, optionTextColorActive: primaryColor, optionOpacityDisabled: opacityDisabled, optionCheckColor: primaryColor, optionColorPending: hoverColor, optionColorActive: 'rgba(0, 0, 0, 0)', optionColorActivePending: hoverColor, actionTextColor: textColor2, loadingColor: primaryColor } } export type InternalSelectMenuThemeVars = ReturnType const internalSelectMenuLight = createTheme({ name: 'InternalSelectMenu', common: commonLight, peers: { Scrollbar: scrollbarLight, Empty: emptyLight }, self }) export default internalSelectMenuLight export type InternalSelectMenuTheme = typeof internalSelectMenuLight ================================================ FILE: src/_internal/select-menu/styles/rtl.ts ================================================ import type { RtlItem } from '../../../config-provider/src/internal-interface' import rtlStyle from '../src/styles/rtl.cssr' export const internalSelectMenuRtl: RtlItem = { name: 'InternalSelectMenu', style: rtlStyle } ================================================ FILE: src/_internal/selection/index.ts ================================================ export { default } from './src/Selection' export type { InternalSelectionInst } from './src/Selection' ================================================ FILE: src/_internal/selection/src/Selection.tsx ================================================ import type { CSSProperties, InputHTMLAttributes, PropType, VNode } from 'vue' import type { VOverflowInst } from 'vueuc' import type { ThemeProps } from '../../../_mixins' import type { FormValidationStatus } from '../../../form/src/public-types' import type { PopoverProps } from '../../../popover' import type { SelectBaseOption } from '../../../select/src/interface' import type { TagRef } from '../../../tag/src/Tag' import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interface' import type { InternalSelectionTheme } from '../styles' import type { RenderTag } from './interface' import { getPadding } from 'seemly' import { computed, defineComponent, Fragment, h, nextTick, onMounted, ref, toRef, watch, watchEffect } from 'vue' import { VOverflow } from 'vueuc' import { useConfig, useRtl, useTheme, useThemeClass } from '../../../_mixins' import { createKey, getTitleAttribute, render, useOnResize, Wrapper } from '../../../_utils' import { NPopover } from '../../../popover' import { NTag } from '../../../tag' import Suffix from '../../suffix' import { internalSelectionLight } from '../styles' import style from './styles/index.cssr' export interface InternalSelectionInst { isComposing: boolean focus: () => void focusInput: () => void blur: () => void blurInput: () => void $el: HTMLElement } export default defineComponent({ name: 'InternalSelection', props: { ...(useTheme.props as ThemeProps), clsPrefix: { type: String, required: true }, bordered: { type: Boolean as PropType, default: undefined }, active: Boolean, pattern: { type: String, default: '' }, placeholder: String, selectedOption: { type: Object as PropType, default: null }, selectedOptions: { type: Array as PropType, default: null }, labelField: { type: String, default: 'label' }, valueField: { type: String, default: 'value' }, multiple: Boolean, filterable: Boolean, clearable: Boolean, disabled: Boolean, size: { type: String as PropType<'tiny' | 'small' | 'medium' | 'large'>, default: 'medium' }, loading: Boolean, autofocus: Boolean, showArrow: { type: Boolean, default: true }, inputProps: Object as PropType, focused: Boolean, renderTag: Function as PropType, onKeydown: Function as PropType<(e: KeyboardEvent) => void>, onClick: Function as PropType<(e: MouseEvent) => void>, onBlur: Function as PropType<(e: FocusEvent) => void>, onFocus: Function as PropType<(e: FocusEvent) => void>, onDeleteOption: Function as PropType<(option: SelectBaseOption) => void>, maxTagCount: [String, Number] as PropType, ellipsisTagPopoverProps: Object as PropType, onClear: Function as PropType<(e: MouseEvent) => void>, onPatternInput: Function as PropType<(e: InputEvent) => void>, onPatternFocus: Function as PropType<(e: FocusEvent) => void>, onPatternBlur: Function as PropType<(e: FocusEvent) => void>, renderLabel: Function as PropType, status: String as PropType, inlineThemeDisabled: Boolean, ignoreComposition: { type: Boolean, default: true }, onResize: Function as PropType<() => void> }, setup(props) { const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props) const rtlEnabledRef = useRtl( 'InternalSelection', mergedRtlRef, mergedClsPrefixRef ) const patternInputMirrorRef = ref(null) const patternInputRef = ref(null) const selfRef = ref(null) const multipleElRef = ref(null) const singleElRef = ref(null) const patternInputWrapperRef = ref(null) const counterRef = ref(null) const counterWrapperRef = ref(null) const overflowRef = ref(null) const inputTagElRef = ref(null) const showTagsPopoverRef = ref(false) const patternInputFocusedRef = ref(false) const hoverRef = ref(false) const themeRef = useTheme( 'InternalSelection', '-internal-selection', style, internalSelectionLight, props, toRef(props, 'clsPrefix') ) const mergedClearableRef = computed(() => { return ( props.clearable && !props.disabled && (hoverRef.value || props.active) ) }) const filterablePlaceholderRef = computed(() => { return props.selectedOption ? props.renderTag ? props.renderTag({ option: props.selectedOption, handleClose: () => {} }) : props.renderLabel ? props.renderLabel(props.selectedOption as never, true) : render( props.selectedOption[props.labelField], props.selectedOption, true ) : props.placeholder }) const labelRef = computed(() => { const option = props.selectedOption if (!option) return undefined return option[props.labelField] }) const selectedRef = computed(() => { if (props.multiple) { return !!( Array.isArray(props.selectedOptions) && props.selectedOptions.length ) } else { return props.selectedOption !== null } }) function syncMirrorWidth(): void { const { value: patternInputMirrorEl } = patternInputMirrorRef if (patternInputMirrorEl) { const { value: patternInputEl } = patternInputRef if (patternInputEl) { patternInputEl.style.width = `${patternInputMirrorEl.offsetWidth}px` if (props.maxTagCount !== 'responsive') { overflowRef.value?.sync({ showAllItemsBeforeCalculate: false }) } } } } function hideInputTag(): void { const { value: inputTagEl } = inputTagElRef if (inputTagEl) inputTagEl.style.display = 'none' } function showInputTag(): void { const { value: inputTagEl } = inputTagElRef if (inputTagEl) inputTagEl.style.display = 'inline-block' } watch(toRef(props, 'active'), (value) => { if (!value) hideInputTag() }) watch(toRef(props, 'pattern'), () => { if (props.multiple) { void nextTick(syncMirrorWidth) } }) function doFocus(e: FocusEvent): void { const { onFocus } = props if (onFocus) onFocus(e) } function doBlur(e: FocusEvent): void { const { onBlur } = props if (onBlur) onBlur(e) } function doDeleteOption(value: SelectBaseOption): void { const { onDeleteOption } = props if (onDeleteOption) onDeleteOption(value) } function doClear(e: MouseEvent): void { const { onClear } = props if (onClear) onClear(e) } function doPatternInput(value: InputEvent): void { const { onPatternInput } = props if (onPatternInput) onPatternInput(value) } function handleFocusin(e: FocusEvent): void { if ( !e.relatedTarget || !selfRef.value?.contains(e.relatedTarget as Node) ) { doFocus(e) } } function handleFocusout(e: FocusEvent): void { if (selfRef.value?.contains(e.relatedTarget as Node)) return doBlur(e) } function handleClear(e: MouseEvent): void { doClear(e) } function handleMouseEnter(): void { hoverRef.value = true } function handleMouseLeave(): void { hoverRef.value = false } function handleMouseDown(e: MouseEvent): void { if (!props.active || !props.filterable) return if (e.target === patternInputRef.value) return e.preventDefault() } function handleDeleteOption(option: SelectBaseOption): void { doDeleteOption(option) } const isComposingRef = ref(false) function handlePatternKeyDown(e: KeyboardEvent): void { if (e.key === 'Backspace' && !isComposingRef.value) { if (!props.pattern.length) { const { selectedOptions } = props if (selectedOptions?.length) { handleDeleteOption(selectedOptions[selectedOptions.length - 1]) } } } } // the composition end is later than its input so we can cached the event // and return the input event let cachedInputEvent: InputEvent | null = null function handlePatternInputInput(e: InputEvent): void { // we should sync mirror width here const { value: patternInputMirrorEl } = patternInputMirrorRef if (patternInputMirrorEl) { const inputText: string = (e.target as any).value patternInputMirrorEl.textContent = inputText syncMirrorWidth() } if (props.ignoreComposition) { if (!isComposingRef.value) { doPatternInput(e) } else { cachedInputEvent = e } } else { doPatternInput(e) } } function handleCompositionStart(): void { isComposingRef.value = true } function handleCompositionEnd(): void { isComposingRef.value = false if (props.ignoreComposition) { doPatternInput(cachedInputEvent!) } cachedInputEvent = null } function handlePatternInputFocus(e: FocusEvent): void { patternInputFocusedRef.value = true props.onPatternFocus?.(e) } function handlePatternInputBlur(e: FocusEvent): void { patternInputFocusedRef.value = false props.onPatternBlur?.(e) } function blur(): void { if (props.filterable) { patternInputFocusedRef.value = false patternInputWrapperRef.value?.blur() patternInputRef.value?.blur() } else if (props.multiple) { const { value: multipleEl } = multipleElRef multipleEl?.blur() } else { const { value: singleEl } = singleElRef singleEl?.blur() } } function focus(): void { if (props.filterable) { patternInputFocusedRef.value = false patternInputWrapperRef.value?.focus() } else if (props.multiple) { multipleElRef.value?.focus() } else { singleElRef.value?.focus() } } function focusInput(): void { const { value: patternInputEl } = patternInputRef if (patternInputEl) { showInputTag() patternInputEl.focus() } } function blurInput(): void { const { value: patternInputEl } = patternInputRef if (patternInputEl) { patternInputEl.blur() } } function updateCounter(count: number): void { const { value } = counterRef if (value) { value.setTextContent(`+${count}`) } } function getCounter(): HTMLElement | null { const { value } = counterWrapperRef return value } function getTail(): HTMLElement | null { return patternInputRef.value } let enterTimerId: number | null = null function clearEnterTimer(): void { if (enterTimerId !== null) window.clearTimeout(enterTimerId) } function handleMouseEnterCounter(): void { if (props.active) return clearEnterTimer() enterTimerId = window.setTimeout(() => { if (selectedRef.value) { showTagsPopoverRef.value = true } }, 100) } function handleMouseLeaveCounter(): void { clearEnterTimer() } function onPopoverUpdateShow(show: boolean): void { if (!show) { clearEnterTimer() showTagsPopoverRef.value = false } } watch(selectedRef, (value) => { if (!value) { showTagsPopoverRef.value = false } }) onMounted(() => { watchEffect(() => { const patternInputWrapperEl = patternInputWrapperRef.value if (!patternInputWrapperEl) return if (props.disabled) { patternInputWrapperEl.removeAttribute('tabindex') } else { patternInputWrapperEl.tabIndex = patternInputFocusedRef.value ? -1 : 0 } }) }) useOnResize(selfRef, props.onResize) const { inlineThemeDisabled } = props const cssVarsRef = computed(() => { const { size } = props const { common: { cubicBezierEaseInOut }, self: { fontWeight, borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, arrowColor, arrowColorDisabled, loadingColor, // form warning colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, // form error colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, // clear clearColor, clearColorHover, clearColorPressed, clearSize, // arrow arrowSize, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value const paddingSingleDiscrete = getPadding(paddingSingle) const paddingMultipleDiscrete = getPadding(paddingMultiple) return { '--n-bezier': cubicBezierEaseInOut, '--n-border': border, '--n-border-active': borderActive, '--n-border-focus': borderFocus, '--n-border-hover': borderHover, '--n-border-radius': borderRadius, '--n-box-shadow-active': boxShadowActive, '--n-box-shadow-focus': boxShadowFocus, '--n-box-shadow-hover': boxShadowHover, '--n-caret-color': caretColor, '--n-color': color, '--n-color-active': colorActive, '--n-color-disabled': colorDisabled, '--n-font-size': fontSize, '--n-height': height, '--n-padding-single-top': paddingSingleDiscrete.top, '--n-padding-multiple-top': paddingMultipleDiscrete.top, '--n-padding-single-right': paddingSingleDiscrete.right, '--n-padding-multiple-right': paddingMultipleDiscrete.right, '--n-padding-single-left': paddingSingleDiscrete.left, '--n-padding-multiple-left': paddingMultipleDiscrete.left, '--n-padding-single-bottom': paddingSingleDiscrete.bottom, '--n-padding-multiple-bottom': paddingMultipleDiscrete.bottom, '--n-placeholder-color': placeholderColor, '--n-placeholder-color-disabled': placeholderColorDisabled, '--n-text-color': textColor, '--n-text-color-disabled': textColorDisabled, '--n-arrow-color': arrowColor, '--n-arrow-color-disabled': arrowColorDisabled, '--n-loading-color': loadingColor, // form warning '--n-color-active-warning': colorActiveWarning, '--n-box-shadow-focus-warning': boxShadowFocusWarning, '--n-box-shadow-active-warning': boxShadowActiveWarning, '--n-box-shadow-hover-warning': boxShadowHoverWarning, '--n-border-warning': borderWarning, '--n-border-focus-warning': borderFocusWarning, '--n-border-hover-warning': borderHoverWarning, '--n-border-active-warning': borderActiveWarning, // form error '--n-color-active-error': colorActiveError, '--n-box-shadow-focus-error': boxShadowFocusError, '--n-box-shadow-active-error': boxShadowActiveError, '--n-box-shadow-hover-error': boxShadowHoverError, '--n-border-error': borderError, '--n-border-focus-error': borderFocusError, '--n-border-hover-error': borderHoverError, '--n-border-active-error': borderActiveError, // clear '--n-clear-size': clearSize, '--n-clear-color': clearColor, '--n-clear-color-hover': clearColorHover, '--n-clear-color-pressed': clearColorPressed, // arrow-size '--n-arrow-size': arrowSize, // font-weight '--n-font-weight': fontWeight } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( 'internal-selection', computed(() => { return props.size[0] }), cssVarsRef, props ) : undefined return { mergedTheme: themeRef, mergedClearable: mergedClearableRef, mergedClsPrefix: mergedClsPrefixRef, rtlEnabled: rtlEnabledRef, patternInputFocused: patternInputFocusedRef, filterablePlaceholder: filterablePlaceholderRef, label: labelRef, selected: selectedRef, showTagsPanel: showTagsPopoverRef, isComposing: isComposingRef, // dom ref counterRef, counterWrapperRef, patternInputMirrorRef, patternInputRef, selfRef, multipleElRef, singleElRef, patternInputWrapperRef, overflowRef, inputTagElRef, handleMouseDown, handleFocusin, handleClear, handleMouseEnter, handleMouseLeave, handleDeleteOption, handlePatternKeyDown, handlePatternInputInput, handlePatternInputBlur, handlePatternInputFocus, handleMouseEnterCounter, handleMouseLeaveCounter, handleFocusout, handleCompositionEnd, handleCompositionStart, onPopoverUpdateShow, focus, focusInput, blur, blurInput, updateCounter, getCounter, getTail, renderLabel: props.renderLabel as RenderLabelImpl, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { const { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, ellipsisTagPopoverProps, onRender, renderTag, renderLabel } = this onRender?.() const maxTagCountResponsive = maxTagCount === 'responsive' const maxTagCountNumeric = typeof maxTagCount === 'number' const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric const suffix = ( {{ default: () => ( {{ default: () => this.$slots.arrow?.() }} ) }} ) let body: JSX.Element if (multiple) { const { labelField } = this const createTag = (option: SelectBaseOption): JSX.Element => (
{renderTag ? ( renderTag({ option, handleClose: () => { this.handleDeleteOption(option) } }) ) : ( { this.handleDeleteOption(option) }} internalCloseIsButtonTag={false} internalCloseFocusable={false} > {{ default: () => renderLabel ? renderLabel(option, true) : render(option[labelField], option, true) }} )}
) const createOriginalTagNodes = (): VNode[] => (maxTagCountNumeric ? this.selectedOptions!.slice(0, maxTagCount) : this.selectedOptions! ).map(createTag) const input = filterable ? (
{this.pattern}
) : null // May Overflow const renderCounter = maxTagCountResponsive ? () => (
) : undefined let counter: JSX.Element | undefined if (maxTagCountNumeric) { const rest = this.selectedOptions!.length - maxTagCount if (rest > 0) { counter = (
{{ default: () => `+${rest}` }}
) } } const tags = maxTagCountResponsive ? ( filterable ? ( {{ default: createOriginalTagNodes, counter: renderCounter, tail: () => input }} ) : ( {{ default: createOriginalTagNodes, counter: renderCounter }} ) ) : maxTagCountNumeric && counter ? ( createOriginalTagNodes().concat(counter) ) : ( createOriginalTagNodes() ) const renderPopover = useMaxTagCount ? (): JSX.Element => (
{maxTagCountResponsive ? createOriginalTagNodes() : this.selectedOptions!.map(createTag)}
) : undefined const popoverProps = useMaxTagCount ? ({ show: this.showTagsPanel, trigger: 'hover', overlap: true, placement: 'top', width: 'trigger', onUpdateShow: this.onPopoverUpdateShow, theme: this.mergedTheme.peers.Popover, themeOverrides: this.mergedTheme.peerOverrides.Popover, ...ellipsisTagPopoverProps } as const) : null const showPlaceholder = this.selected ? false : this.active ? !this.pattern && !this.isComposing : true const placeholder = showPlaceholder ? (
{this.placeholder}
) : null const popoverTrigger = filterable ? (
{tags} {maxTagCountResponsive ? null : input} {suffix}
) : (
{tags} {suffix}
) body = ( <> {useMaxTagCount ? ( {{ trigger: () => popoverTrigger, default: renderPopover }} ) : ( popoverTrigger )} {placeholder} ) } else { if (filterable) { const hasInput = this.pattern || this.isComposing const showPlaceholder = this.active ? !hasInput : !this.selected const showSelectedLabel = this.active ? false : this.selected body = (
{showSelectedLabel ? (
{renderTag ? renderTag({ option: this.selectedOption!, handleClose: () => {} }) : renderLabel ? renderLabel(this.selectedOption!, true) : render(this.label, this.selectedOption, true)}
) : null} {showPlaceholder ? (
{this.filterablePlaceholder}
) : null} {suffix}
) } else { body = (
{this.label !== undefined ? (
{renderTag ? renderTag({ option: this.selectedOption!, handleClose: () => {} }) : renderLabel ? renderLabel(this.selectedOption!, true) : render(this.label, this.selectedOption, true)}
) : (
{this.placeholder}
)} {suffix}
) } } return (
{body} {bordered ? (
) : null} {bordered ? (
) : null}
) } }) ================================================ FILE: src/_internal/selection/src/interface.ts ================================================ import type { VNodeChild } from 'vue' import type { SelectOption } from '../../../select/src/interface' export type RenderTag = (props: { option: SelectOption handleClose: () => void }) => VNodeChild ================================================ FILE: src/_internal/selection/src/styles/index.cssr.ts ================================================ import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr' // vars: // --n-bezier // --n-border // --n-border-active // --n-border-focus // --n-border-hover // --n-border-radius // --n-box-shadow-active // --n-box-shadow-focus // --n-box-shadow-hover // --n-caret-color // --n-color // --n-color-active // --n-color-disabled // --n-font-size // --n-height // --n-padding-single // --n-padding-multiple // --n-placeholder-color // --n-placeholder-color-disabled // --n-text-color // --n-text-color-disabled // --n-arrow-color // --n-arrow-size // --n-loading-color // --n-font-weight // ...clear vars // ...form item vars export default c([ cB('base-selection', ` --n-padding-single: var(--n-padding-single-top) var(--n-padding-single-right) var(--n-padding-single-bottom) var(--n-padding-single-left); --n-padding-multiple: var(--n-padding-multiple-top) var(--n-padding-multiple-right) var(--n-padding-multiple-bottom) var(--n-padding-multiple-left); position: relative; z-index: auto; box-shadow: none; width: 100%; max-width: 100%; display: inline-block; vertical-align: bottom; border-radius: var(--n-border-radius); min-height: var(--n-height); line-height: 1.5; font-size: var(--n-font-size); `, [ cB('base-loading', ` color: var(--n-loading-color); `), cB('base-selection-tags', 'min-height: var(--n-height);'), cE('border, state-border', ` position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; border: var(--n-border); border-radius: inherit; transition: box-shadow .3s var(--n-bezier), border-color .3s var(--n-bezier); `), cE('state-border', ` z-index: 1; border-color: #0000; `), cB('base-suffix', ` cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; `, [ cE('arrow', ` font-size: var(--n-arrow-size); color: var(--n-arrow-color); transition: color .3s var(--n-bezier); `) ]), cB('base-selection-overlay', ` display: flex; align-items: center; white-space: nowrap; pointer-events: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: var(--n-padding-single); transition: color .3s var(--n-bezier); `, [ cE('wrapper', ` flex-basis: 0; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; `) ]), cB('base-selection-placeholder', ` color: var(--n-placeholder-color); `, [ cE('inner', ` max-width: 100%; overflow: hidden; `) ]), cB('base-selection-tags', ` cursor: pointer; outline: none; box-sizing: border-box; position: relative; z-index: auto; display: flex; padding: var(--n-padding-multiple); flex-wrap: wrap; align-items: center; width: 100%; vertical-align: bottom; background-color: var(--n-color); border-radius: inherit; transition: color .3s var(--n-bezier), box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier); `), cB('base-selection-label', ` height: var(--n-height); display: inline-flex; width: 100%; vertical-align: bottom; cursor: pointer; outline: none; z-index: auto; box-sizing: border-box; position: relative; transition: color .3s var(--n-bezier), box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier); border-radius: inherit; background-color: var(--n-color); align-items: center; `, [ cB('base-selection-input', ` font-size: inherit; line-height: inherit; outline: none; cursor: pointer; box-sizing: border-box; border:none; width: 100%; padding: var(--n-padding-single); background-color: #0000; color: var(--n-text-color); transition: color .3s var(--n-bezier); caret-color: var(--n-caret-color); `, [ cE('content', ` text-overflow: ellipsis; overflow: hidden; white-space: nowrap; `) ]), cE('render-label', ` color: var(--n-text-color); `) ]), cNotM('disabled', [ c('&:hover', [ cE('state-border', ` box-shadow: var(--n-box-shadow-hover); border: var(--n-border-hover); `) ]), cM('focus', [ cE('state-border', ` box-shadow: var(--n-box-shadow-focus); border: var(--n-border-focus); `) ]), cM('active', [ cE('state-border', ` box-shadow: var(--n-box-shadow-active); border: var(--n-border-active); `), cB('base-selection-label', 'background-color: var(--n-color-active);'), cB('base-selection-tags', 'background-color: var(--n-color-active);') ]) ]), cM('disabled', 'cursor: not-allowed;', [ cE('arrow', ` color: var(--n-arrow-color-disabled); `), cB('base-selection-label', ` cursor: not-allowed; background-color: var(--n-color-disabled); `, [ cB('base-selection-input', ` cursor: not-allowed; color: var(--n-text-color-disabled); `), cE('render-label', ` color: var(--n-text-color-disabled); `) ]), cB('base-selection-tags', ` cursor: not-allowed; background-color: var(--n-color-disabled); `), cB('base-selection-placeholder', ` cursor: not-allowed; color: var(--n-placeholder-color-disabled); `) ]), cB('base-selection-input-tag', ` height: calc(var(--n-height) - 6px); line-height: calc(var(--n-height) - 6px); outline: none; display: none; position: relative; margin-bottom: 3px; max-width: 100%; vertical-align: bottom; `, [ cE('input', ` font-size: inherit; font-family: inherit; min-width: 1px; padding: 0; background-color: #0000; outline: none; border: none; max-width: 100%; overflow: hidden; width: 1em; line-height: inherit; cursor: pointer; color: var(--n-text-color); caret-color: var(--n-caret-color); `), cE('mirror', ` position: absolute; left: 0; top: 0; white-space: pre; visibility: hidden; user-select: none; -webkit-user-select: none; opacity: 0; `) ]), ['warning', 'error'].map(status => cM(`${status}-status`, [ cE('state-border', `border: var(--n-border-${status});`), cNotM('disabled', [ c('&:hover', [ cE('state-border', ` box-shadow: var(--n-box-shadow-hover-${status}); border: var(--n-border-hover-${status}); `) ]), cM('active', [ cE('state-border', ` box-shadow: var(--n-box-shadow-active-${status}); border: var(--n-border-active-${status}); `), cB('base-selection-label', `background-color: var(--n-color-active-${status});`), cB('base-selection-tags', `background-color: var(--n-color-active-${status});`) ]), cM('focus', [ cE('state-border', ` box-shadow: var(--n-box-shadow-focus-${status}); border: var(--n-border-focus-${status}); `) ]) ]) ])) ]), cB('base-selection-popover', ` margin-bottom: -3px; display: flex; flex-wrap: wrap; margin-right: -8px; `), cB('base-selection-tag-wrapper', ` max-width: 100%; display: inline-flex; padding: 0 7px 3px 0; `, [ c('&:last-child', 'padding-right: 0;'), cB('tag', ` font-size: 14px; max-width: 100%; `, [ cE('content', ` line-height: 1.25; text-overflow: ellipsis; overflow: hidden; `) ]) ]) ]) ================================================ FILE: src/_internal/selection/src/styles/rtl.cssr.ts ================================================ import { cB, cM } from '../../../../_utils/cssr' export default cB('base-selection', [ cM('rtl', ` direction: rtl; --n-padding-single: var(--n-padding-single-top) var(--n-padding-single-left) var(--n-padding-single-bottom) var(--n-padding-single-right); --n-padding-multiple: var(--n-padding-multiple-top) var(--n-padding-multiple-left) var(--n-padding-multiple-bottom) var(--n-padding-multiple-right); `, [ cB('base-suffix', ` right: unset; left: 10px; `) ]) ]) ================================================ FILE: src/_internal/selection/styles/_common.ts ================================================ export default { paddingSingle: '0 26px 0 12px', paddingMultiple: '3px 26px 0 12px', clearSize: '16px', arrowSize: '16px' } ================================================ FILE: src/_internal/selection/styles/dark.ts ================================================ import type { InternalSelectionTheme } from './light' import { changeColor } from 'seemly' import { commonDark } from '../../../_styles/common' import { popoverDark } from '../../../popover/styles' import commonVars from './_common' const internalSelectionDark: InternalSelectionTheme = { name: 'InternalSelection', common: commonDark, peers: { Popover: popoverDark }, self(vars) { const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightTiny, heightSmall, heightMedium, heightLarge, fontWeight } = vars return { ...commonVars, fontWeight, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightTiny, heightSmall, heightMedium, heightLarge, borderRadius, // default textColor: textColor2, textColorDisabled, placeholderColor, placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: changeColor(primaryColor, { alpha: 0.1 }), border: '1px solid #0000', borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: 'none', boxShadowActive: `0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.4 })}`, boxShadowFocus: `0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.4 })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorDisabled: iconColorDisabled, loadingColor: primaryColor, // warning borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 8px 0 ${changeColor(warningColor, { alpha: 0.4 })}`, boxShadowFocusWarning: `0 0 8px 0 ${changeColor(warningColor, { alpha: 0.4 })}`, colorActiveWarning: changeColor(warningColor, { alpha: 0.1 }), caretColorWarning: warningColor, // error borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 8px 0 ${changeColor(errorColor, { alpha: 0.4 })}`, boxShadowFocusError: `0 0 8px 0 ${changeColor(errorColor, { alpha: 0.4 })}`, colorActiveError: changeColor(errorColor, { alpha: 0.1 }), caretColorError: errorColor, clearColor, clearColorHover, clearColorPressed } } } export default internalSelectionDark ================================================ FILE: src/_internal/selection/styles/index.ts ================================================ export { default as internalSelectionDark } from './dark' export { default as internalSelectionLight } from './light' export type { InternalSelectionTheme, InternalSelectionThemeVars } from './light' export { internalSelectionRtl } from './rtl' ================================================ FILE: src/_internal/selection/styles/light.ts ================================================ import type { ThemeCommonVars } from '../../../_styles/common' import { changeColor } from 'seemly' import { createTheme } from '../../../_mixins' import { commonLight } from '../../../_styles/common' import { popoverLight } from '../../../popover/styles' import commonVariables from './_common' function self(vars: ThemeCommonVars) { const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, borderColor, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightTiny, heightSmall, heightMedium, heightLarge, fontWeight } = vars return { ...commonVariables, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightTiny, heightSmall, heightMedium, heightLarge, borderRadius, fontWeight, // default textColor: textColor2, textColorDisabled, placeholderColor, placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: inputColor, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: 'none', boxShadowActive: `0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`, boxShadowFocus: `0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorDisabled: iconColorDisabled, loadingColor: primaryColor, // warning borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 0 2px ${changeColor(warningColor, { alpha: 0.2 })}`, boxShadowFocusWarning: `0 0 0 2px ${changeColor(warningColor, { alpha: 0.2 })}`, colorActiveWarning: inputColor, caretColorWarning: warningColor, // error borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 0 2px ${changeColor(errorColor, { alpha: 0.2 })}`, boxShadowFocusError: `0 0 0 2px ${changeColor(errorColor, { alpha: 0.2 })}`, colorActiveError: inputColor, caretColorError: errorColor, clearColor, clearColorHover, clearColorPressed } } export type InternalSelectionThemeVars = ReturnType const internalSelectionLight = createTheme({ name: 'InternalSelection', common: commonLight, peers: { Popover: popoverLight }, self }) export default internalSelectionLight export type InternalSelectionTheme = typeof internalSelectionLight ================================================ FILE: src/_internal/selection/styles/rtl.ts ================================================ import type { RtlItem } from '../../../config-provider/src/internal-interface' import rtlStyle from '../src/styles/rtl.cssr' export const internalSelectionRtl: RtlItem = { name: 'InternalSelection', style: rtlStyle } ================================================ FILE: src/_internal/slot-machine/index.ts ================================================ export { default } from './src/SlotMachine' ================================================ FILE: src/_internal/slot-machine/src/SlotMachine.tsx ================================================ import { computed, defineComponent, h, ref, toRef, TransitionGroup, watch } from 'vue' import { useStyle } from '../../../_mixins' import NFadeInExpandTransition from '../../fade-in-expand-transition' import SlotMachineNumber from './SlotMachineNumber' import style from './styles/index.cssr' export default defineComponent({ name: 'BaseSlotMachine', props: { clsPrefix: { type: String, required: true }, value: { type: [Number, String], default: 0 }, max: { type: Number, default: undefined }, appeared: { type: Boolean, required: true } }, setup(props) { useStyle('-base-slot-machine', style, toRef(props, 'clsPrefix')) const oldValueRef = ref() const newValueRef = ref() const numbersRef = computed(() => { if (typeof props.value === 'string') return [] if (props.value < 1) return [0] const numbers: number[] = [] let value = props.value if (props.max !== undefined) { value = Math.min(props.max, value) } while (value >= 1) { numbers.push(value % 10) value /= 10 value = Math.floor(value) } numbers.reverse() return numbers }) watch(toRef(props, 'value'), (value, oldValue) => { if (typeof value === 'string') { newValueRef.value = undefined oldValueRef.value = undefined } else { if (typeof oldValue === 'string') { newValueRef.value = value oldValueRef.value = undefined } else { newValueRef.value = value oldValueRef.value = oldValue } } }) return () => { const { value, clsPrefix } = props return typeof value === 'number' ? ( {{ default: () => numbersRef.value.map((number, i) => ( )) }} {{ default: () => props.max !== undefined && props.max < value ? ( ) : null }} ) : ( {value} ) } } }) ================================================ FILE: src/_internal/slot-machine/src/SlotMachineNumber.tsx ================================================ import type { PropType } from 'vue' import { computed, defineComponent, h, nextTick, ref, toRef, watch } from 'vue' export default defineComponent({ name: 'SlotMachineNumber', props: { clsPrefix: { type: String, required: true }, value: { // could be '+', 1, 2, ... type: [Number, String] as PropType, required: true }, oldOriginalNumber: { type: Number, default: undefined }, newOriginalNumber: { type: Number, default: undefined } }, setup(props) { const numberRef = ref(null) const oldNumberRef = ref(props.value) const newNumberRef = ref(props.value) const scrollAnimationDirectionRef = ref<'up' | 'down'>('up') const activeRef = ref(false) const newNumberScrollAnimationClassRef = computed(() => { return activeRef.value ? `${props.clsPrefix}-base-slot-machine-current-number--${scrollAnimationDirectionRef.value}-scroll` : null }) const oldNumberScrollAnimationClassRef = computed(() => { return activeRef.value ? `${props.clsPrefix}-base-slot-machine-old-number--${scrollAnimationDirectionRef.value}-scroll` : null }) // BUG: may be typescript bug watch(toRef(props, 'value'), (value, oldValue) => { oldNumberRef.value = oldValue newNumberRef.value = value void nextTick(scroll) }) function scroll(): void { const newOriginalNumber = props.newOriginalNumber const oldOriginalNumber = props.oldOriginalNumber if (oldOriginalNumber === undefined || newOriginalNumber === undefined) { return } if (newOriginalNumber > oldOriginalNumber) { scrollByDir('up') } else if (oldOriginalNumber > newOriginalNumber) { scrollByDir('down') } } function scrollByDir(dir: 'up' | 'down'): void { scrollAnimationDirectionRef.value = dir activeRef.value = false void nextTick(() => { void numberRef.value?.offsetWidth activeRef.value = true }) } return () => { const { clsPrefix } = props return ( {oldNumberRef.value !== null ? ( {oldNumberRef.value} ) : null} {newNumberRef.value} {oldNumberRef.value !== null ? ( {oldNumberRef.value} ) : null} ) } } }) ================================================ FILE: src/_internal/slot-machine/src/styles/index.cssr.ts ================================================ import { fadeInWidthExpandTransition } from '../../../../_styles/transitions/fade-in-width-expand.cssr' import { fadeUpWidthExpandTransition } from '../../../../_styles/transitions/fade-up-width-expand.cssr' import { c, cB, cE, cM } from '../../../../_utils/cssr' // ease-out: cubic-bezier(0, 0, .2, 1) export default c([ c('@keyframes n-base-slot-machine-fade-up-in', ` from { transform: translateY(60%); opacity: 0; } to { transform: translateY(0); opacity: 1; } `), c('@keyframes n-base-slot-machine-fade-down-in', ` from { transform: translateY(-60%); opacity: 0; } to { transform: translateY(0); opacity: 1; } `), c('@keyframes n-base-slot-machine-fade-up-out', ` from { transform: translateY(0%); opacity: 1; } to { transform: translateY(-60%); opacity: 0; } `), c('@keyframes n-base-slot-machine-fade-down-out', ` from { transform: translateY(0%); opacity: 1; } to { transform: translateY(60%); opacity: 0; } `), cB('base-slot-machine', ` overflow: hidden; white-space: nowrap; display: inline-block; height: 18px; line-height: 18px; `, [ cB('base-slot-machine-number', ` display: inline-block; position: relative; height: 18px; width: .6em; max-width: .6em; `, [ fadeUpWidthExpandTransition({ duration: '.2s' }), // use 0s, not 0 fadeInWidthExpandTransition({ duration: '.2s', delay: '0s' }), cB('base-slot-machine-old-number', ` display: inline-block; opacity: 0; position: absolute; left: 0; right: 0; `, [ cM('top', { transform: 'translateY(-100%)' }), cM('bottom', { transform: 'translateY(100%)' }), cM('down-scroll', { animation: 'n-base-slot-machine-fade-down-out .2s cubic-bezier(0, 0, .2, 1)', animationIterationCount: 1 }), cM('up-scroll', { animation: 'n-base-slot-machine-fade-up-out .2s cubic-bezier(0, 0, .2, 1)', animationIterationCount: 1 }) ]), cB('base-slot-machine-current-number', ` display: inline-block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: 1; transform: translateY(0); width: .6em; `, [ cM('down-scroll', { animation: 'n-base-slot-machine-fade-down-in .2s cubic-bezier(0, 0, .2, 1)', animationIterationCount: 1 }), cM('up-scroll', { animation: 'n-base-slot-machine-fade-up-in .2s cubic-bezier(0, 0, .2, 1)', animationIterationCount: 1 }), cE('inner', ` display: inline-block; position: absolute; right: 0; top: 0; width: .6em; `, [ cM('not-number', ` right: unset; left: 0; `) ]) ]) ]) ]) ]) ================================================ FILE: src/_internal/suffix/index.ts ================================================ export { default } from './src/Suffix' ================================================ FILE: src/_internal/suffix/src/Suffix.tsx ================================================ import type { PropType } from 'vue' import { defineComponent, h } from 'vue' import { resolveSlot } from '../../../_utils/vue' import NBaseClear from '../../clear' import { NBaseIcon } from '../../icon' import { ChevronDownIcon } from '../../icons' import NBaseLoading from '../../loading' export default defineComponent({ name: 'InternalSelectionSuffix', props: { clsPrefix: { type: String, required: true }, showArrow: { type: Boolean, default: undefined }, showClear: { type: Boolean, default: undefined }, loading: { type: Boolean, default: false }, onClear: Function as PropType<(e: MouseEvent) => void> }, setup(props, { slots }) { return () => { const { clsPrefix } = props return ( {{ default: () => props.showArrow ? ( {{ placeholder: () => ( {{ default: () => resolveSlot(slots.default, () => [ ]) }} ) }} ) : null }} ) } } }) ================================================ FILE: src/_internal/wave/index.ts ================================================ export { default } from './src/Wave' export type { BaseWaveRef } from './src/Wave' ================================================ FILE: src/_internal/wave/src/Wave.tsx ================================================ import { defineComponent, h, nextTick, onBeforeUnmount, ref, toRef } from 'vue' import { useStyle } from '../../../_mixins' import style from './styles/index.cssr' export interface BaseWaveRef { play: () => void } export default defineComponent({ name: 'BaseWave', props: { clsPrefix: { type: String, required: true } }, setup(props) { useStyle('-base-wave', style, toRef(props, 'clsPrefix')) const selfRef = ref(null) const activeRef = ref(false) let animationTimerId: number | null = null onBeforeUnmount(() => { if (animationTimerId !== null) { window.clearTimeout(animationTimerId) } }) return { active: activeRef, selfRef, play() { if (animationTimerId !== null) { window.clearTimeout(animationTimerId) activeRef.value = false animationTimerId = null } void nextTick(() => { void selfRef.value?.offsetHeight activeRef.value = true animationTimerId = window.setTimeout(() => { activeRef.value = false animationTimerId = null }, 1000) }) } } }, render() { const { clsPrefix } = this return (
) } }) ================================================ FILE: src/_internal/wave/src/styles/index.cssr.ts ================================================ import { cB } from '../../../../_utils/cssr/index' export default cB('base-wave', ` position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: inherit; `) ================================================ FILE: src/_mixins/common.ts ================================================ export const cssrAnchorMetaName = 'naive-ui-style' ================================================ FILE: src/_mixins/index.ts ================================================ export { defaultClsPrefix, default as useConfig } from './use-config' export { useThemeClass } from './use-css-vars-class' export { default as useFormItem } from './use-form-item' export { default as useHljs } from './use-hljs' export type { Hljs } from './use-hljs' export { default as useLocale } from './use-locale' export { useRtl } from './use-rtl' export { default as useStyle } from './use-style' export { createTheme, default as useTheme } from './use-theme' export type { MergedTheme, Theme, ThemeProps, ThemePropsReactive } from './use-theme' ================================================ FILE: src/_mixins/use-config.ts ================================================ import type { ComputedRef, Ref } from 'vue' import type { Breakpoints, GlobalComponentConfig, RtlEnabledState } from '../config-provider/src/internal-interface' import { computed, inject, shallowRef } from 'vue' import { configProviderInjectionKey } from '../config-provider/src/context' type UseConfigProps = Readonly<{ bordered?: boolean [key: string]: unknown }> export const defaultClsPrefix = 'n' export default function useConfig( props: UseConfigProps = {}, options: { defaultBordered?: boolean } = { defaultBordered: true } ): { inlineThemeDisabled: boolean | undefined mergedRtlRef: Ref | undefined mergedBorderedRef: ComputedRef mergedClsPrefixRef: Ref mergedBreakpointsRef: Ref | undefined mergedComponentPropsRef: Ref | undefined namespaceRef: ComputedRef } { const NConfigProvider = inject(configProviderInjectionKey, null) return { // NConfigProvider, inlineThemeDisabled: NConfigProvider?.inlineThemeDisabled, mergedRtlRef: NConfigProvider?.mergedRtlRef, mergedComponentPropsRef: NConfigProvider?.mergedComponentPropsRef, mergedBreakpointsRef: NConfigProvider?.mergedBreakpointsRef, mergedBorderedRef: computed(() => { const { bordered } = props if (bordered !== undefined) return bordered return ( NConfigProvider?.mergedBorderedRef.value ?? options.defaultBordered ?? true ) }), mergedClsPrefixRef: NConfigProvider ? NConfigProvider.mergedClsPrefixRef : shallowRef(defaultClsPrefix), namespaceRef: computed(() => NConfigProvider?.mergedNamespaceRef.value) } } export function useMergedClsPrefix(): Ref { const NConfigProvider = inject(configProviderInjectionKey, null) return NConfigProvider ? NConfigProvider.mergedClsPrefixRef : shallowRef(defaultClsPrefix) } ================================================ FILE: src/_mixins/use-css-vars-class.ts ================================================ import type { ComputedRef, Ref } from 'vue' import { useSsrAdapter } from '@css-render/vue3-ssr' import { hash } from 'css-render' import { inject, ref, watchEffect } from 'vue' import { throwError } from '../_utils' import { c } from '../_utils/cssr' import { configProviderInjectionKey } from '../config-provider/src/context' export function useThemeClass( componentName: string, hashRef: Ref | undefined, cssVarsRef: ComputedRef> | undefined, props: { themeOverrides?: unknown, builtinThemeOverrides?: unknown } ): { themeClass: Ref onRender: () => void } { if (!cssVarsRef) throwError('useThemeClass', 'cssVarsRef is not passed') const NConfigProvider = inject(configProviderInjectionKey, null) const mergedThemeHashRef = NConfigProvider?.mergedThemeHashRef const styleMountTarget = NConfigProvider?.styleMountTarget const themeClassRef = ref('') const ssrAdapter = useSsrAdapter() let renderCallback: (() => void) | undefined const hashClassPrefix = `__${componentName}` const mountStyle = (): void => { let finalThemeHash = hashClassPrefix const hashValue = hashRef ? hashRef.value : undefined const themeHash = mergedThemeHashRef?.value if (themeHash) finalThemeHash += `-${themeHash}` if (hashValue) finalThemeHash += `-${hashValue}` const { themeOverrides, builtinThemeOverrides } = props if (themeOverrides) { finalThemeHash += `-${hash(JSON.stringify(themeOverrides))}` } if (builtinThemeOverrides) { finalThemeHash += `-${hash(JSON.stringify(builtinThemeOverrides))}` } themeClassRef.value = finalThemeHash renderCallback = () => { const cssVars = cssVarsRef.value let style = '' for (const key in cssVars) { style += `${key}: ${cssVars[key]};` } c(`.${finalThemeHash}`, style).mount({ id: finalThemeHash, ssr: ssrAdapter, parent: styleMountTarget }) renderCallback = undefined } } watchEffect(() => { mountStyle() }) return { themeClass: themeClassRef, onRender: () => { renderCallback?.() } } } ================================================ FILE: src/_mixins/use-form-item.ts ================================================ import type { ComputedRef, Ref } from 'vue' import type { FormItemSize, FormValidationStatus } from '../form/src/public-types' import { computed, inject, onBeforeUnmount, provide } from 'vue' import { createInjectionKey } from '../_utils' type AllowedSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | number export interface FormItemInjection { path: Ref disabled: Ref mergedSize: ComputedRef mergedValidationStatus: ComputedRef restoreValidation: () => void handleContentBlur: () => void handleContentFocus: () => void handleContentInput: () => void handleContentChange: () => void } export const formItemInjectionKey = createInjectionKey('n-form-item') interface UseFormItemOptions { defaultSize?: FormItemSize mergedSize?: (formItem: FormItemInjection | null) => T mergedDisabled?: (formItem: FormItemInjection | null) => boolean } interface UseFormItemProps { size?: T disabled?: boolean status?: FormValidationStatus } export interface UseFormItem { mergedSizeRef: ComputedRef mergedDisabledRef: ComputedRef mergedStatusRef: ComputedRef nTriggerFormBlur: () => void nTriggerFormChange: () => void nTriggerFormFocus: () => void nTriggerFormInput: () => void } export default function useFormItem( props: UseFormItemProps, { defaultSize = 'medium', mergedSize, mergedDisabled }: UseFormItemOptions = {} ): UseFormItem { const NFormItem = inject(formItemInjectionKey, null) provide(formItemInjectionKey, null) const mergedSizeRef = computed( mergedSize ? () => mergedSize(NFormItem) : () => { const { size } = props if (size) return size if (NFormItem) { const { mergedSize } = NFormItem if (mergedSize.value !== undefined) { return mergedSize.value as T } } return defaultSize as T } ) const mergedDisabledRef = computed( mergedDisabled ? () => mergedDisabled(NFormItem) : () => { const { disabled } = props if (disabled !== undefined) { return disabled } if (NFormItem) { return NFormItem.disabled.value } return false } ) const mergedStatusRef = computed(() => { const { status } = props if (status) return status return NFormItem?.mergedValidationStatus.value }) onBeforeUnmount(() => { if (NFormItem) { NFormItem.restoreValidation() } }) return { mergedSizeRef, mergedDisabledRef, mergedStatusRef, nTriggerFormBlur() { if (NFormItem) { NFormItem.handleContentBlur() } }, nTriggerFormChange() { if (NFormItem) { NFormItem.handleContentChange() } }, nTriggerFormFocus() { if (NFormItem) { NFormItem.handleContentFocus() } }, nTriggerFormInput() { if (NFormItem) { NFormItem.handleContentInput() } } } } ================================================ FILE: src/_mixins/use-hljs.ts ================================================ import type { HLJSApi } from 'highlight.js' import type { ComputedRef, Ref } from 'vue' import { computed, inject, watchEffect } from 'vue' import { warn } from '../_utils' import { configProviderInjectionKey } from '../config-provider/src/context' interface UseHljsProps { hljs?: unknown [key: string]: unknown } export interface Hljs { highlight: HLJSApi['highlight'] getLanguage: HLJSApi['getLanguage'] } export default function useHljs( props: UseHljsProps, shouldHighlightRef?: Ref ): ComputedRef { const NConfigProvider = inject(configProviderInjectionKey, null) if (__DEV__) { const warnHljs = (): void => { if (!props.hljs && !NConfigProvider?.mergedHljsRef.value) { warn('code', 'hljs is not set.') } } if (!shouldHighlightRef) { warnHljs() } else { watchEffect(() => { if (shouldHighlightRef.value) { warnHljs() } }) } } return computed(() => { return (props.hljs as any) || NConfigProvider?.mergedHljsRef.value }) } ================================================ FILE: src/_mixins/use-locale.ts ================================================ import type { Ref } from 'vue' import type { NLocale } from '../locales/common/enUS' import type { NDateLocale } from '../locales/date/enUS' import { computed, inject } from 'vue' import { configProviderInjectionKey } from '../config-provider/src/context' import { dateEnUS, enUS } from '../locales' export default function useLocale( ns: T ): { localeRef: Ref dateLocaleRef: Ref } { const { mergedLocaleRef, mergedDateLocaleRef } = inject(configProviderInjectionKey, null) || {} const localeRef = computed(() => { return mergedLocaleRef?.value?.[ns] ?? enUS[ns] }) const dateLocaleRef = computed(() => { return mergedDateLocaleRef?.value ?? dateEnUS }) return { dateLocaleRef, localeRef } } ================================================ FILE: src/_mixins/use-rtl.ts ================================================ import type { Ref } from 'vue' import type { RtlEnabledState, RtlItem } from '../config-provider/src/internal-interface' import { useSsrAdapter } from '@css-render/vue3-ssr' import { exists } from 'css-render' import { computed, inject, onBeforeMount, watchEffect } from 'vue' import { configProviderInjectionKey } from '../config-provider/src/context' import { cssrAnchorMetaName } from './common' export function useRtl( mountId: string, rtlStateRef: Ref | undefined, clsPrefixRef: Ref ): Ref | undefined { if (!rtlStateRef) return undefined const ssrAdapter = useSsrAdapter() const componentRtlStateRef = computed(() => { const { value: rtlState } = rtlStateRef if (!rtlState) { return undefined } const componentRtlState = rtlState[mountId as keyof RtlEnabledState] if (!componentRtlState) { return undefined } return componentRtlState }) const NConfigProvider = inject(configProviderInjectionKey, null) const mountStyle = (): void => { watchEffect(() => { const { value: clsPrefix } = clsPrefixRef const id = `${clsPrefix}${mountId}Rtl` // if it already exists, we only need to watch clsPrefix, although in most // of time it's unnecessary... However we can at least listen less // handlers, which is great. if (exists(id, ssrAdapter)) return const { value: componentRtlState } = componentRtlStateRef if (!componentRtlState) return componentRtlState.style.mount({ id, head: true, anchorMetaName: cssrAnchorMetaName, props: { bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined }, ssr: ssrAdapter, parent: NConfigProvider?.styleMountTarget }) }) } if (ssrAdapter) { mountStyle() } else { onBeforeMount(mountStyle) } return componentRtlStateRef } ================================================ FILE: src/_mixins/use-style.ts ================================================ import type { CNode } from 'css-render' import type { Ref } from 'vue' import { useSsrAdapter } from '@css-render/vue3-ssr' import { inject, onBeforeMount } from 'vue' import globalStyle from '../_styles/global/index.cssr' import { throwError } from '../_utils' import { configProviderInjectionKey } from '../config-provider/src/context' import { cssrAnchorMetaName } from './common' export default function useStyle( mountId: string, style: CNode, clsPrefixRef: Ref ): void { if (!style) { if (__DEV__) throwError('use-style', 'No style is specified.') return } const ssrAdapter = useSsrAdapter() const NConfigProvider = inject(configProviderInjectionKey, null) const mountStyle = (): void => { const clsPrefix = clsPrefixRef.value style.mount({ id: clsPrefix === undefined ? mountId : clsPrefix + mountId, head: true, anchorMetaName: cssrAnchorMetaName, props: { bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined }, ssr: ssrAdapter, parent: NConfigProvider?.styleMountTarget }) if (!NConfigProvider?.preflightStyleDisabled) { globalStyle.mount({ id: 'n-global', head: true, anchorMetaName: cssrAnchorMetaName, ssr: ssrAdapter, parent: NConfigProvider?.styleMountTarget }) } } if (ssrAdapter) { mountStyle() } else { onBeforeMount(mountStyle) } } ================================================ FILE: src/_mixins/use-theme.ts ================================================ import type { CNode } from 'css-render' import type { ComputedRef, PropType, Ref } from 'vue' import type { ThemeCommonVars } from '../_styles/common' import type { GlobalTheme } from '../config-provider' import { useSsrAdapter } from '@css-render/vue3-ssr' import { merge } from 'lodash-es' import { computed, inject, onBeforeMount } from 'vue' import globalStyle from '../_styles/global/index.cssr' import { configProviderInjectionKey } from '../config-provider/src/context' import { cssrAnchorMetaName } from './common' export interface Theme, R = any> { name: N common?: ThemeCommonVars peers?: R self?: (vars: ThemeCommonVars) => T } export interface ThemeProps { theme: PropType themeOverrides: PropType> builtinThemeOverrides: PropType> } export interface ThemePropsReactive { theme?: T themeOverrides?: ExtractThemeOverrides builtinThemeOverrides?: ExtractThemeOverrides } export type ExtractThemeVars = T extends Theme ? unknown extends U // self is undefined, ThemeVars is unknown ? Record : U : Record export type ExtractPeerOverrides = T extends Theme ? { peers?: { [k in keyof V]?: ExtractThemeOverrides } } : T // V is peers theme export type ExtractMergedPeerOverrides = T extends Theme ? { [k in keyof V]?: ExtractPeerOverrides } : T export type ExtractThemeOverrides = Partial> & ExtractPeerOverrides & { common?: Partial } export function createTheme( theme: Theme ): Theme { return theme } type UseThemeProps = Readonly<{ theme?: T | undefined themeOverrides?: ExtractThemeOverrides builtinThemeOverrides?: ExtractThemeOverrides }> export type MergedTheme = T extends Theme ? { common: ThemeCommonVars self: V peers: W peerOverrides: ExtractMergedPeerOverrides } : T function useTheme( resolveId: Exclude, mountId: string, style: CNode | undefined, defaultTheme: Theme, props: UseThemeProps>, clsPrefixRef: Ref | undefined ): ComputedRef>> { const ssrAdapter = useSsrAdapter() const NConfigProvider = inject(configProviderInjectionKey, null) if (style) { const mountStyle = (): void => { const clsPrefix = clsPrefixRef?.value style.mount({ id: clsPrefix === undefined ? mountId : clsPrefix + mountId, head: true, props: { bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined }, anchorMetaName: cssrAnchorMetaName, ssr: ssrAdapter, parent: NConfigProvider?.styleMountTarget }) if (!NConfigProvider?.preflightStyleDisabled) { globalStyle.mount({ id: 'n-global', head: true, anchorMetaName: cssrAnchorMetaName, ssr: ssrAdapter, parent: NConfigProvider?.styleMountTarget }) } } if (ssrAdapter) { mountStyle() } else { onBeforeMount(mountStyle) } } const mergedThemeRef = computed(() => { // keep props to make theme overrideable const { theme: { common: selfCommon, self, peers = {} } = {}, themeOverrides: selfOverrides = {} as ExtractThemeOverrides< Theme >, builtinThemeOverrides: builtinOverrides = {} as ExtractThemeOverrides< Theme > } = props const { common: selfCommonOverrides, peers: peersOverrides } = selfOverrides const { common: globalCommon = undefined, [resolveId]: { common: globalSelfCommon = undefined, self: globalSelf = undefined, peers: globalPeers = {} } = {} } = NConfigProvider?.mergedThemeRef.value || {} const { common: globalCommonOverrides = undefined, [resolveId]: globalSelfOverrides = {} } = NConfigProvider?.mergedThemeOverridesRef.value || {} const { common: globalSelfCommonOverrides, peers: globalPeersOverrides = {} } = globalSelfOverrides const mergedCommon = merge( {}, selfCommon || globalSelfCommon || globalCommon || defaultTheme.common, globalCommonOverrides, globalSelfCommonOverrides, selfCommonOverrides ) const mergedSelf = merge( // {}, executed every time, no need for empty obj (self || globalSelf || defaultTheme.self)?.(mergedCommon) as T, builtinOverrides, globalSelfOverrides, selfOverrides ) return { common: mergedCommon, self: mergedSelf, peers: merge({}, defaultTheme.peers, globalPeers, peers), peerOverrides: merge( {}, builtinOverrides.peers, globalPeersOverrides, peersOverrides ) } }) return mergedThemeRef } useTheme.props = { theme: Object, themeOverrides: Object, builtinThemeOverrides: Object } as const /** * props.theme (Theme): * { * common: CommonThemeVars, * self(): ThemeVars, * peers: { Component: Theme } * } * provider.theme: * { * common: CommonThemeVars, * Button: Theme * ... * } * defaultTheme: * { * common: CommonThemeVars, * self(): ThemeVars, * peers: { Component: Theme } * } * * props.themeOverrides (ThemeOverrides): * { * common: CommonThemeVars, * peers: { Component: ThemeOverrides }, * ...ThemeVars * } * provider.themeOverrides: * { * common: CommonThemeVars, * Component: ThemeOverrides * ... * } * * mergedTheme: * { * common: CommonThemeVars, * self: ThemeVars, * peers: { Component: Theme }, * overrides: { Component: ThemeOverrides } * } */ export default useTheme ================================================ FILE: src/_styles/common/_common.ts ================================================ export default { fontFamily: 'v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', fontFamilyMono: 'v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace', fontWeight: '400', fontWeightStrong: '500', cubicBezierEaseInOut: 'cubic-bezier(.4, 0, .2, 1)', cubicBezierEaseOut: 'cubic-bezier(0, 0, .2, 1)', cubicBezierEaseIn: 'cubic-bezier(.4, 0, 1, 1)', borderRadius: '3px', borderRadiusSmall: '2px', fontSize: '14px', fontSizeMini: '12px', fontSizeTiny: '12px', fontSizeSmall: '14px', fontSizeMedium: '14px', fontSizeLarge: '15px', fontSizeHuge: '16px', lineHeight: '1.6', heightMini: '16px', // private now, it's too small heightTiny: '22px', heightSmall: '28px', heightMedium: '34px', heightLarge: '40px', heightHuge: '46px' } ================================================ FILE: src/_styles/common/dark.ts ================================================ import type { ThemeCommonVars } from './light' import { composite, rgba, scaleColor } from 'seemly' import commonVariables from './_common' const base = { neutralBase: '#000', neutralInvertBase: '#fff', neutralTextBase: '#fff', neutralPopover: 'rgb(72, 72, 78)', neutralCard: 'rgb(24, 24, 28)', neutralModal: 'rgb(44, 44, 50)', neutralBody: 'rgb(16, 16, 20)', alpha1: '0.9', alpha2: '0.82', alpha3: '0.52', alpha4: '0.38', alpha5: '0.28', alphaClose: '0.52', alphaDisabled: '0.38', alphaDisabledInput: '0.06', alphaPending: '0.09', alphaTablePending: '0.06', alphaTableStriped: '0.05', alphaPressed: '0.05', alphaAvatar: '0.18', alphaRail: '0.2', alphaProgressRail: '0.12', alphaBorder: '0.24', alphaDivider: '0.09', alphaInput: '0.1', alphaAction: '0.06', alphaTab: '0.04', alphaScrollbar: '0.2', alphaScrollbarHover: '0.3', alphaCode: '0.12', alphaTag: '0.2', // primary primaryHover: '#7fe7c4', primaryDefault: '#63e2b7', primaryActive: '#5acea7', primarySuppl: 'rgb(42, 148, 125)', // info infoHover: '#8acbec', infoDefault: '#70c0e8', infoActive: '#66afd3', infoSuppl: 'rgb(56, 137, 197)', // error errorHover: '#e98b8b', errorDefault: '#e88080', errorActive: '#e57272', errorSuppl: 'rgb(208, 58, 82)', // warning warningHover: '#f5d599', warningDefault: '#f2c97d', warningActive: '#e6c260', warningSuppl: 'rgb(240, 138, 0)', // success successHover: '#7fe7c4', successDefault: '#63e2b7', successActive: '#5acea7', successSuppl: 'rgb(42, 148, 125)' } const baseBackgroundRgb = rgba(base.neutralBase) const baseInvertBackgroundRgb = rgba(base.neutralInvertBase) const overlayPrefix = `rgba(${baseInvertBackgroundRgb.slice(0, 3).join(', ')}, ` function overlay(alpha: number | string): string { return `${overlayPrefix + String(alpha)})` } function neutral(alpha: number | string): string { const overlayRgba = Array.from(baseInvertBackgroundRgb) overlayRgba[3] = Number(alpha) return composite( baseBackgroundRgb, overlayRgba as [number, number, number, number] ) } const derived: ThemeCommonVars = { name: 'common' as const, ...commonVariables, baseColor: base.neutralBase, // primary color primaryColor: base.primaryDefault, primaryColorHover: base.primaryHover, primaryColorPressed: base.primaryActive, primaryColorSuppl: base.primarySuppl, // info color infoColor: base.infoDefault, infoColorHover: base.infoHover, infoColorPressed: base.infoActive, infoColorSuppl: base.infoSuppl, // success color successColor: base.successDefault, successColorHover: base.successHover, successColorPressed: base.successActive, successColorSuppl: base.successSuppl, // warning color warningColor: base.warningDefault, warningColorHover: base.warningHover, warningColorPressed: base.warningActive, warningColorSuppl: base.warningSuppl, // error color errorColor: base.errorDefault, errorColorHover: base.errorHover, errorColorPressed: base.errorActive, errorColorSuppl: base.errorSuppl, // text color textColorBase: base.neutralTextBase, textColor1: overlay(base.alpha1), textColor2: overlay(base.alpha2), textColor3: overlay(base.alpha3), // textColor4: overlay(base.alpha4), // disabled, placeholder, icon // textColor5: overlay(base.alpha5), textColorDisabled: overlay(base.alpha4), placeholderColor: overlay(base.alpha4), placeholderColorDisabled: overlay(base.alpha5), iconColor: overlay(base.alpha4), iconColorDisabled: overlay(base.alpha5), iconColorHover: overlay(Number(base.alpha4) * 1.25), iconColorPressed: overlay(Number(base.alpha4) * 0.8), opacity1: base.alpha1, opacity2: base.alpha2, opacity3: base.alpha3, opacity4: base.alpha4, opacity5: base.alpha5, dividerColor: overlay(base.alphaDivider), borderColor: overlay(base.alphaBorder), // close closeIconColorHover: overlay(Number(base.alphaClose)), closeIconColor: overlay(Number(base.alphaClose)), closeIconColorPressed: overlay(Number(base.alphaClose)), closeColorHover: 'rgba(255, 255, 255, .12)', closeColorPressed: 'rgba(255, 255, 255, .08)', // clear clearColor: overlay(base.alpha4), clearColorHover: scaleColor(overlay(base.alpha4), { alpha: 1.25 }), clearColorPressed: scaleColor(overlay(base.alpha4), { alpha: 0.8 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: overlay(base.alphaProgressRail), railColor: overlay(base.alphaRail), popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: neutral(base.alphaTag), avatarColor: overlay(base.alphaAvatar), invertedColor: base.neutralBase, inputColor: overlay(base.alphaInput), codeColor: overlay(base.alphaCode), tabColor: overlay(base.alphaTab), actionColor: overlay(base.alphaAction), tableHeaderColor: overlay(base.alphaAction), hoverColor: overlay(base.alphaPending), tableColorHover: overlay(base.alphaTablePending), tableColorStriped: overlay(base.alphaTableStriped), pressedColor: overlay(base.alphaPressed), opacityDisabled: base.alphaDisabled, inputColorDisabled: overlay(base.alphaDisabledInput), buttonColor2: 'rgba(255, 255, 255, .08)', buttonColor2Hover: 'rgba(255, 255, 255, .12)', buttonColor2Pressed: 'rgba(255, 255, 255, .08)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .24), 0 3px 6px 0 rgba(0, 0, 0, .18), 0 5px 12px 4px rgba(0, 0, 0, .12)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .24), 0 6px 12px 0 rgba(0, 0, 0, .16), 0 9px 18px 8px rgba(0, 0, 0, .10)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' } export default derived ================================================ FILE: src/_styles/common/index.ts ================================================ export { default as commonDark } from './dark' export { default as commonLight } from './light' export type { ThemeCommonVars } from './light' ================================================ FILE: src/_styles/common/light.ts ================================================ import { composite, rgba, scaleColor } from 'seemly' import commonVariables from './_common' const base = { neutralBase: '#FFF', neutralInvertBase: '#000', neutralTextBase: '#000', neutralPopover: '#fff', neutralCard: '#fff', neutralModal: '#fff', neutralBody: '#fff', alpha1: '0.82', alpha2: '0.72', alpha3: '0.38', alpha4: '0.24', // disabled text, placeholder, icon alpha5: '0.18', // disabled placeholder alphaClose: '0.6', alphaDisabled: '0.5', alphaDisabledInput: '0.02', alphaPending: '0.05', alphaTablePending: '0.02', alphaPressed: '0.07', alphaAvatar: '0.2', alphaRail: '0.14', alphaProgressRail: '.08', alphaBorder: '0.12', alphaDivider: '0.06', alphaInput: '0', alphaAction: '0.02', alphaTab: '0.04', alphaScrollbar: '0.25', alphaScrollbarHover: '0.4', alphaCode: '0.05', alphaTag: '0.02', // primary primaryHover: '#36ad6a', primaryDefault: '#18a058', primaryActive: '#0c7a43', primarySuppl: '#36ad6a', // info infoHover: '#4098fc', infoDefault: '#2080f0', infoActive: '#1060c9', infoSuppl: '#4098fc', // error errorHover: '#de576d', errorDefault: '#d03050', errorActive: '#ab1f3f', errorSuppl: '#de576d', // warning warningHover: '#fcb040', warningDefault: '#f0a020', warningActive: '#c97c10', warningSuppl: '#fcb040', // success successHover: '#36ad6a', successDefault: '#18a058', successActive: '#0c7a43', successSuppl: '#36ad6a' } const baseBackgroundRgb = rgba(base.neutralBase) const baseInvertBackgroundRgb = rgba(base.neutralInvertBase) const overlayPrefix = `rgba(${baseInvertBackgroundRgb.slice(0, 3).join(', ')}, ` function overlay(alpha: string | number) { return `${overlayPrefix + String(alpha)})` } function neutral(alpha: string | number) { const overlayRgba = Array.from(baseInvertBackgroundRgb) overlayRgba[3] = Number(alpha) return composite( baseBackgroundRgb, overlayRgba as [number, number, number, number] ) } const derived = { name: 'common' as const, ...commonVariables, baseColor: base.neutralBase, // primary color primaryColor: base.primaryDefault, primaryColorHover: base.primaryHover, primaryColorPressed: base.primaryActive, primaryColorSuppl: base.primarySuppl, // info color infoColor: base.infoDefault, infoColorHover: base.infoHover, infoColorPressed: base.infoActive, infoColorSuppl: base.infoSuppl, // success color successColor: base.successDefault, successColorHover: base.successHover, successColorPressed: base.successActive, successColorSuppl: base.successSuppl, // warning color warningColor: base.warningDefault, warningColorHover: base.warningHover, warningColorPressed: base.warningActive, warningColorSuppl: base.warningSuppl, // error color errorColor: base.errorDefault, errorColorHover: base.errorHover, errorColorPressed: base.errorActive, errorColorSuppl: base.errorSuppl, // text color textColorBase: base.neutralTextBase, textColor1: 'rgb(31, 34, 37)', textColor2: 'rgb(51, 54, 57)', textColor3: 'rgb(118, 124, 130)', // textColor4: neutral(base.alpha4), // disabled, placeholder, icon // textColor5: neutral(base.alpha5), textColorDisabled: neutral(base.alpha4), placeholderColor: neutral(base.alpha4), placeholderColorDisabled: neutral(base.alpha5), iconColor: neutral(base.alpha4), iconColorHover: scaleColor(neutral(base.alpha4), { lightness: 0.75 }), iconColorPressed: scaleColor(neutral(base.alpha4), { lightness: 0.9 }), iconColorDisabled: neutral(base.alpha5), opacity1: base.alpha1, opacity2: base.alpha2, opacity3: base.alpha3, opacity4: base.alpha4, opacity5: base.alpha5, dividerColor: 'rgb(239, 239, 245)', borderColor: 'rgb(224, 224, 230)', // close closeIconColor: neutral(Number(base.alphaClose)), closeIconColorHover: neutral(Number(base.alphaClose)), closeIconColorPressed: neutral(Number(base.alphaClose)), closeColorHover: 'rgba(0, 0, 0, .09)', closeColorPressed: 'rgba(0, 0, 0, .13)', // clear clearColor: neutral(base.alpha4), clearColorHover: scaleColor(neutral(base.alpha4), { lightness: 0.75 }), clearColorPressed: scaleColor(neutral(base.alpha4), { lightness: 0.9 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: neutral(base.alphaProgressRail), railColor: 'rgb(219, 219, 223)', popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: '#eee', avatarColor: neutral(base.alphaAvatar), invertedColor: 'rgb(0, 20, 40)', inputColor: neutral(base.alphaInput), codeColor: 'rgb(244, 244, 248)', tabColor: 'rgb(247, 247, 250)', actionColor: 'rgb(250, 250, 252)', tableHeaderColor: 'rgb(250, 250, 252)', hoverColor: 'rgb(243, 243, 245)', // use color with alpha since it can be nested with header filter & sorter effect tableColorHover: 'rgba(0, 0, 100, 0.03)', tableColorStriped: 'rgba(0, 0, 100, 0.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', // secondary button color // can also be used in tertiary button & quaternary button buttonColor2: 'rgba(46, 51, 56, .05)', buttonColor2Hover: 'rgba(46, 51, 56, .09)', buttonColor2Pressed: 'rgba(46, 51, 56, .13)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' } export default derived export type ThemeCommonVars = typeof derived ================================================ FILE: src/_styles/global/index.cssr.ts ================================================ import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { fontSize, fontFamily, lineHeight } = commonVariables // All the components need the style // It is static and won't be changed in the app's lifetime // If user want to overrides it they need to use `n-global-style` is provided // // Technically we can remove font-size & font-family & line-height to make // it pure. However the coding cost doesn't worth it. // // -webkit-tap-hilight-color: // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color // In some android devices, there will be the style. export default c('body', ` margin: 0; font-size: ${fontSize}; font-family: ${fontFamily}; line-height: ${lineHeight}; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; `, [ c('input', ` font-family: inherit; font-size: inherit; `) ]) ================================================ FILE: src/_styles/transitions/fade-down.cssr.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseInOut } = commonVariables interface FadeDownTransitionOptions { name?: string fromOffset?: string enterDuration?: string leaveDuration?: string enterCubicBezier?: string leaveCubicBezier?: string } export function fadeDownTransition({ name = 'fade-down', fromOffset = '-4px', enterDuration = '.3s', leaveDuration = '.3s', enterCubicBezier = cubicBezierEaseInOut, leaveCubicBezier = cubicBezierEaseInOut }: FadeDownTransitionOptions = {}): CNode[] { return [ c(`&.${name}-transition-enter-from, &.${name}-transition-leave-to`, { opacity: 0, transform: `translateY(${fromOffset})` }), c(`&.${name}-transition-enter-to, &.${name}-transition-leave-from`, { opacity: 1, transform: 'translateY(0)' }), c(`&.${name}-transition-leave-active`, { transition: `opacity ${leaveDuration} ${leaveCubicBezier}, transform ${leaveDuration} ${leaveCubicBezier}` }), c(`&.${name}-transition-enter-active`, { transition: `opacity ${enterDuration} ${enterCubicBezier}, transform ${enterDuration} ${enterCubicBezier}` }) ] } ================================================ FILE: src/_styles/transitions/fade-in-height-expand.cssr.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseInOut, cubicBezierEaseOut, cubicBezierEaseIn } = commonVariables interface FadeInHeightExpandTransitionOption { overflow?: string duration?: string originalTransition?: string leavingDelay?: string foldPadding?: boolean enterToProps?: Record | undefined leaveToProps?: Record | undefined reverse?: boolean } export function fadeInHeightExpandTransition({ overflow = 'hidden', duration = '.3s', originalTransition = '', leavingDelay = '0s', foldPadding = false, enterToProps = undefined, leaveToProps = undefined, reverse = false }: FadeInHeightExpandTransitionOption = {}): CNode[] { const enterClass = reverse ? 'leave' : 'enter' const leaveClass = reverse ? 'enter' : 'leave' return [ c(`&.fade-in-height-expand-transition-${leaveClass}-from, &.fade-in-height-expand-transition-${enterClass}-to`, { ...enterToProps, opacity: 1 }), c(`&.fade-in-height-expand-transition-${leaveClass}-to, &.fade-in-height-expand-transition-${enterClass}-from`, { ...leaveToProps, opacity: 0, marginTop: '0 !important', marginBottom: '0 !important', paddingTop: foldPadding ? '0 !important' : undefined, paddingBottom: foldPadding ? '0 !important' : undefined }), c(`&.fade-in-height-expand-transition-${leaveClass}-active`, ` overflow: ${overflow}; transition: max-height ${duration} ${cubicBezierEaseInOut} ${leavingDelay}, opacity ${duration} ${cubicBezierEaseOut} ${leavingDelay}, margin-top ${duration} ${cubicBezierEaseInOut} ${leavingDelay}, margin-bottom ${duration} ${cubicBezierEaseInOut} ${leavingDelay}, padding-top ${duration} ${cubicBezierEaseInOut} ${leavingDelay}, padding-bottom ${duration} ${cubicBezierEaseInOut} ${leavingDelay} ${originalTransition ? `,${originalTransition}` : ''} `), c(`&.fade-in-height-expand-transition-${enterClass}-active`, ` overflow: ${overflow}; transition: max-height ${duration} ${cubicBezierEaseInOut}, opacity ${duration} ${cubicBezierEaseIn}, margin-top ${duration} ${cubicBezierEaseInOut}, margin-bottom ${duration} ${cubicBezierEaseInOut}, padding-top ${duration} ${cubicBezierEaseInOut}, padding-bottom ${duration} ${cubicBezierEaseInOut} ${originalTransition ? `,${originalTransition}` : ''} `) ] } ================================================ FILE: src/_styles/transitions/fade-in-scale-up.cssr.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseIn, cubicBezierEaseOut } = commonVariables interface FadeInScaleUpTransitionOptions { transformOrigin?: string duration?: string enterScale?: string originalTransform?: string originalTransition?: string } export function fadeInScaleUpTransition({ transformOrigin = 'inherit', duration = '.2s', enterScale = '.9', originalTransform = '', originalTransition = '' }: FadeInScaleUpTransitionOptions = {}): CNode[] { return [ c('&.fade-in-scale-up-transition-leave-active', { transformOrigin, transition: `opacity ${duration} ${cubicBezierEaseIn}, transform ${duration} ${cubicBezierEaseIn} ${ originalTransition && `,${originalTransition}` }` }), c('&.fade-in-scale-up-transition-enter-active', { transformOrigin, transition: `opacity ${duration} ${cubicBezierEaseOut}, transform ${duration} ${cubicBezierEaseOut} ${ originalTransition && `,${originalTransition}` }` }), c('&.fade-in-scale-up-transition-enter-from, &.fade-in-scale-up-transition-leave-to', { opacity: 0, transform: `${originalTransform} scale(${enterScale})` }), c('&.fade-in-scale-up-transition-leave-from, &.fade-in-scale-up-transition-enter-to', { opacity: 1, transform: `${originalTransform} scale(1)` }) ] } ================================================ FILE: src/_styles/transitions/fade-in-width-expand.cssr.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseInOut } = commonVariables interface FadeInWidthExpandTransition { duration?: string delay?: string } export function fadeInWidthExpandTransition({ duration = '.2s', delay = '.1s' }: FadeInWidthExpandTransition = {}): CNode[] { return [ c('&.fade-in-width-expand-transition-leave-from, &.fade-in-width-expand-transition-enter-to', { opacity: 1 }), c('&.fade-in-width-expand-transition-leave-to, &.fade-in-width-expand-transition-enter-from', ` opacity: 0!important; margin-left: 0!important; margin-right: 0!important; `), c('&.fade-in-width-expand-transition-leave-active', ` overflow: hidden; transition: opacity ${duration} ${cubicBezierEaseInOut}, max-width ${duration} ${cubicBezierEaseInOut} ${delay}, margin-left ${duration} ${cubicBezierEaseInOut} ${delay}, margin-right ${duration} ${cubicBezierEaseInOut} ${delay}; `), c('&.fade-in-width-expand-transition-enter-active', ` overflow: hidden; transition: opacity ${duration} ${cubicBezierEaseInOut} ${delay}, max-width ${duration} ${cubicBezierEaseInOut}, margin-left ${duration} ${cubicBezierEaseInOut}, margin-right ${duration} ${cubicBezierEaseInOut}; `) ] } ================================================ FILE: src/_styles/transitions/fade-in.cssr.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseInOut } = commonVariables interface FadeInTransitionOptions { name?: string enterDuration?: string leaveDuration?: string enterCubicBezier?: string leaveCubicBezier?: string } export function fadeInTransition({ name = 'fade-in', enterDuration = '0.2s', leaveDuration = '0.2s', enterCubicBezier = cubicBezierEaseInOut, leaveCubicBezier = cubicBezierEaseInOut }: FadeInTransitionOptions = {}): CNode[] { return [ c(`&.${name}-transition-enter-active`, { transition: `all ${enterDuration} ${enterCubicBezier}!important` }), c(`&.${name}-transition-leave-active`, { transition: `all ${leaveDuration} ${leaveCubicBezier}!important` }), c(`&.${name}-transition-enter-from, &.${name}-transition-leave-to`, { opacity: 0 }), c(`&.${name}-transition-leave-from, &.${name}-transition-enter-to`, { opacity: 1 }) ] } ================================================ FILE: src/_styles/transitions/fade-up-width-expand.cssr.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseOut } = commonVariables interface FadeUpWidthExpandTransition { duration?: string } export function fadeUpWidthExpandTransition({ duration = '.2s' }: FadeUpWidthExpandTransition = {}): CNode[] { return [ c('&.fade-up-width-expand-transition-leave-active', { transition: ` opacity ${duration} ${cubicBezierEaseOut}, max-width ${duration} ${cubicBezierEaseOut}, transform ${duration} ${cubicBezierEaseOut} ` }), c('&.fade-up-width-expand-transition-enter-active', { transition: ` opacity ${duration} ${cubicBezierEaseOut}, max-width ${duration} ${cubicBezierEaseOut}, transform ${duration} ${cubicBezierEaseOut} ` }), c('&.fade-up-width-expand-transition-enter-to', { opacity: 1, transform: 'translateX(0) translateY(0)' }), c('&.fade-up-width-expand-transition-enter-from', { maxWidth: '0 !important', opacity: 0, transform: 'translateY(60%)' }), c('&.fade-up-width-expand-transition-leave-from', { opacity: 1, transform: 'translateY(0)' }), c('&.fade-up-width-expand-transition-leave-to', { maxWidth: '0 !important', opacity: 0, transform: 'translateY(60%)' }) ] } ================================================ FILE: src/_styles/transitions/icon-switch.cssr.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseInOut } = commonVariables interface IconSwitchTransitionOptions { originalTransform?: string left?: string | number top?: string | number transition?: string } export function iconSwitchTransition({ originalTransform = '', left = 0, top = 0, transition = `all .3s ${cubicBezierEaseInOut} !important` }: IconSwitchTransitionOptions = {}): CNode[] { return [ c('&.icon-switch-transition-enter-from, &.icon-switch-transition-leave-to', { transform: `${originalTransform} scale(0.75)`, left, top, opacity: 0 }), c('&.icon-switch-transition-enter-to, &.icon-switch-transition-leave-from', { transform: `scale(1) ${originalTransform}`, left, top, opacity: 1 }), c('&.icon-switch-transition-enter-active, &.icon-switch-transition-leave-active', { transformOrigin: 'center', position: 'absolute', left, top, transition }) ] } ================================================ FILE: src/_styles/transitions/slide-in-from-bottom.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseIn, cubicBezierEaseOut } = commonVariables interface SlideInFromBottomTransitionOptions { duration?: string leaveDuration?: string name?: string } export function slideInFromBottomTransition({ duration = '0.3s', leaveDuration = '0.2s', name = 'slide-in-from-bottom' }: SlideInFromBottomTransitionOptions = {}): CNode[] { return [ c(`&.${name}-transition-leave-active`, { transition: `transform ${leaveDuration} ${cubicBezierEaseIn}` }), c(`&.${name}-transition-enter-active`, { transition: `transform ${duration} ${cubicBezierEaseOut}` }), c(`&.${name}-transition-enter-to`, { transform: 'translateY(0)' }), c(`&.${name}-transition-enter-from`, { transform: 'translateY(100%)' }), c(`&.${name}-transition-leave-from`, { transform: 'translateY(0)' }), c(`&.${name}-transition-leave-to`, { transform: 'translateY(100%)' }) ] } ================================================ FILE: src/_styles/transitions/slide-in-from-left.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseIn, cubicBezierEaseOut } = commonVariables interface SlideInFromLeftTransitionOptions { duration?: string leaveDuration?: string name?: string } export function slideInFromLeftTransition({ duration = '0.3s', leaveDuration = '0.2s', name = 'slide-in-from-left' }: SlideInFromLeftTransitionOptions = {}): CNode[] { return [ c(`&.${name}-transition-leave-active`, { transition: `transform ${leaveDuration} ${cubicBezierEaseIn}` }), c(`&.${name}-transition-enter-active`, { transition: `transform ${duration} ${cubicBezierEaseOut}` }), c(`&.${name}-transition-enter-to`, { transform: 'translateX(0)' }), c(`&.${name}-transition-enter-from`, { transform: 'translateX(-100%)' }), c(`&.${name}-transition-leave-from`, { transform: 'translateX(0)' }), c(`&.${name}-transition-leave-to`, { transform: 'translateX(-100%)' }) ] } ================================================ FILE: src/_styles/transitions/slide-in-from-right.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseIn, cubicBezierEaseOut } = commonVariables interface SlideInFromRightTransitionOptions { duration?: string leaveDuration?: string name?: string } export function slideInFromRightTransition({ duration = '0.3s', leaveDuration = '0.2s', name = 'slide-in-from-right' }: SlideInFromRightTransitionOptions = {}): CNode[] { return [ c(`&.${name}-transition-leave-active`, { transition: `transform ${leaveDuration} ${cubicBezierEaseIn}` }), c(`&.${name}-transition-enter-active`, { transition: `transform ${duration} ${cubicBezierEaseOut}` }), c(`&.${name}-transition-enter-to`, { transform: 'translateX(0)' }), c(`&.${name}-transition-enter-from`, { transform: 'translateX(100%)' }), c(`&.${name}-transition-leave-from`, { transform: 'translateX(0)' }), c(`&.${name}-transition-leave-to`, { transform: 'translateX(100%)' }) ] } ================================================ FILE: src/_styles/transitions/slide-in-from-top.ts ================================================ import type { CNode } from 'css-render' import { c } from '../../_utils/cssr' import commonVariables from '../common/_common' const { cubicBezierEaseIn, cubicBezierEaseOut } = commonVariables interface SlideInFromTopTransitionOptions { duration?: string leaveDuration?: string name?: string } export function slideInFromTopTransition({ duration = '0.3s', leaveDuration = '0.2s', name = 'slide-in-from-top' }: SlideInFromTopTransitionOptions = {}): CNode[] { return [ c(`&.${name}-transition-leave-active`, { transition: `transform ${leaveDuration} ${cubicBezierEaseIn}` }), c(`&.${name}-transition-enter-active`, { transition: `transform ${duration} ${cubicBezierEaseOut}` }), c(`&.${name}-transition-enter-to`, { transform: 'translateY(0)' }), c(`&.${name}-transition-enter-from`, { transform: 'translateY(-100%)' }), c(`&.${name}-transition-leave-from`, { transform: 'translateY(0)' }), c(`&.${name}-transition-leave-to`, { transform: 'translateY(-100%)' }) ] } ================================================ FILE: src/_utils/color/index.ts ================================================ import { composite } from 'seemly' export function createHoverColor(rgb: string): string { return composite(rgb, [255, 255, 255, 0.16]) } export function createPressedColor(rgb: string): string { return composite(rgb, [0, 0, 0, 0.12]) } ================================================ FILE: src/_utils/composable/index.ts ================================================ export { useAdjustedTo } from './use-adjusted-to' export { useInjectionCollection, useInjectionElementCollection, useInjectionInstanceCollection } from './use-collection' export { useDeferredTrue } from './use-deferred-true' export { useHoudini } from './use-houdini' export { useIsComposing } from './use-is-composing' export { lockHtmlScrollRightCompensationRef, useLockHtmlScroll } from './use-lock-html-scroll' export { useReactivated } from './use-reactivated' export { useOnResize } from './use-resize' ================================================ FILE: src/_utils/composable/use-adjusted-to.ts ================================================ import type { ComponentPublicInstance, ComputedRef, PropType } from 'vue' import { off, on } from 'evtd' import { useMemo } from 'vooks' import { inject, onBeforeUnmount, onMounted, ref } from 'vue' import { internalSelectionMenuBodyInjectionKey } from '../../_internal/select-menu/src/interface' import { drawerBodyInjectionKey } from '../../drawer/src/interface' import { modalBodyInjectionKey } from '../../modal/src/interface' import { popoverBodyInjectionKey } from '../../popover/src/interface' interface UseAdjustedToProps { to?: string | HTMLElement | boolean [key: string]: unknown } const teleportDisabled = '__disabled__' function useAdjustedTo( props: UseAdjustedToProps ): ComputedRef { const modal = inject(modalBodyInjectionKey, null) const drawer = inject(drawerBodyInjectionKey, null) const popover = inject(popoverBodyInjectionKey, null) const selectMenu = inject(internalSelectionMenuBodyInjectionKey, null) const fullscreenElementRef = ref() if (typeof document !== 'undefined') { fullscreenElementRef.value = document.fullscreenElement const handleFullscreenChange = (): void => { fullscreenElementRef.value = document.fullscreenElement } onMounted(() => { on('fullscreenchange', document, handleFullscreenChange) }) onBeforeUnmount(() => { off('fullscreenchange', document, handleFullscreenChange) }) } return useMemo(() => { const { to } = props if (to !== undefined) { if (to === false) return teleportDisabled if (to === true) return fullscreenElementRef.value || 'body' return to } if (modal?.value) { return (modal.value as ComponentPublicInstance).$el ?? modal.value } if (drawer?.value) return drawer.value if (popover?.value) return popover.value if (selectMenu?.value) return selectMenu.value return to ?? (fullscreenElementRef.value || 'body') }) } // teleport disabled key useAdjustedTo.tdkey = teleportDisabled useAdjustedTo.propTo = { type: [String, Object, Boolean] as PropType, default: undefined } export { useAdjustedTo } ================================================ FILE: src/_utils/composable/use-browser-location.ts ================================================ import type { Ref } from 'vue' import { onMounted, onUnmounted, ref } from 'vue' import { isBrowser } from '../env/is-browser' export interface IWindowLocation { hash?: string host?: string hostname?: string href?: string origin?: string pathname?: string port?: string protocol?: string search?: string } export function useBrowserLocation( customWindow = isBrowser ? window : null ): Ref { const getWindowLocation = (): IWindowLocation => { const { hash, host, hostname, href, origin, pathname, port, protocol, search } = customWindow?.location || {} return { hash, host, hostname, href, origin, pathname, port, protocol, search } } const locationState = ref(getWindowLocation()) const updateLocation = (): void => { locationState.value = getWindowLocation() } onMounted(() => { if (customWindow) { customWindow.addEventListener('popstate', updateLocation) customWindow.addEventListener('hashchange', updateLocation) } }) onUnmounted(() => { if (customWindow) { customWindow.removeEventListener('popstate', updateLocation) customWindow.removeEventListener('hashchange', updateLocation) } }) return locationState } ================================================ FILE: src/_utils/composable/use-collection.ts ================================================ import type { InjectionKey, Ref } from 'vue' import { getCurrentInstance, inject, onBeforeUnmount, onMounted, watch } from 'vue' // injection.collection { // key1: [insta, instb] // key2: [instc] // } export function useInjectionInstanceCollection( injectionName: string | InjectionKey, collectionKey: string, registerKeyRef: Ref ): void { const injection = inject> | null>( injectionName, null ) if (injection === null) return const vm = getCurrentInstance()?.proxy watch(registerKeyRef, registerInstance) registerInstance(registerKeyRef.value) onBeforeUnmount(() => { registerInstance(undefined, registerKeyRef.value) }) function registerInstance(key?: string, oldKey?: string): void { if (!injection) return const collection = injection[collectionKey] if (oldKey !== undefined) removeInstance(collection, oldKey) if (key !== undefined) addInstance(collection, key) } function removeInstance( collection: Record, key: string ): void { if (!collection[key]) collection[key] = [] collection[key].splice( collection[key].findIndex(instance => instance === vm), 1 ) } function addInstance(collection: Record, key: string): void { if (!collection[key]) collection[key] = [] if (!~collection[key].findIndex(instance => instance === vm)) { collection[key].push(vm) } } } // injection.collection { // key1: [insta.value, instb.value] // key2: [instc.value] // } export function useInjectionCollection( injectionName: string | InjectionKey, collectionKey: string, valueRef: Ref ): void { const injection = inject | null>(injectionName, null) if (injection === null) return if (!(collectionKey in injection)) { injection[collectionKey] = [] } injection[collectionKey].push(valueRef.value) watch(valueRef, (value, prevValue) => { const collectionArray = injection[collectionKey] const index = collectionArray.findIndex( collectionValue => collectionValue === prevValue ) if (~index) collectionArray.splice(index, 1) collectionArray.push(value) }) onBeforeUnmount(() => { const collectionArray = injection[collectionKey] const index = collectionArray.findIndex( collectionValue => collectionValue === valueRef.value ) if (~index) collectionArray.splice(index, 1) }) } // injection.collection { // key1: [insta.$el, instb.$el] // key2: [instc.$el] // } export function useInjectionElementCollection( injectionName: string | InjectionKey, collectionKey: string, getElement: () => HTMLElement | null ): void { const injection = inject | null>( injectionName, null ) if (injection === null) return if (!(collectionKey in injection)) { injection[collectionKey] = [] } onMounted(() => { const el = getElement() if (!el) return injection[collectionKey].push(el) }) onBeforeUnmount(() => { const collectionArray = injection[collectionKey] const element = getElement() const index = collectionArray.findIndex( collectionElement => collectionElement === element ) if (~index) collectionArray.splice(index, 1) }) } ================================================ FILE: src/_utils/composable/use-deferred-true.ts ================================================ import type { Ref } from 'vue' import { ref, watch } from 'vue' export function useDeferredTrue( valueRef: Ref, delay: number, shouldDelayRef: Ref ): Ref { if (!delay) return valueRef const delayedRef = ref(valueRef.value) let timerId: number | null = null watch(valueRef, (value) => { if (timerId !== null) window.clearTimeout(timerId) if (value === true) { if (shouldDelayRef && !shouldDelayRef.value) { delayedRef.value = true } else { timerId = window.setTimeout(() => { delayedRef.value = true }, delay) } } else { delayedRef.value = false } }) return delayedRef } ================================================ FILE: src/_utils/composable/use-houdini.ts ================================================ import { isBrowser } from '../env/is-browser' let houdiniRegistered = false export function useHoudini(): void { if (!isBrowser) return if (!window.CSS) return if (!houdiniRegistered) { houdiniRegistered = true if ('registerProperty' in window?.CSS) { try { ;(CSS as any).registerProperty({ name: '--n-color-start', syntax: '', inherits: false, initialValue: '#0000' }) ;(CSS as any).registerProperty({ name: '--n-color-end', syntax: '', inherits: false, initialValue: '#0000' }) } catch {} } } } ================================================ FILE: src/_utils/composable/use-is-composing.ts ================================================ import type { Ref } from 'vue' import { onBeforeMount, onBeforeUnmount, ref } from 'vue' import { isBrowser } from '../env/is-browser' const isComposingRef = ref(false) function compositionStartHandler(): void { isComposingRef.value = true } function compositionEndHandler(): void { isComposingRef.value = false } let mountedCount = 0 export function useIsComposing(): Ref { if (isBrowser) { onBeforeMount(() => { if (!mountedCount) { window.addEventListener('compositionstart', compositionStartHandler) window.addEventListener('compositionend', compositionEndHandler) } mountedCount++ }) onBeforeUnmount(() => { if (mountedCount <= 1) { window.removeEventListener('compositionstart', compositionStartHandler) window.removeEventListener('compositionend', compositionEndHandler) mountedCount = 0 } else { mountedCount-- } }) } return isComposingRef } ================================================ FILE: src/_utils/composable/use-lock-html-scroll.ts ================================================ import type { Ref, WatchStopHandle } from 'vue' import { onBeforeUnmount, onMounted, ref, watch } from 'vue' let lockCount = 0 let originalMarginRight: string = '' let originalOverflow: string = '' let originalOverflowX: string = '' let originalOverflowY: string = '' export const lockHtmlScrollRightCompensationRef = ref('0px') export function useLockHtmlScroll(lockRef: Ref): void { // not browser if (typeof document === 'undefined') return const el = document.documentElement let watchStopHandle: WatchStopHandle | undefined let activated = false const unlock = (): void => { el.style.marginRight = originalMarginRight el.style.overflow = originalOverflow el.style.overflowX = originalOverflowX el.style.overflowY = originalOverflowY lockHtmlScrollRightCompensationRef.value = '0px' } onMounted(() => { watchStopHandle = watch( lockRef, (value) => { if (value) { if (!lockCount) { const scrollbarWidth = window.innerWidth - el.offsetWidth if (scrollbarWidth > 0) { originalMarginRight = el.style.marginRight el.style.marginRight = `${scrollbarWidth}px` lockHtmlScrollRightCompensationRef.value = `${scrollbarWidth}px` } originalOverflow = el.style.overflow originalOverflowX = el.style.overflowX originalOverflowY = el.style.overflowY el.style.overflow = 'hidden' el.style.overflowX = 'hidden' el.style.overflowY = 'hidden' } activated = true lockCount++ } else { lockCount-- if (!lockCount) { unlock() } activated = false } }, { immediate: true } ) }) onBeforeUnmount(() => { watchStopHandle?.() if (activated) { lockCount-- if (!lockCount) { unlock() } activated = false } }) } ================================================ FILE: src/_utils/composable/use-reactivated.ts ================================================ import { onActivated, onDeactivated } from 'vue' export function useReactivated(callback: () => void): { isDeactivated: boolean } { const isDeactivatedRef = { isDeactivated: false } let activateStateInitialized = false onActivated(() => { isDeactivatedRef.isDeactivated = false if (!activateStateInitialized) { activateStateInitialized = true return } callback() }) onDeactivated(() => { isDeactivatedRef.isDeactivated = true if (!activateStateInitialized) { activateStateInitialized = true } }) return isDeactivatedRef } ================================================ FILE: src/_utils/composable/use-resize.ts ================================================ import type { Ref } from 'vue' import { onBeforeUnmount, onMounted, watch } from 'vue' import { resizeObserverManager } from 'vueuc' export function useOnResize( elRef: Ref, onResize: (() => void) | undefined ): void { // it needn't be reactive since it's for internal usage if (onResize) { onMounted(() => { const { value: el } = elRef if (el) { resizeObserverManager.registerHandler(el, onResize) } }) // avoid memory leak watch( elRef, (_, oldEl) => { if (oldEl) { resizeObserverManager.unregisterHandler(oldEl) } }, { deep: false } ) onBeforeUnmount(() => { const { value: el } = elRef if (el) { resizeObserverManager.unregisterHandler(el) } }) } } ================================================ FILE: src/_utils/css/color-to-class.ts ================================================ export function color2Class(color: string): string { return color.replace(/#|\(|\)|,|\s|\./g, '_') } ================================================ FILE: src/_utils/css/format-length.ts ================================================ const pureNumberRegex = /^(\d|\.)+$/ const numberRegex = /(\d|\.)+/ interface FormatLengthOptions { c?: number offset?: number attachPx?: boolean } export function formatLength< T extends number | string | null | undefined | any >( length: T, { c = 1, offset = 0, attachPx = true }: FormatLengthOptions = {} ): T extends null ? null : T extends undefined ? undefined : T extends string | number ? string : T { if (typeof length === 'number') { const result = (length + offset) * c if (result === 0) return '0' as any return `${result}px` as any } else if (typeof length === 'string') { if (pureNumberRegex.test(length)) { const result = (Number(length) + offset) * c if (attachPx) { if (result === 0) return '0' as any return `${result}px` as any } else { return `${result}` as any } } else { const result = numberRegex.exec(length) if (!result) return length as any return length.replace( numberRegex, String((Number(result[0]) + offset) * c) ) as any } } return length as any } ================================================ FILE: src/_utils/css/index.ts ================================================ export { color2Class } from './color-to-class' export { formatLength } from './format-length' export { rtlInset } from './rtl-inset' ================================================ FILE: src/_utils/css/rtl-inset.ts ================================================ import { getPadding } from 'seemly' export function rtlInset(inset: string): string { const { left, right, top, bottom } = getPadding(inset) return `${top} ${left} ${bottom} ${right}` } ================================================ FILE: src/_utils/cssr/index.ts ================================================ import type { CNode, CProperties } from 'css-render' import { plugin as BemPlugin } from '@css-render/plugin-bem' import { CssRender } from 'css-render' const namespace = 'n' const prefix = `.${namespace}-` const elementPrefix = '__' const modifierPrefix = '--' const cssr = CssRender() const plugin = BemPlugin({ blockPrefix: prefix, elementPrefix, modifierPrefix }) cssr.use(plugin) const { c, find } = cssr const { cB, cE, cM, cNotM } = plugin function insideModal(style: CNode): CNode { return c( ({ props: { bPrefix } }) => `${bPrefix || prefix}modal, ${bPrefix || prefix}drawer`, [style] ) } function insidePopover(style: CNode): CNode { return c(({ props: { bPrefix } }) => `${bPrefix || prefix}popover`, [style]) } function asModal(style: CProperties): CNode { return c(({ props: { bPrefix } }) => `&${bPrefix || prefix}modal`, style) } // child block const cCB: typeof cB = ((...args: any[]) => { return c('>', [(cB as any)(...args)]) }) as any function createKey

( prefix: P, suffix: S ): S extends 'default' ? P : `${P}${Capitalize}` { return (prefix + (suffix === 'default' ? '' : suffix.replace(/^[a-z]/, startChar => startChar.toUpperCase()))) as any } export { asModal, c, cB, cCB, cE, cM, cNotM, createKey, find, insideModal, insidePopover, namespace, prefix } ================================================ FILE: src/_utils/dom/download.ts ================================================ export function download(url: string | null, name: string | undefined): void { if (!url) return const a = document.createElement('a') a.href = url if (name !== undefined) { a.download = name } document.body.appendChild(a) a.click() document.body.removeChild(a) } export function publicDownload(url: string, name: string | undefined): void { download(url, name) } ================================================ FILE: src/_utils/dom/index.ts ================================================ export { download } from './download' export { isDocument } from './is-document' ================================================ FILE: src/_utils/dom/is-document.ts ================================================ export function isDocument(node: Node): node is Document { return node.nodeName === '#document' } ================================================ FILE: src/_utils/env/browser.ts ================================================ import { isBrowser } from './is-browser' export const isChrome = isBrowser && 'chrome' in window export const isFirefox = isBrowser && navigator.userAgent.includes('Firefox') export const isSafari = isBrowser && navigator.userAgent.includes('Safari') && !isChrome ================================================ FILE: src/_utils/env/is-browser.ts ================================================ export const isBrowser = typeof document !== 'undefined' && typeof window !== 'undefined' ================================================ FILE: src/_utils/env/is-jsdom.ts ================================================ let _isJsdom: boolean | undefined export function isJsdom(): boolean { if (_isJsdom === undefined) { _isJsdom = navigator.userAgent.includes('Node.js') || navigator.userAgent.includes('jsdom') } return _isJsdom } ================================================ FILE: src/_utils/env/is-native-lazy-load.ts ================================================ import { isBrowser } from './is-browser' export const isImageSupportNativeLazy = isBrowser && 'loading' in document.createElement('img') ================================================ FILE: src/_utils/event/index.ts ================================================ const eventSet = new WeakSet() export function markEventEffectPerformed(event: Event): void { eventSet.add(event) } export function eventEffectNotPerformed(event: Event): boolean { return !eventSet.has(event) } ================================================ FILE: src/_utils/index.ts ================================================ export * from './composable' export { color2Class, formatLength, rtlInset } from './css' export { createKey } from './cssr' export * from './dom' export { isBrowser } from './env/is-browser' export { isJsdom } from './env/is-jsdom' export { eventEffectNotPerformed, markEventEffectPerformed } from './event' export { getTitleAttribute, isArrayShallowEqual, largerSize, smallerSize, throwError, warn, warnOnce } from './naive' export type { ExtractInternalPropTypes, ExtractPublicPropTypes, Mutable } from './naive' export type * from './ts/ts' export { call, createDataKey, createInjectionKey, createRefSetter, flatten, getFirstSlotVNode, getFirstSlotVNodeWithTypedProps, getSlot, getVNodeChildren, isNodeVShowFalse, isSlotEmpty, keep, keysOf, mergeEventHandlers, omit, render, resolveSlot, resolveSlotWithTypedProps, resolveWrappedSlot, resolveWrappedSlotWithProps, Wrapper } from './vue' export type { MaybeArray } from './vue' ================================================ FILE: src/_utils/naive/attribute.ts ================================================ import type { HTMLAttributes } from 'vue' export function getTitleAttribute(value: unknown): HTMLAttributes['title'] { switch (typeof value) { case 'string': // The empty string should also be reset to undefined. return value || undefined case 'number': return String(value) default: return undefined } } ================================================ FILE: src/_utils/naive/extract-public-props.ts ================================================ import type { ExtractPropTypes } from 'vue' import type { useTheme } from '../../_mixins' type themePropKeys = keyof typeof useTheme.props type RemoveReadonly = { -readonly [key in keyof T]: T[key] } export type ExtractPublicPropTypes = Omit< Partial>>, | Exclude | Extract > export type ExtractInternalPropTypes = Partial> ================================================ FILE: src/_utils/naive/index.ts ================================================ export { getTitleAttribute } from './attribute' export type { ExtractInternalPropTypes, ExtractPublicPropTypes } from './extract-public-props' export type { Mutable } from './mutable' export { largerSize, smallerSize } from './prop' export { isArrayShallowEqual } from './value' export { throwError, warn, warnOnce } from './warn' ================================================ FILE: src/_utils/naive/mutable.ts ================================================ export type Mutable = T extends Record ? { -readonly [P in keyof T]: T[P] extends ReadonlyArray ? Array> : Mutable } : T ================================================ FILE: src/_utils/naive/prop.ts ================================================ const smallerSizeMap = { tiny: 'mini', small: 'tiny', medium: 'small', large: 'medium', huge: 'large' } as const const largerSizeMap = { tiny: 'small', small: 'medium', medium: 'large', large: 'huge' } as const type SmallerSizeMap = typeof smallerSizeMap type SmallerSize = keyof SmallerSizeMap type LargerSizeMap = typeof largerSizeMap type LargerSize = keyof LargerSizeMap export function largerSize(size: T): LargerSizeMap[T] { const result = largerSizeMap[size] if (result === undefined) { throw new Error(`${size} has no larger size.`) } return result } export function smallerSize(size: T): SmallerSizeMap[T] { const result = smallerSizeMap[size] if (result === undefined) { throw new Error(`${size} has no smaller size.`) } return result } ================================================ FILE: src/_utils/naive/value.ts ================================================ export function isArrayShallowEqual>( array1: T | null, array2: T | null ): boolean { if (array1 === null && array2 === null) return true if (array1 === null || array2 === null) return false if (array1.length === array2.length) { for (let i = 0; i < array1.length; ++i) { if (array1[i] !== array2[i]) { return false } } return true } return false } ================================================ FILE: src/_utils/naive/warn.ts ================================================ const warnedMessages = new Set() export function warnOnce(location: string, message: string): void { const mergedMessage = `[naive/${location}]: ${message}` if (warnedMessages.has(mergedMessage)) return warnedMessages.add(mergedMessage) console.error(mergedMessage) } export function warn(location: string, message: string): void { console.error(`[naive/${location}]: ${message}`) } export function error(location: string, message: string, error: unknown): void { console.error(`[naive/${location}]: ${message}`, error) } export function throwError(location: string, message: string): never { throw new Error(`[naive/${location}]: ${message}`) } ================================================ FILE: src/_utils/tests/index.spec.ts ================================================ import type { VNode } from 'vue' import { h, isVNode } from 'vue' import { createHoverColor, createPressedColor } from '../color' import { call, createDataKey, formatLength, getTitleAttribute, keep, keysOf, largerSize, omit, render, smallerSize } from '../index' describe('color', () => { it('should work with createHoverColor', () => { expect(createHoverColor('#666666')).toBe('rgba(126, 126, 126, 1)') expect(createHoverColor('rgb(42, 148, 125)')).toBe('rgba(76, 165, 146, 1)') }) it('should work with createPressedColor', () => { expect(createPressedColor('#666666')).toBe('rgba(90, 90, 90, 1)') expect(createPressedColor('rgb(42, 148, 125)')).toBe( 'rgba(37, 130, 110, 1)' ) }) }) describe('css', () => { it('should work with formatLength', () => { expect(formatLength(7)).toBe('7px') expect(formatLength(2, { offset: 3 })).toBe('5px') expect(formatLength(3, { offset: 4, c: 2 })).toBe('14px') expect(formatLength('3')).toBe('3px') expect(formatLength('3', { attachPx: false })).toBe('3') expect(formatLength('2', { offset: 3 })).toBe('5px') expect(formatLength('3', { offset: 4, c: 2 })).toBe('14px') expect(formatLength('4px')).toBe('4px') expect(formatLength('2px', { offset: 3 })).toBe('5px') expect(formatLength('3px', { offset: 4, c: 2 })).toBe('14px') }) }) describe('naive', () => { it('should work with getTitleAttribute', () => { expect(getTitleAttribute(7)).toBe('7') expect(getTitleAttribute('test')).toBe('test') expect(getTitleAttribute([])).toBe(undefined) expect(getTitleAttribute({})).toBe(undefined) expect(getTitleAttribute(() => '')).toBe(undefined) }) it('should work with largerSize', () => { expect(largerSize('tiny')).toBe('small') expect(largerSize('small')).toBe('medium') expect(largerSize('medium')).toBe('large') expect(largerSize('large')).toBe('huge') }) it('should work with smallerSize', () => { expect(smallerSize('huge')).toBe('large') expect(smallerSize('large')).toBe('medium') expect(smallerSize('medium')).toBe('small') expect(smallerSize('small')).toBe('tiny') }) }) describe('vue', () => { it('should work with call', () => { let testValue = 0 let testValue2 = 0 function testFunction1(): void { testValue = testValue + 1 } function testFunction2(v: number): void { testValue = testValue + v + 2 } function testFunction3(v: number): void { testValue2 = testValue2 + v + 3 } call(testFunction1) expect(testValue).toBe(1) testValue = 0 call(testFunction2, 1) expect(testValue).toBe(3) testValue = 0 call([testFunction2, testFunction3], 1) expect(testValue).toBe(3) expect(testValue2).toBe(4) }) it('should work with createDataKey', () => { expect(createDataKey('1')).toBe('s-1') expect(createDataKey(1)).toBe('n-1') }) it('should work with keep', () => { const test = { c: 3 } const test2 = { a: 1, b: 2, d: test } expect(JSON.stringify(keep(test, ['c']))).toBe(JSON.stringify({ c: 3 })) expect(JSON.stringify(keep(test2, ['a', 'b', 'd']))).toBe( JSON.stringify({ a: 1, b: 2, d: { c: 3 } }) ) expect(JSON.stringify(keep(test2, ['a', 'b', 'd'], { a: 4, e: 5 }))).toBe( JSON.stringify({ a: 4, b: 2, d: { c: 3 }, e: 5 }) ) }) it('should work with keysOf', () => { const test = { c: 3 } const test2 = { a: 1, b: 2, d: test } expect(keysOf(test).toString()).toBe(['c'].toString()) expect(keysOf(test2).toString()).toBe(['a', 'b', 'd'].toString()) }) it('should work with omit', () => { const test = { c: 3 } const test2 = { a: 1, b: 2, d: test } expect(JSON.stringify(omit(test2, ['a']))).toBe( JSON.stringify({ b: 2, d: { c: 3 } }) ) expect(JSON.stringify(omit(test2, ['a', 'd']))).toBe( JSON.stringify({ b: 2 }) ) expect(JSON.stringify(omit(test2, ['b'], { a: 4, b: 5 }))).toBe( JSON.stringify({ a: 4, d: { c: 3 }, b: 5 }) ) }) it('should work with render', () => { function testFunction(value: string): VNode { return h(value, null, { default: () => 'test' }) } expect(isVNode(render('test'))).toBe(true) expect(isVNode(render(123))).toBe(true) expect(isVNode(render(testFunction, 'div'))).toBe(true) expect(isVNode(render({ a: 1 }))).toBe(false) expect(render({ a: 1 })).toBe(null) expect(isVNode(render(['1']))).toBe(false) expect(render(['1'])).toBe(null) }) }) ================================================ FILE: src/_utils/ts/ts.ts ================================================ export type ThemeRelatedProps = | 'theme' | 'themeOverrides' | 'builtinThemeOverrides' export type Equal = (() => T extends X ? 1 : 2) extends () => T extends Y ? 1 : 2 ? true : false export type Expect = T ================================================ FILE: src/_utils/vue/call.ts ================================================ type AnyFunction = (...args: any[]) => any function call(funcs: MaybeArray<() => void>): void function call(funcs: MaybeArray<(a1: A1) => void>, a1: A1): void function call( funcs: MaybeArray<(a1: A1, a2: A2) => void>, a1: A1, a2: A2 ): void function call( funcs: MaybeArray<(a1: A1, a2: A2, a3: A3) => void>, a1: A1, a2: A2, a3: A3 ): void function call( funcs: MaybeArray<(a1: A1, a2: A2, a3: A3, a4: A4) => void>, a1: A1, a2: A2, a3: A3, a4: A4 ): void function call( funcs: AnyFunction[] | AnyFunction, ...args: A ): void { if (Array.isArray(funcs)) { funcs.forEach(func => (call as any)(func, ...args)) } else { return funcs(...args) } } export { call } export type MaybeArray = T | T[] ================================================ FILE: src/_utils/vue/create-data-key.ts ================================================ export function createDataKey(key: string | number): string { return typeof key === 'string' ? `s-${key}` : `n-${key}` } ================================================ FILE: src/_utils/vue/create-injection-key.ts ================================================ import type { InjectionKey } from 'vue' export function createInjectionKey(key: string): InjectionKey { return key as any } ================================================ FILE: src/_utils/vue/create-ref-setter.ts ================================================ import type { Ref } from 'vue' export function createRefSetter(ref: Ref): any { return (inst: { $el: HTMLElement | null } | null) => { if (inst) { ref.value = inst.$el } else { ref.value = null } } } ================================================ FILE: src/_utils/vue/flatten.ts ================================================ import type { VNode, VNodeChild } from 'vue' import { Comment, createTextVNode, Fragment } from 'vue' // o(n) flatten export function flatten( vNodes: VNodeChild[], filterCommentNode: boolean = true, result: VNode[] = [] ): VNode[] { vNodes.forEach((vNode) => { if (vNode === null) return if (typeof vNode !== 'object') { if (typeof vNode === 'string' || typeof vNode === 'number') { result.push(createTextVNode(String(vNode))) } return } if (Array.isArray(vNode)) { flatten(vNode, filterCommentNode, result) return } if (vNode.type === Fragment) { if (vNode.children === null) return if (Array.isArray(vNode.children)) { flatten(vNode.children, filterCommentNode, result) } // rawSlot } else { if (vNode.type === Comment && filterCommentNode) return result.push(vNode) } }) return result } ================================================ FILE: src/_utils/vue/get-first-slot-vnode.ts ================================================ import type { Slots, VNode } from 'vue' import { warn } from '../naive' import { flatten } from './flatten' export function getFirstSlotVNode( slots: Slots, slotName = 'default', props: unknown = undefined ): VNode | null { const slot = slots[slotName] if (!slot) { warn('getFirstSlotVNode', `slot[${slotName}] is empty`) return null } const slotContent = flatten(slot(props)) // vue will normalize the slot, so slot must be an array if (slotContent.length === 1) { return slotContent[0] } else { warn('getFirstSlotVNode', `slot[${slotName}] should have exactly one child`) return null } } export function getFirstSlotVNodeWithTypedProps( slotName: string, slot: ((props: T) => VNode[]) | undefined, props: T ): VNode | null { if (!slot) { return null } const slotContent = flatten(slot(props)) // vue will normalize the slot, so slot must be an array if (slotContent.length === 1) { return slotContent[0] } else { warn('getFirstSlotVNode', `slot[${slotName}] should have exactly one child`) return null } } ================================================ FILE: src/_utils/vue/get-slot.ts ================================================ import type { ComponentPublicInstance, VNodeChild } from 'vue' export function getSlot( instance: ComponentPublicInstance, slotName = 'default', fallback: VNodeChild[] = [] ): VNodeChild[] { const slots = instance.$slots const slot = slots[slotName] if (slot === undefined) return fallback return slot() } ================================================ FILE: src/_utils/vue/get-v-node-children.ts ================================================ import type { VNode } from 'vue' export function getVNodeChildren( vNode: VNode, slotName = 'default', fallback: VNode[] = [] ): VNode[] { const { children } = vNode if ( children !== null && typeof children === 'object' && !Array.isArray(children) ) { const slot = children[slotName] if (typeof slot === 'function') { return slot() } } return fallback } ================================================ FILE: src/_utils/vue/index.ts ================================================ export { call } from './call' export type { MaybeArray } from './call' export { createDataKey } from './create-data-key' export { createInjectionKey } from './create-injection-key' export { createRefSetter } from './create-ref-setter' export { flatten } from './flatten' export { getFirstSlotVNode, getFirstSlotVNodeWithTypedProps } from './get-first-slot-vnode' export { getSlot } from './get-slot' export { getVNodeChildren } from './get-v-node-children' export { isNodeVShowFalse } from './is-node-v-show-false' export { keep } from './keep' export { keysOf } from './keysOf' export { mergeEventHandlers } from './merge-handlers' export { omit } from './omit' export { render } from './render' export { isSlotEmpty, resolveSlot, resolveSlotWithTypedProps, resolveWrappedSlot, resolveWrappedSlotWithProps } from './resolve-slot' export { Wrapper } from './wrapper' ================================================ FILE: src/_utils/vue/is-node-v-show-false.ts ================================================ import type { VNode } from 'vue' import { vShow } from 'vue' export function isNodeVShowFalse(vNode: VNode): boolean { const showDir = vNode.dirs?.find(({ dir }) => dir === vShow) return !!(showDir && showDir.value === false) } ================================================ FILE: src/_utils/vue/keep.ts ================================================ export function keep( object: T, keys: K[] = [], rest?: R ): Pick & R { const keepedObject: any = {} keys.forEach((key) => { keepedObject[key] = (object as any)[key] }) return Object.assign(keepedObject, rest) } ================================================ FILE: src/_utils/vue/keysOf.ts ================================================ export function keysOf>( obj: T ): Array { return Object.keys(obj) as any } ================================================ FILE: src/_utils/vue/merge-handlers.ts ================================================ export function mergeEventHandlers( handlers: Array void)> ): undefined | ((e: T) => void) { const filteredHandlers = handlers.filter(handler => handler !== undefined) if (filteredHandlers.length === 0) return undefined if (filteredHandlers.length === 1) return filteredHandlers[0] return (e) => { handlers.forEach((handler) => { if (handler) { handler(e) } }) } } ================================================ FILE: src/_utils/vue/omit.ts ================================================ export function omit>( object: T, keys: K[] = [], rest?: R ): Omit & (R extends undefined ? Record : R) { const omitedObject: any = {} const originalKeys = Object.getOwnPropertyNames(object) originalKeys.forEach((originalKey) => { if (!(keys as string[]).includes(originalKey)) { omitedObject[originalKey] = object[originalKey as keyof T] } }) return Object.assign(omitedObject, rest) } ================================================ FILE: src/_utils/vue/render.ts ================================================ import type { VNodeChild } from 'vue' import { createTextVNode } from 'vue' export function render( r: | string | number | undefined | null | ((...args: [...T]) => VNodeChild) | unknown, ...args: [...T] ): VNodeChild { if (typeof r === 'function') { return r(...args) } else if (typeof r === 'string') { return createTextVNode(r) } else if (typeof r === 'number') { return createTextVNode(String(r)) } else { return null } } ================================================ FILE: src/_utils/vue/resolve-slot.ts ================================================ import type { Slot, VNodeArrayChildren, VNodeChild } from 'vue' import { Comment, Fragment, isVNode } from 'vue' export function ensureValidVNode( vnodes: VNodeArrayChildren ): VNodeArrayChildren | null { return vnodes.some((child) => { if (!isVNode(child)) { return true } if (child.type === Comment) { return false } if ( child.type === Fragment && !ensureValidVNode(child.children as VNodeArrayChildren) ) { return false } return true }) ? vnodes : null } /** * We shouldn't use the following functions with slot flags `_: 1, 2, 3` */ export function resolveSlot( slot: Slot | undefined, fallback: () => VNodeArrayChildren ): VNodeArrayChildren { return (slot && ensureValidVNode(slot())) || fallback() } export function resolveSlotWithTypedProps( slot: Slot | undefined, props: T, fallback: (props: T) => VNodeArrayChildren ): VNodeArrayChildren { return (slot && ensureValidVNode(slot(props))) || fallback(props) } /** * Resolve slot with wrapper if content exists, no fallback */ export function resolveWrappedSlot( slot: Slot | undefined, wrapper: (children: VNodeArrayChildren | null) => VNodeChild ): VNodeChild { const children = slot && ensureValidVNode(slot()) return wrapper(children || null) } /* * Resolve slot with wrapper if content exists, no fallback */ export function resolveWrappedSlotWithProps( slot: Slot | undefined, props: any, wrapper: (children: VNodeArrayChildren | null) => VNodeChild ): VNodeChild { const children = slot && ensureValidVNode(slot(props)) return wrapper(children || null) } export function isSlotEmpty(slot: Slot | undefined): boolean { return !(slot && ensureValidVNode(slot())) } ================================================ FILE: src/_utils/vue/wrapper.tsx ================================================ import { defineComponent } from 'vue' export const Wrapper = defineComponent({ render() { return this.$slots.default?.() } }) ================================================ FILE: src/affix/demos/enUS/basic.demo.vue ================================================ # Basic Affix has `trigger-top`, `top`, `trigger-bottom` and `bottom`. `trigger-top` is top affixing trigger point. `top` is the style `top` value after top affixing is trigger. `trigger-bottom` and `bottom` work in similar way. ================================================ FILE: src/affix/demos/enUS/index.demo-entry.md ================================================ # Affix Affix can make content stick to fixed places when scrolling. It's similar to `position: sticky` but can do more things. ## Demos ```demo basic.vue position.vue ``` ## API ### Affix Props | Name | Type | Default | Description | | --- | --- | --- | --- | | bottom | `number` | `undefined` | The css bottom property after trigger bottom affix. (if not set, use `trigger-bottom` prop) | | listen-to | `string \| HTMLElement \| Document \| Window \| (() => HTMLElement)` | `document` | The scrolling element to listen scrolling. | | trigger-bottom | `number` | `undefined` | The distance px to bottom of target to trigger bottom affix. (if not set, use `bottom` prop) | | trigger-top | `number` | `undefined` | The distance px to top of target to trigger top affix. (if not set, use `top` prop) | | position | `'fixed' \| 'absolute'` | `'fixed'` | CSS position of the affix. | | top | `number` | `undefined` | The css top property after trigger top affix. (if not set, use `trigger-top` prop) | ================================================ FILE: src/affix/demos/enUS/position.demo.vue ================================================ # Position Affix can be `absolute` or `fixed` positioned. You may need some css tricks to make it works as following. By default position is set to `fixed`, because in most cases scrolled element is `document`. ================================================ FILE: src/affix/demos/zhCN/basic.demo.vue ================================================ # 基础用法 Affix 有 `trigger-top`、`top`、`trigger-bottom` 和 `bottom` 属性。`trigger-top` 是顶部固定的触发距离，`top` 是在触发顶部固定之后 CSS 的 `top` 值。`trigger-bottom` 和 `bottom` 类似。 ================================================ FILE: src/affix/demos/zhCN/index.demo-entry.md ================================================ # 固钉 Affix Affix 可以让内容在页面滚动的时候固定在一个位置，它和 `position: sticky` 有那么点像不过可以做更多事。 ## 演示 ```demo basic.vue position.vue ``` ## API ### Affix Props | 名称 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | bottom | `number` | `undefined` | 在触发底部固定后 Affix 的 CSS bottom 属性（如果没设定，会使用 `trigger-bottom` 代替) | | listen-to | `string \| HTMLElement \| Document \| Window \| (() => HTMLElement)` | `document` | 需要监听滚动的元素 | | trigger-bottom | `number` | `undefined` | 触发底部固定时，Affix 和目标元素元素的底部距离（如果没设定，会使用 `bottom` 代替) | | trigger-top | `number` | `undefined` | 触发顶部固定时，Affix 和目标元素元素的顶部距离（如果没设定，会使用 `top` 代替) | | position | `'fixed' \| 'absolute'` | `'fixed'` | Affix 的 CSS position | | top | `number` | `undefined` | 在触发顶部固定后 Affix 的 CSS top 属性（如果没设定，会使用 `trigger-top` 代替) | ================================================ FILE: src/affix/demos/zhCN/position.demo.vue ================================================ # 位置 Affix 可以 `absolute` 或者 `fixed` 定位。你可能还需要写一些额外的 CSS 才能让达到例子的效果。 默认情况下位置是 `fixed`，因为大多数情况下，滚动的元素是 `document`。 ================================================ FILE: src/affix/index.ts ================================================ export { affixProps, default as NAffix } from './src/Affix' export type { AffixProps } from './src/Affix' ================================================ FILE: src/affix/src/Affix.tsx ================================================ import type { CSSProperties, PropType } from 'vue' import type { ExtractPublicPropTypes } from '../../_utils' import type { ScrollTarget } from './utils' import { beforeNextFrameOnce, unwrapElement } from 'seemly' import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue' import { useConfig, useStyle } from '../../_mixins' import { keysOf, warn } from '../../_utils' import style from './styles/index.cssr' import { getRect, getScrollTop } from './utils' export const affixProps = { listenTo: [String, Object, Function] as PropType< string | ScrollTarget | (() => HTMLElement) | undefined >, top: Number, bottom: Number, triggerTop: Number, triggerBottom: Number, position: { type: String as PropType<'fixed' | 'absolute'>, default: 'fixed' }, // deprecated offsetTop: { type: Number as PropType, validator: () => { if (__DEV__) { warn( 'affix', '`offset-top` is deprecated, please use `trigger-top` instead.' ) } return true }, default: undefined }, offsetBottom: { type: Number as PropType, validator: () => { if (__DEV__) { warn( 'affix', '`offset-bottom` is deprecated, please use `trigger-bottom` instead.' ) } return true }, default: undefined }, target: { type: Function as unknown as PropType<(() => HTMLElement) | undefined>, validator: () => { if (__DEV__) { warn('affix', '`target` is deprecated, please use `listen-to` instead.') } return true }, default: undefined } } as const export const affixPropKeys = keysOf(affixProps) export type AffixProps = ExtractPublicPropTypes export default defineComponent({ name: 'Affix', props: affixProps, setup(props) { const { mergedClsPrefixRef } = useConfig(props) useStyle('-affix', style, mergedClsPrefixRef) let scrollTarget: ScrollTarget | null = null const stickToTopRef = ref(false) const stickToBottomRef = ref(false) const bottomAffixedTriggerScrollTopRef = ref(null) const topAffixedTriggerScrollTopRef = ref(null) const affixedRef = computed(() => { return stickToBottomRef.value || stickToTopRef.value }) const mergedOffsetTopRef = computed(() => { return props.triggerTop ?? props.offsetTop ?? props.top }) const mergedTopRef = computed(() => { return props.top ?? props.triggerTop ?? props.offsetTop }) const mergedBottomRef = computed(() => { return props.bottom ?? props.triggerBottom ?? props.offsetBottom }) const mergedOffsetBottomRef = computed(() => { return props.triggerBottom ?? props.offsetBottom ?? props.bottom }) const selfRef = ref(null) const init = (): void => { const { target: getScrollTarget, listenTo } = props if (getScrollTarget) { // deprecated scrollTarget = getScrollTarget() } else if (listenTo) { scrollTarget = unwrapElement(listenTo) } else { scrollTarget = document } if (scrollTarget) { scrollTarget.addEventListener('scroll', handleScroll) handleScroll() } else if (__DEV__) { warn('affix', 'Target to be listened to is not valid.') } } function handleScroll(): void { beforeNextFrameOnce(_handleScroll) } function _handleScroll(): void { const { value: selfEl } = selfRef if (!scrollTarget || !selfEl) return const scrollTop = getScrollTop(scrollTarget) if (affixedRef.value) { if ( topAffixedTriggerScrollTopRef.value !== null && scrollTop < topAffixedTriggerScrollTopRef.value ) { stickToTopRef.value = false topAffixedTriggerScrollTopRef.value = null } if ( bottomAffixedTriggerScrollTopRef.value !== null && scrollTop > bottomAffixedTriggerScrollTopRef.value ) { stickToBottomRef.value = false bottomAffixedTriggerScrollTopRef.value = null } return } const containerRect = getRect(scrollTarget) const affixRect = selfEl.getBoundingClientRect() const pxToTop = affixRect.top - containerRect.top const pxToBottom = containerRect.bottom - affixRect.bottom const mergedOffsetTop = mergedOffsetTopRef.value const mergedOffsetBottom = mergedOffsetBottomRef.value if (mergedOffsetTop !== undefined && pxToTop <= mergedOffsetTop) { stickToTopRef.value = true topAffixedTriggerScrollTopRef.value = scrollTop - (mergedOffsetTop - pxToTop) } else { stickToTopRef.value = false topAffixedTriggerScrollTopRef.value = null } if ( mergedOffsetBottom !== undefined && pxToBottom <= mergedOffsetBottom ) { stickToBottomRef.value = true bottomAffixedTriggerScrollTopRef.value = scrollTop + mergedOffsetBottom - pxToBottom } else { stickToBottomRef.value = false bottomAffixedTriggerScrollTopRef.value = null } } onMounted(() => { init() }) onBeforeUnmount(() => { if (!scrollTarget) return scrollTarget.removeEventListener('scroll', handleScroll) }) return { selfRef, affixed: affixedRef, mergedClsPrefix: mergedClsPrefixRef, mergedstyle: computed(() => { const style: CSSProperties = {} if ( stickToTopRef.value && mergedOffsetTopRef.value !== undefined && mergedTopRef.value !== undefined ) { style.top = `${mergedTopRef.value}px` } if ( stickToBottomRef.value && mergedOffsetBottomRef.value !== undefined && mergedBottomRef.value !== undefined ) { style.bottom = `${mergedBottomRef.value}px` } return style }) } }, render() { const { mergedClsPrefix } = this return (

{this.$slots}
) } }) ================================================ FILE: src/affix/src/styles/index.cssr.ts ================================================ import { cB, cM } from '../../../_utils/cssr' export default cB('affix', [ cM('affixed', { position: 'fixed' }, [ cM('absolute-positioned', { position: 'absolute' }) ]) ]) ================================================ FILE: src/affix/src/utils.ts ================================================ export type ScrollTarget = Window | Document | HTMLElement export function getScrollTop(target: ScrollTarget): number { return target instanceof HTMLElement ? target.scrollTop : window.scrollY } export function getRect(target: ScrollTarget): { top: number, bottom: number } { return target instanceof HTMLElement ? target.getBoundingClientRect() : { top: 0, bottom: window.innerHeight } } ================================================ FILE: src/affix/tests/Affix.spec.ts ================================================ import { mount } from '@vue/test-utils' import { sleep } from 'seemly' import { h } from 'vue' import { NAffix } from '../index' async function makeScroll( dom: Element, name: 'scrollTop', offset: number ): Promise { const eventTarget = dom === document.documentElement ? window : dom dom[name] = offset eventTarget.dispatchEvent( new CustomEvent('scroll', { detail: { target: { [name]: offset } } }) ) await sleep(100) } describe('n-affix', () => { it('should work with import on demand', () => { mount(NAffix) }) it('should work with `top` prop', async () => { const wrapper = mount(NAffix, { attachTo: document.body, props: { top: 120 }, slots: { default: () => { return h('div', {}, 'content') } } }) expect(wrapper.find('.n-affix--fixed').exists()).toBe(false) await makeScroll(document.documentElement, 'scrollTop', 200) expect(wrapper.attributes('style')).toContain('top: 120px;') wrapper.unmount() }) it('should work with `position` prop', async () => { const wrapper = mount(NAffix, { props: { position: 'absolute' }, slots: { default: () => { return h('div', {}, 'content') } } }) expect(wrapper.find('.n-affix--absolute-positioned').exists()).not.toBe( null ) wrapper.unmount() }) }) ================================================ FILE: src/affix/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NAffix } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/alert/demos/enUS/basic.demo.vue ================================================ # Basic ================================================ FILE: src/alert/demos/enUS/bordered.demo.vue ================================================ # Bordered ================================================ FILE: src/alert/demos/enUS/closable.demo.vue ================================================ # Closable ================================================ FILE: src/alert/demos/enUS/icon.demo.vue ================================================ # Icon ================================================ FILE: src/alert/demos/enUS/index.demo-entry.md ================================================ # Alert According to my experience, the most frequent usage of it may be requesting for disabling AdBlocks. ## Demos ```demo basic.vue bordered.vue closable.vue icon.vue no-icon.vue marquee.vue ``` ## API ### Alert Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | bordered | `boolean` | `true` | Whether the alert can show border. | 2.32.2 | | closable | `boolean` | `false` | Whether the alert can be closed. | | | show-icon | `boolean` | `true` | Whether to show the icon of alert. | | | title | `string` | `undefined` | Title of the alert. | | | type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Alert type. | | | on-after-leave | `Function` | `undefined` | Callback function executed when the alert disappears. | | | on-close | `() => boolean \| Promise \| any` | `() => true` | The callback function executed when the close icon is clicked. | | ### Alert Slots | Name | Parameters | Description | | ------- | ---------- | --------------------------------------- | | default | `()` | The content of the alert. | | header | `()` | The content placed in the alert header. | | icon | `()` | Icon displayed in the alert. | ================================================ FILE: src/alert/demos/enUS/marquee.demo.vue ================================================ # Marquee You can use `n-marquee` to achieve marquee effect. ================================================ FILE: src/alert/demos/enUS/no-icon.demo.vue ================================================ # No icon ================================================ FILE: src/alert/demos/zhCN/basic.demo.vue ================================================ # 基础用法 ================================================ FILE: src/alert/demos/zhCN/bordered.demo.vue ================================================ # 无边框 ================================================ FILE: src/alert/demos/zhCN/closable.demo.vue ================================================ # 可以关掉 ================================================ FILE: src/alert/demos/zhCN/empty-debug.demo.vue ================================================ # Empty debug ================================================ FILE: src/alert/demos/zhCN/icon.demo.vue ================================================ # 图标 ================================================ FILE: src/alert/demos/zhCN/index.demo-entry.md ================================================ # 警示信息 Alert 根据我的经验，这东西使用最频繁的场景是让你关掉 AdBlocks。 ## 演示 ```demo basic.vue bordered.vue closable.vue icon.vue no-icon.vue marquee.vue rtl-debug.vue empty-debug.vue ``` ## API ### Alert Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | bordered | `boolean` | `true` | alert 是否显示边框 | 2.32.2 | | closable | `boolean` | `false` | alert 信息是否可以关掉 | | | show-icon | `boolean` | `true` | alert 是否展示 icon | | | title | `string` | `undefined` | alert 的 title 信息 | | | type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | alert 的类型 | | | on-after-leave | `Function` | `undefined` | alert 消失时执行的回调函数 | | | on-close | `() => boolean \| Promise \| any` | `() => true` | 点击 close icon 时执行的回调函数 | | ### Alert Slots | 名称 | 参数 | 说明 | | ------- | ---- | ------------------------------ | | default | `()` | alert 的内容 | | header | `()` | alert 的 header 部分填充的内容 | | icon | `()` | alert 的 icon 部分填充的内容 | ================================================ FILE: src/alert/demos/zhCN/marquee.demo.vue ================================================ # 跑马灯 你可以配合 `n-marquee` 实现轮播的效果。 ================================================ FILE: src/alert/demos/zhCN/no-icon.demo.vue ================================================ # 没有图标 ================================================ FILE: src/alert/demos/zhCN/rtl-debug.demo.vue ================================================ # Rtl Debug ================================================ FILE: src/alert/index.ts ================================================ export { alertProps, default as NAlert } from './src/Alert' export type { AlertProps, AlertSlots } from './src/Alert' ================================================ FILE: src/alert/src/Alert.tsx ================================================ import type { HTMLAttributes, PropType, SlotsType, VNode } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes } from '../../_utils' import type { AlertTheme } from '../styles' import { getMargin } from 'seemly' import { computed, defineComponent, h, mergeProps, ref, watchEffect } from 'vue' import { NBaseClose, NBaseIcon, NFadeInExpandTransition } from '../../_internal' import { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from '../../_internal/icons' import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { useRtl } from '../../_mixins/use-rtl' import { createKey, resolveSlot, resolveWrappedSlot, warnOnce } from '../../_utils' import { alertLight } from '../styles' import style from './styles/index.cssr' export const alertProps = { ...(useTheme.props as ThemeProps), title: String, showIcon: { type: Boolean, default: true }, type: { type: String as PropType< 'info' | 'warning' | 'error' | 'success' | 'default' >, default: 'default' }, bordered: { type: Boolean, default: true }, closable: Boolean, onClose: Function, onAfterLeave: Function, /** @deprecated */ onAfterHide: Function } export type AlertProps = ExtractPublicPropTypes export interface AlertSlots { default?: () => VNode[] icon?: () => VNode[] header?: () => VNode[] } export default defineComponent({ name: 'Alert', inheritAttrs: false, props: alertProps, slots: Object as SlotsType, setup(props) { if (__DEV__) { watchEffect(() => { if (props.onAfterHide !== undefined) { warnOnce( 'alert', '`on-after-hide` is deprecated, please use `on-after-leave` instead.' ) } }) } const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props) const themeRef = useTheme( 'Alert', '-alert', style, alertLight, props, mergedClsPrefixRef ) const rtlEnabledRef = useRtl('Alert', mergedRtlRef, mergedClsPrefixRef) const cssVarsRef = computed(() => { const { common: { cubicBezierEaseInOut }, self } = themeRef.value const { fontSize, borderRadius, titleFontWeight, lineHeight, iconSize, iconMargin, iconMarginRtl, closeIconSize, closeBorderRadius, closeSize, closeMargin, closeMarginRtl, padding } = self const { type } = props const { left, right } = getMargin(iconMargin) return { '--n-bezier': cubicBezierEaseInOut, '--n-color': self[createKey('color', type)], '--n-close-icon-size': closeIconSize, '--n-close-border-radius': closeBorderRadius, '--n-close-color-hover': self[createKey('closeColorHover', type)], '--n-close-color-pressed': self[createKey('closeColorPressed', type)], '--n-close-icon-color': self[createKey('closeIconColor', type)], '--n-close-icon-color-hover': self[createKey('closeIconColorHover', type)], '--n-close-icon-color-pressed': self[createKey('closeIconColorPressed', type)], '--n-icon-color': self[createKey('iconColor', type)], '--n-border': self[createKey('border', type)], '--n-title-text-color': self[createKey('titleTextColor', type)], '--n-content-text-color': self[createKey('contentTextColor', type)], '--n-line-height': lineHeight, '--n-border-radius': borderRadius, '--n-font-size': fontSize, '--n-title-font-weight': titleFontWeight, '--n-icon-size': iconSize, '--n-icon-margin': iconMargin, '--n-icon-margin-rtl': iconMarginRtl, '--n-close-size': closeSize, '--n-close-margin': closeMargin, '--n-close-margin-rtl': closeMarginRtl, '--n-padding': padding, '--n-icon-margin-left': left, '--n-icon-margin-right': right } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( 'alert', computed(() => { return props.type[0] }), cssVarsRef, props ) : undefined const visibleRef = ref(true) const doAfterLeave = (): void => { const { onAfterLeave, onAfterHide // deprecated } = props if (onAfterLeave) onAfterLeave() if (onAfterHide) onAfterHide() } const handleCloseClick = (): void => { void Promise.resolve(props.onClose?.()).then((result) => { if (result === false) return visibleRef.value = false }) } const handleAfterLeave = (): void => { doAfterLeave() } return { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, visible: visibleRef, handleCloseClick, handleAfterLeave, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { this.onRender?.() return ( {{ default: () => { const { mergedClsPrefix, $slots } = this const attrs: HTMLAttributes = { class: [ `${mergedClsPrefix}-alert`, this.themeClass, this.closable && `${mergedClsPrefix}-alert--closable`, this.showIcon && `${mergedClsPrefix}-alert--show-icon`, // fix: https://github.com/tusen-ai/naive-ui/issues/4588 !this.title && this.closable && `${mergedClsPrefix}-alert--right-adjust`, this.rtlEnabled && `${mergedClsPrefix}-alert--rtl` ], style: this.cssVars as any, role: 'alert' } return this.visible ? (
{this.closable && ( )} {this.bordered && (
)} {this.showIcon && ( )}
{resolveWrappedSlot($slots.header, (children) => { const mergedChildren = children || this.title return mergedChildren ? (
{mergedChildren}
) : null })} {$slots.default && (
{$slots}
)}
) : null } }} ) } }) ================================================ FILE: src/alert/src/styles/index.cssr.ts ================================================ import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-in-height-expand.cssr' import { c, cB, cE, cM } from '../../../_utils/cssr' // vars: // --n-bezier // --n-color // --n-close-color-hover // --n-close-color-pressed // --n-close-icon-color // --n-close-icon-color-hover // --n-close-icon-color-pressed // --n-icon-color // --n-border // --n-title-text-color // --n-content-text-color // --n-line-height // --n-border-radius // --n-font-size // --n-title-font-weight // --n-icon-size // --n-icon-margin // --n-close-size // --n-close-icon-size // --n-close-margin // --n-padding // --n-icon-margin-left // --n-icon-margin-right export default cB('alert', ` line-height: var(--n-line-height); border-radius: var(--n-border-radius); position: relative; transition: background-color .3s var(--n-bezier); background-color: var(--n-color); text-align: start; word-break: break-word; `, [ cE('border', ` border-radius: inherit; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: border-color .3s var(--n-bezier); border: var(--n-border); pointer-events: none; `), cM('closable', [ cB('alert-body', [ cE('title', ` padding-right: 24px; `) ]) ]), cE('icon', { color: 'var(--n-icon-color)' }), cB('alert-body', { padding: 'var(--n-padding)' }, [ cE('title', { color: 'var(--n-title-text-color)' }), cE('content', { color: 'var(--n-content-text-color)' }) ]), fadeInHeightExpandTransition({ originalTransition: 'transform .3s var(--n-bezier)', enterToProps: { transform: 'scale(1)' }, leaveToProps: { transform: 'scale(0.9)' } }), cE('icon', ` position: absolute; left: 0; top: 0; align-items: center; justify-content: center; display: flex; width: var(--n-icon-size); height: var(--n-icon-size); font-size: var(--n-icon-size); margin: var(--n-icon-margin); `), cE('close', ` transition: color .3s var(--n-bezier), background-color .3s var(--n-bezier); position: absolute; right: 0; top: 0; margin: var(--n-close-margin); `), cM('show-icon', [ cB('alert-body', { paddingLeft: 'calc(var(--n-icon-margin-left) + var(--n-icon-size) + var(--n-icon-margin-right))' }) ]), // fix: https://github.com/tusen-ai/naive-ui/issues/4588 cM('right-adjust', [ cB('alert-body', { paddingRight: 'calc(var(--n-close-size) + var(--n-padding) + 2px)' }) ]), cB('alert-body', ` border-radius: var(--n-border-radius); transition: border-color .3s var(--n-bezier); `, [ cE('title', ` transition: color .3s var(--n-bezier); font-size: 16px; line-height: 19px; font-weight: var(--n-title-font-weight); `, [ c('& +', [ cE('content', { marginTop: '9px' }) ]) ]), cE('content', { transition: 'color .3s var(--n-bezier)', fontSize: 'var(--n-font-size)' }) ]), cE('icon', { transition: 'color .3s var(--n-bezier)' }) ]) ================================================ FILE: src/alert/src/styles/rtl.cssr.ts ================================================ import { cB, cE, cM } from '../../../_utils/cssr' export default cB('alert', [ cM('rtl', ` direction: rtl; `, [ cE('icon', ` left: unset; right: 0; margin: var(--n-icon-margin-rtl); `), cM('show-icon', [ cB('alert-body', ` padding-left: var(--n-padding); padding-right: calc(var(--n-icon-margin-left) + var(--n-icon-size) + var(--n-icon-margin-right)); `) ]), cE('close', ` position: absolute; right: unset; left: 0; margin: var(--n-close-margin-rtl); `) ]) ]) ================================================ FILE: src/alert/styles/_common.ts ================================================ export default { iconMargin: '11px 8px 0 12px', iconMarginRtl: '11px 12px 0 8px', iconSize: '24px', closeIconSize: '16px', closeSize: '20px', closeMargin: '13px 14px 0 0', closeMarginRtl: '13px 0 0 14px', padding: '13px' } ================================================ FILE: src/alert/styles/dark.ts ================================================ import type { AlertTheme } from './light' import { changeColor } from 'seemly' import { commonDark } from '../../_styles/common' import commonVars from './_common' const alertDark: AlertTheme = { name: 'Alert', common: commonDark, self(vars) { const { lineHeight, borderRadius, fontWeightStrong, dividerColor, inputColor, textColor1, textColor2, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, infoColorSuppl, successColorSuppl, warningColorSuppl, errorColorSuppl, fontSize } = vars return { ...commonVars, fontSize, lineHeight, titleFontWeight: fontWeightStrong, borderRadius, border: `1px solid ${dividerColor}`, color: inputColor, titleTextColor: textColor1, iconColor: textColor2, contentTextColor: textColor2, closeBorderRadius: borderRadius, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, borderInfo: `1px solid ${changeColor(infoColorSuppl, { alpha: 0.35 })}`, colorInfo: changeColor(infoColorSuppl, { alpha: 0.25 }), titleTextColorInfo: textColor1, iconColorInfo: infoColorSuppl, contentTextColorInfo: textColor2, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, borderSuccess: `1px solid ${changeColor(successColorSuppl, { alpha: 0.35 })}`, colorSuccess: changeColor(successColorSuppl, { alpha: 0.25 }), titleTextColorSuccess: textColor1, iconColorSuccess: successColorSuppl, contentTextColorSuccess: textColor2, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, borderWarning: `1px solid ${changeColor(warningColorSuppl, { alpha: 0.35 })}`, colorWarning: changeColor(warningColorSuppl, { alpha: 0.25 }), titleTextColorWarning: textColor1, iconColorWarning: warningColorSuppl, contentTextColorWarning: textColor2, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, borderError: `1px solid ${changeColor(errorColorSuppl, { alpha: 0.35 })}`, colorError: changeColor(errorColorSuppl, { alpha: 0.25 }), titleTextColorError: textColor1, iconColorError: errorColorSuppl, contentTextColorError: textColor2, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed } } } export default alertDark ================================================ FILE: src/alert/styles/index.ts ================================================ export { default as alertDark } from './dark' export { default as alertLight } from './light' export type { AlertTheme, AlertThemeVars } from './light' export { alertRtl } from './rtl' ================================================ FILE: src/alert/styles/light.ts ================================================ import type { Theme } from '../../_mixins/use-theme' import type { ThemeCommonVars } from '../../_styles/common' import { changeColor, composite } from 'seemly' import { commonLight } from '../../_styles/common' import commonVars from './_common' function self(vars: ThemeCommonVars) { const { lineHeight, borderRadius, fontWeightStrong, baseColor, dividerColor, actionColor, textColor1, textColor2, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, infoColor, successColor, warningColor, errorColor, fontSize } = vars return { ...commonVars, fontSize, lineHeight, titleFontWeight: fontWeightStrong, borderRadius, border: `1px solid ${dividerColor}`, color: actionColor, titleTextColor: textColor1, iconColor: textColor2, contentTextColor: textColor2, closeBorderRadius: borderRadius, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, borderInfo: `1px solid ${composite( baseColor, changeColor(infoColor, { alpha: 0.25 }) )}`, colorInfo: composite(baseColor, changeColor(infoColor, { alpha: 0.08 })), titleTextColorInfo: textColor1, iconColorInfo: infoColor, contentTextColorInfo: textColor2, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, borderSuccess: `1px solid ${composite( baseColor, changeColor(successColor, { alpha: 0.25 }) )}`, colorSuccess: composite( baseColor, changeColor(successColor, { alpha: 0.08 }) ), titleTextColorSuccess: textColor1, iconColorSuccess: successColor, contentTextColorSuccess: textColor2, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, borderWarning: `1px solid ${composite( baseColor, changeColor(warningColor, { alpha: 0.33 }) )}`, colorWarning: composite( baseColor, changeColor(warningColor, { alpha: 0.08 }) ), titleTextColorWarning: textColor1, iconColorWarning: warningColor, contentTextColorWarning: textColor2, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, borderError: `1px solid ${composite( baseColor, changeColor(errorColor, { alpha: 0.25 }) )}`, colorError: composite(baseColor, changeColor(errorColor, { alpha: 0.08 })), titleTextColorError: textColor1, iconColorError: errorColor, contentTextColorError: textColor2, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed } } export type AlertThemeVars = ReturnType const alertLight: Theme<'Alert', AlertThemeVars> = { name: 'Alert', common: commonLight, self } export default alertLight export type AlertTheme = typeof alertLight ================================================ FILE: src/alert/styles/rtl.ts ================================================ import type { RtlItem } from '../../config-provider/src/internal-interface' import rtlStyle from '../src/styles/rtl.cssr' export const alertRtl: RtlItem = { name: 'Alert', style: rtlStyle } ================================================ FILE: src/alert/tests/Alert.spec.ts ================================================ import { IosAirplane } from '@vicons/ionicons4' import { mount } from '@vue/test-utils' import { h } from 'vue' import { NIcon } from '../../icon' import { NAlert } from '../index' describe('n-alert', () => { it('should work with import on demand', () => { mount(NAlert) }) it('should have a role of "alert"', () => { const wrapper = mount(NAlert) expect(wrapper.find('.n-alert').attributes('role')).toBe('alert') wrapper.unmount() }) it('should add the right aria', () => { const wrapper = mount(NAlert) expect(wrapper.find('.n-alert__icon').attributes('aria-hidden')).toBe( 'true' ) wrapper.unmount() }) it('shouldnt have default title', () => { const wrapper = mount(NAlert) expect(wrapper.find('.n-alert-body__title').exists()).toBe(false) wrapper.unmount() }) it('should have designated title', () => { const title = 'sometimes naïve' const wrapper = mount(NAlert, { props: { title } }) expect(wrapper.find('.n-alert-body__title').text()).toBe(title) wrapper.unmount() }) it('should work with type prop', async () => { ;(['info', 'success', 'warning', 'error'] as const).forEach((type) => { const wrapper = mount(NAlert, { props: { type } }) expect(wrapper.find('.n-alert').attributes('style')).toMatchSnapshot() wrapper.unmount() }) }) it('should work with `bordered` prop', async () => { const wrapper = mount(NAlert) const body = wrapper.find('.n-alert-body') expect(body.classes()).toContain('n-alert-body--bordered') await wrapper.setProps({ bordered: false }) expect(body.classes()).not.toContain('n-alert-body--bordered') wrapper.unmount() }) it('should work with `default` slot', () => { const wrapper = mount(NAlert, { slots: { default: () => 'default' } }) expect(wrapper.find('.n-alert-body__content').exists()).toBe(true) expect(wrapper.find('.n-alert-body__content').text()).toBe('default') wrapper.unmount() }) it('should work with `icon` slot', async () => { const wrapper = mount(NAlert, { slots: { icon: () => h(NIcon, null, { default: () => h(IosAirplane) }) } }) expect(wrapper.findComponent(NIcon).exists()).toBe(true) wrapper.unmount() }) it('should work with `header` slot', async () => { const wrapper = mount(NAlert, { slots: { header: () => 'test-header' } }) expect(wrapper.find('.n-alert-body__title').text()).toBe('test-header') wrapper.unmount() }) it('shouldnt be closable by default', () => { const wrapper = mount(NAlert) expect(wrapper.find('.n-base-close.n-alert__close').exists()).toBe(false) wrapper.unmount() }) it('should be closable when designated', () => { const wrapper = mount(NAlert, { props: { closable: true } }) expect(wrapper.find('.n-base-close.n-alert__close').exists()).toBe(true) wrapper.unmount() }) it('should show icon by default', () => { const wrapper = mount(NAlert) expect(wrapper.find('.n-alert__icon').exists()).toBe(true) wrapper.unmount() }) it('should hide icon when designated', () => { const wrapper = mount(NAlert, { props: { showIcon: false } }) expect(wrapper.find('.n-alert__icon').exists()).toBe(false) wrapper.unmount() }) it('shouldn\'t closed when on-close prop returns false', async () => { const wrapper = mount(NAlert, { props: { closable: true, onClose: () => false } }) const closeBtn = wrapper.find('.n-base-close.n-alert__close') await closeBtn.trigger('click') expect(wrapper.find('.n-base-close.n-alert__close').exists()).toBe(true) wrapper.unmount() }) it('should trigger callback when closed', async () => { const handleCloseClick = vi.fn() const handleOnAfterLeave = vi.fn() // https://github.com/vuejs/test-utils/issues/1912#issuecomment-1351054542 const rafSpy = vi .spyOn(window, 'requestAnimationFrame') .mockImplementation((cb: FrameRequestCallback): number => { cb(0) return 0 }) const wrapper = mount(NAlert, { props: { closable: true, onClose: handleCloseClick, onAfterLeave: handleOnAfterLeave }, global: { stubs: { Transition: false, TransitionGroup: false } } }) const closeBtn = wrapper.find('.n-base-close.n-alert__close') expect(closeBtn.exists()).toBe(true) await closeBtn.trigger('click') expect(wrapper.emitted()).toHaveProperty('click') expect(handleCloseClick).toHaveBeenCalled() expect(handleOnAfterLeave).toHaveBeenCalled() wrapper.unmount() rafSpy.mockRestore() }) }) ================================================ FILE: src/alert/tests/__snapshots__/Alert.spec.ts.snap ================================================ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`n-alert > should work with type prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 245, 254, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #2080f0; --n-border: 1px solid rgba(199, 223, 251, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; exports[`n-alert > should work with type prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(237, 247, 242, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #18a058; --n-border: 1px solid rgba(197, 231, 213, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; exports[`n-alert > should work with type prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(254, 247, 237, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #f0a020; --n-border: 1px solid rgba(250, 224, 181, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; exports[`n-alert > should work with type prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-color: rgba(251, 238, 241, 1); --n-close-icon-size: 16px; --n-close-border-radius: 3px; --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-icon-color: #d03050; --n-border: 1px solid rgba(243, 203, 211, 1); --n-title-text-color: rgb(31, 34, 37); --n-content-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-border-radius: 3px; --n-font-size: 14px; --n-title-font-weight: 500; --n-icon-size: 24px; --n-icon-margin: 11px 8px 0 12px; --n-icon-margin-rtl: 11px 12px 0 8px; --n-close-size: 20px; --n-close-margin: 13px 14px 0 0; --n-close-margin-rtl: 13px 0 0 14px; --n-padding: 13px; --n-icon-margin-left: 12px; --n-icon-margin-right: 8px;"`; ================================================ FILE: src/alert/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NAlert } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/anchor/demos/enUS/affix.demo.vue ================================================ # Affix When in affix mode, Anchor can recieve addition props as same as Affix. ================================================ FILE: src/anchor/demos/enUS/basic.demo.vue ================================================ # Basic ================================================ FILE: src/anchor/demos/enUS/ignore-gap.demo.vue ================================================ # Ignore gap ================================================ FILE: src/anchor/demos/enUS/index.demo-entry.md ================================================ # Anchor Tell you where you are. ## Demos ```demo basic.vue ignore-gap.vue affix.vue scrollto.vue ``` ## API ### Anchor Props | Name | Type | Default | Description | | --- | --- | --- | --- | | affix | `boolean` | `false` | If it works like an affix. If set to `true`, it will receive props from [affix](affix#Affix-Props). | | bound | `number` | `12` | The height of the border when scrolling. | | ignore-gap | `boolean` | `false` | If set to `true`, it will be displayed on the exact href. | | offset-target | `string \| HTMLElement \| Window \| Document \| (() => HTMLElement)` | `document` | The element or selector used to calc offset of link elements. If you are not scrolling the entire document but only a part of it, you may need to set this. | | show-rail | `boolean` | `true` | Whether to show the sider rail. | | show-background | `boolean` | `true` | Whether to show background of links. | | type | `'rail' \| 'block'` | `'rail'` | The type to use. | ### AnchorLink Props | Name | Type | Default | Description | | ----- | -------- | ----------- | ------------------- | | href | `string` | `undefined` | The target of link | | title | `string` | `undefined` | The content of link | ### AnchorLink Slots | Name | Parameters | Description | Version | | ----- | ---------- | ---------------------- | ------- | | title | `()` | The title of the link. | 2.42.0 | ### Anchor Methods | Name | Type | Description | | --- | --- | --- | | scrollTo | `(href: string) => void` | Manually scroll to the specific position. | ================================================ FILE: src/anchor/demos/enUS/scrollto.demo.vue ================================================ # Scroll to ================================================ FILE: src/anchor/demos/zhCN/affix.demo.vue ================================================ # 固定 在固定模式下，Anchor 还接受和 Affix 一样的 Props。 ================================================ FILE: src/anchor/demos/zhCN/basic.demo.vue ================================================ # 基础用法 ================================================ FILE: src/anchor/demos/zhCN/ignore-gap.demo.vue ================================================ # 忽略间隔 ================================================ FILE: src/anchor/demos/zhCN/index.demo-entry.md ================================================ # 侧边导航 Anchor 你永远的指路明灯。 ## 演示 ```demo basic.vue ignore-gap.vue affix.vue scrollto.vue max-height-debug.vue ``` ## API ### Anchor Props | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | affix | `boolean` | `false` | Anchor 是否像 Affix 一样展示，如果设定为 `true`，它还会接受 [Affix](affix#Affix-Props) 的 Props | | bound | `number` | `12` | 元素开始触发 anchor 的偏移量 | | ignore-gap | `boolean` | `false` | 如果设定为 `true`, 导航将显示在准确的 href 区域 | | offset-target | `string \| HTMLElement \| Window \| Document \| (() => HTMLElement)` | `document` | 计算偏移位置相对的元素或选择器。如果你滚动的不是整个文档而只是其中的一部分，那你有可能要设定这个 | | show-rail | `boolean` | `true` | 是否展示侧面的轨道 | | show-background | `boolean` | `true` | 是否展示 link 的背景 | | type | `'rail' \| 'block'` | `'rail'` | Anchor 的风格，`'block'` 为块状风格，`'rail'` 为轨道风格 | ### AnchorLink Props | 名称 | 类型 | 默认值 | 说明 | | ----- | -------- | ----------- | -------- | | href | `string` | `undefined` | 锚点链接 | | title | `stirng` | `undefined` | 锚点标题 | ### AnchorLink Slots | 名称 | 参数 | 说明 | 版本 | | ----- | ---- | -------- | ------ | | title | `()` | 锚点标题 | 2.42.0 | ### Anchor Methods | 名称 | 类型 | 说明 | | -------- | ------------------------ | ---------------------- | | scrollTo | `(href: string) => void` | 手动触发到指定滚动位置 | ================================================ FILE: src/anchor/demos/zhCN/max-height-debug.demo.vue ================================================ # 高度限定 ================================================ FILE: src/anchor/demos/zhCN/scrollto.demo.vue ================================================ # 滚动到 ================================================ FILE: src/anchor/index.ts ================================================ export { anchorProps, default as NAnchor } from './src/AnchorAdapter' export type { AnchorInst, AnchorProps } from './src/AnchorAdapter' export { anchorLinkProps, default as NAnchorLink } from './src/Link' export type { AnchorLinkProps } from './src/Link' export type * from './src/public-types' ================================================ FILE: src/anchor/src/AnchorAdapter.tsx ================================================ import type { CSSProperties } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes } from '../../_utils' import type { AnchorTheme } from '../styles' import type { BaseAnchorInst } from './BaseAnchor' import { computed, defineComponent, h, ref } from 'vue' import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { keep } from '../../_utils' import { NAffix } from '../../affix' import { affixPropKeys, affixProps } from '../../affix/src/Affix' import { anchorLight } from '../styles' import NBaseAnchor, { baseAnchorPropKeys, baseAnchorProps } from './BaseAnchor' import style from './styles/index.cssr' export interface AnchorInst { scrollTo: (href: string) => void } export const anchorProps = { ...(useTheme.props as ThemeProps), affix: Boolean, ...affixProps, ...baseAnchorProps } as const export type AnchorProps = ExtractPublicPropTypes export default defineComponent({ name: 'Anchor', props: anchorProps, setup(props, { slots }) { const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props) const themeRef = useTheme( 'Anchor', '-anchor', style, anchorLight, props, mergedClsPrefixRef ) const anchorRef = ref(null) const cssVarsRef = computed(() => { const { self: { railColor, linkColor, railColorActive, linkTextColor, linkTextColorHover, linkTextColorPressed, linkTextColorActive, linkFontSize, railWidth, linkPadding, borderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value return { '--n-link-border-radius': borderRadius, '--n-link-color': linkColor, '--n-link-font-size': linkFontSize, '--n-link-text-color': linkTextColor, '--n-link-text-color-hover': linkTextColorHover, '--n-link-text-color-active': linkTextColorActive, '--n-link-text-color-pressed': linkTextColorPressed, '--n-link-padding': linkPadding, '--n-bezier': cubicBezierEaseInOut, '--n-rail-color': railColor, '--n-rail-color-active': railColorActive, '--n-rail-width': railWidth } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass('anchor', undefined, cssVarsRef, props) : undefined return { scrollTo(href: string) { anchorRef.value?.setActiveHref(href) }, renderAnchor: () => { themeClassHandle?.onRender() return ( {slots} ) } } }, render() { return !this.affix ? ( this.renderAnchor() ) : ( {{ default: this.renderAnchor }} ) } }) ================================================ FILE: src/anchor/src/BaseAnchor.tsx ================================================ import type { PropType } from 'vue' import type { OffsetTarget } from './utils' import { unwrapElement } from 'seemly' import { onFontsReady } from 'vooks' import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, provide, ref, toRef, watch } from 'vue' import { NScrollbar } from '../../_internal' import { keysOf } from '../../_utils' import { anchorInjectionKey } from './Link' import { getOffset } from './utils' interface LinkInfo { top: number height: number href: string } export interface BaseAnchorInst { setActiveHref: (href: string) => void } export const baseAnchorProps = { type: { type: String as PropType<'block' | 'rail'>, default: 'rail' }, showRail: { type: Boolean, default: true }, showBackground: { type: Boolean, default: true }, bound: { type: Number, default: 12 }, internalScrollable: Boolean, ignoreGap: Boolean, offsetTarget: [String, Object, Function] as PropType< string | OffsetTarget | (() => HTMLElement) > } as const export const baseAnchorPropKeys = keysOf(baseAnchorProps) export default defineComponent({ name: 'BaseAnchor', props: { ...baseAnchorProps, mergedClsPrefix: { type: String, required: true } }, setup(props) { const collectedLinkHrefs: string[] = [] const titleEls: HTMLElement[] = [] const activeHrefRef = ref(null) const slotRef = ref(null) const barRef = ref(null) const selfRef = ref(null) let skipScrollHandling = false const isBlockTypeRef = computed(() => { return props.type === 'block' }) const mergedShowRailRef = computed(() => { return !isBlockTypeRef.value && props.showRail }) function disableTransitionOneTick(): void { const { value: barEl } = barRef const { value: slotEl } = slotRef if (barEl) { barEl.style.transition = 'none' } if (slotEl) { slotEl.style.transition = 'none' } if (titleEls) { titleEls.forEach((titleEl) => { titleEl.style.transition = 'none' }) } void nextTick(() => { const { value: nextBarEl } = barRef const { value: nextSlotEl } = slotRef if (nextBarEl) { void nextBarEl.offsetWidth nextBarEl.style.transition = '' } if (nextSlotEl) { void nextSlotEl.offsetWidth nextSlotEl.style.transition = '' } if (titleEls) { titleEls.forEach((titleEl) => { void titleEl.offsetWidth titleEl.style.transition = '' }) } }) } function updateBarPosition( linkTitleEl: HTMLElement, transition = true ): void { const { value: barEl } = barRef const { value: slotEl } = slotRef const { value: selfEl } = selfRef if (!selfEl || !barEl) return if (!transition) { barEl.style.transition = 'none' if (slotEl) slotEl.style.transition = 'none' } const { offsetHeight, offsetWidth } = linkTitleEl const { top: linkTitleClientTop, left: linkTitleClientLeft } = linkTitleEl.getBoundingClientRect() const { top: anchorClientTop, left: anchorClientLeft } = selfEl.getBoundingClientRect() const offsetTop = linkTitleClientTop - anchorClientTop const offsetLeft = linkTitleClientLeft - anchorClientLeft barEl.style.top = `${offsetTop}px` barEl.style.height = `${offsetHeight}px` if (slotEl) { slotEl.style.top = `${offsetTop}px` slotEl.style.height = `${offsetHeight}px` slotEl.style.maxWidth = `${offsetWidth + offsetLeft}px` } void barEl.offsetHeight if (slotEl) void slotEl.offsetHeight if (!transition) { barEl.style.transition = '' if (slotEl) slotEl.style.transition = '' } } let currentThrottleTimerId: ReturnType | undefined let hasTrailingThrottledTask = false let isInThrottledPeriod = false const handleScroll = () => { if (isInThrottledPeriod) { hasTrailingThrottledTask = true } else { if (skipScrollHandling) { return } _handleScroll(true) isInThrottledPeriod = true clearTimeout(currentThrottleTimerId) currentThrottleTimerId = setTimeout(() => { isInThrottledPeriod = false if (hasTrailingThrottledTask) { hasTrailingThrottledTask = false handleScroll() } }, 128) } } function setActiveHref(href: string, transition = true): void { const idMatchResult = /^#([^#]+)$/.exec(href) if (!idMatchResult) return const linkEl = document.getElementById(idMatchResult[1]) if (!linkEl) return skipScrollHandling = true activeHrefRef.value = href linkEl.scrollIntoView() if (!transition) { disableTransitionOneTick() } hasTrailingThrottledTask = false setTimeout(() => { skipScrollHandling = false }, 0) } function _handleScroll(transition = true): void { const links: LinkInfo[] = [] const offsetTarget = unwrapElement(props.offsetTarget ?? document) collectedLinkHrefs.forEach((href) => { const idMatchResult = /#([^#]+)$/.exec(href) if (!idMatchResult) return const linkEl = document.getElementById(idMatchResult[1]) if (linkEl && offsetTarget) { const { top, height } = getOffset(linkEl, offsetTarget) links.push({ top, height, href }) } }) links.sort((a, b) => { // ascend top if (a.top > b.top) { return 1 // descend height } else if (a.top === b.top && a.height < b.height) { return -1 } return -1 }) const currentActiveHref = activeHrefRef.value const { bound, ignoreGap } = props const activeLink = links.reduce((prevLink: LinkInfo | null, link) => { if (link.top + link.height < 0) { if (ignoreGap) { return link } else { return prevLink } } if (link.top <= bound) { if (prevLink === null) { return link } else if (link.top === prevLink.top) { if (link.href === currentActiveHref) { return link } else { return prevLink } } else if (link.top > prevLink.top) { return link } else { return prevLink } } return prevLink }, null) if (!transition) disableTransitionOneTick() if (activeLink) { activeHrefRef.value = activeLink.href } else { activeHrefRef.value = null } } provide(anchorInjectionKey, { activeHref: activeHrefRef, mergedClsPrefix: toRef(props, 'mergedClsPrefix'), updateBarPosition, setActiveHref, collectedLinkHrefs, titleEls }) onMounted(() => { document.addEventListener('scroll', handleScroll, true) setActiveHref(window.location.hash) _handleScroll(false) }) onFontsReady(() => { setActiveHref(window.location.hash) _handleScroll(false) }) onBeforeUnmount(() => { clearTimeout(currentThrottleTimerId) document.removeEventListener('scroll', handleScroll, true) }) watch(activeHrefRef, (value) => { if (value === null) { const { value: slotEl } = slotRef if (slotEl && !isBlockTypeRef.value) { slotEl.style.maxWidth = '0' } } }) return { selfRef, barRef, slotRef, setActiveHref, activeHref: activeHrefRef, isBlockType: isBlockTypeRef, mergedShowRail: mergedShowRailRef } }, render() { const { mergedClsPrefix, mergedShowRail, isBlockType, $slots } = this const Anchor = (
{mergedShowRail && this.showBackground ? (
) : null} {mergedShowRail ? (
) : null} {$slots.default?.()}
) return this.internalScrollable ? ( {{ default: () => Anchor }} ) : ( Anchor ) } }) ================================================ FILE: src/anchor/src/Link.tsx ================================================ import type { Ref, SlotsType } from 'vue' import type { ExtractPublicPropTypes } from '../../_utils' import type { AnchorLinkSlots } from './public-types' import { useMemo } from 'vooks' import { defineComponent, h, inject, ref, toRef, watch } from 'vue' import { createInjectionKey, getTitleAttribute, resolveSlot } from '../../_utils' import { useInjectionCollection, useInjectionElementCollection } from '../../_utils/composable' export interface AnchorInjection { activeHref: Ref mergedClsPrefix: Ref updateBarPosition: (el: HTMLElement) => void setActiveHref: (href: string, transition?: boolean) => void collectedLinkHrefs: string[] titleEls: HTMLElement[] } export const anchorInjectionKey = createInjectionKey('n-anchor') export const anchorLinkProps = { title: String, href: String } as const export type AnchorLinkProps = ExtractPublicPropTypes export default defineComponent({ name: 'AnchorLink', props: anchorLinkProps, slots: Object as SlotsType, setup(props, { slots }) { const titleRef = ref(null) const NAnchor = inject(anchorInjectionKey)! const hrefRef = toRef(props, 'href') const activeRef = useMemo(() => { return hrefRef.value && hrefRef.value === NAnchor.activeHref.value }) useInjectionCollection(anchorInjectionKey, 'collectedLinkHrefs', hrefRef) useInjectionElementCollection( anchorInjectionKey, 'titleEls', () => titleRef.value ) watch(activeRef, (value) => { if (value && titleRef.value) { NAnchor.updateBarPosition(titleRef.value) } }) function handleClick(): void { if (props.href !== undefined) { NAnchor.setActiveHref(props.href) } } return () => { const { value: mergedClsPrefix } = NAnchor.mergedClsPrefix return (
{{ default: () => resolveSlot(slots.title, () => [props.title]) }} {slots.default?.()}
) } } }) ================================================ FILE: src/anchor/src/public-types.tsx ================================================ import type { VNode } from 'vue' export interface AnchorLinkSlots { default?: () => VNode[] title?: () => VNode[] } ================================================ FILE: src/anchor/src/styles/index.cssr.ts ================================================ import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr' // vars: // --n-link-color // --n-link-font-size // --n-link-text-color // --n-link-text-color-hover // --n-link-text-color-active // --n-link-text-color-pressed // --n-bezier // --n-rail-color // --n-rail-color-active // --n-rail-width // --n-link-padding // --n-link-border-radius export default cB('anchor', ` position: relative; `, [ cNotM('block', ` padding-left: var(--n-rail-width); `, [ cB('anchor-link', [ c('+, >', [ cB('anchor-link', ` margin-top: .5em; `) ]) ]), cB('anchor-link-background', ` max-width: 0; border-top-right-radius: 10.5px; border-bottom-right-radius: 10.5px; `), cNotM('show-rail', [ c('>', [ cB('anchor-link', 'padding-left: 0;') ]) ]) ]), cM('block', [ cB('anchor-link', ` margin-bottom: 4px; padding: 2px 8px; transition: background-color .3s var(--n-bezier); background-color: transparent; border-radius: var(--n-link-border-radius); `, [ cM('active', ` background-color: var(--n-link-color); `) ]) ]), cB('anchor-link-background', ` position: absolute; left: calc(var(--n-rail-width) / 2); width: 100%; background-color: var(--n-link-color); transition: top .15s var(--n-bezier), max-width .15s var(--n-bezier), background-color .3s var(--n-bezier); `), cB('anchor-rail', ` position: absolute; left: 0; top: 0; bottom: 0; width: var(--n-rail-width); border-radius: calc(var(--n-rail-width) / 2); overflow: hidden; transition: background-color .3s var(--n-bezier); background-color: var(--n-rail-color); `, [ cE('bar', ` position: absolute; left: 0; width: var(--n-rail-width); height: 21px; background-color: #0000; transition: top .15s var(--n-bezier), background-color .3s var(--n-bezier); `, [ cM('active', { backgroundColor: 'var(--n-rail-color-active)' }) ]) ]), cB('anchor-link', ` padding: var(--n-link-padding); position: relative; line-height: 1.5; font-size: var(--n-link-font-size); min-height: 1.5em; display: flex; flex-direction: column; `, [ cM('active', [ c('>', [ cE('title', ` color: var(--n-link-text-color-active); `) ]) ]), cE('title', ` outline: none; max-width: 100%; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; display: inline-block; padding-right: 16px; transition: color .3s var(--n-bezier); color: var(--n-link-text-color); `, [ c('&:hover, &:focus', ` color: var(--n-link-text-color-hover); `), c('&:active', ` color: var(--n-link-text-color-pressed); `) ]) ]) ]) ================================================ FILE: src/anchor/src/utils.ts ================================================ export type OffsetTarget = Window | Document | HTMLElement export function getOffset( el: HTMLElement, scrollTarget: OffsetTarget ): { top: number height: number } { const { top: elTop, height } = el.getBoundingClientRect() const scrollTargetTop = scrollTarget instanceof HTMLElement ? scrollTarget.getBoundingClientRect().top : 0 return { top: elTop - scrollTargetTop, height } } ================================================ FILE: src/anchor/styles/_common.ts ================================================ export default { linkFontSize: '13px', linkPadding: '0 0 0 16px', railWidth: '4px' } ================================================ FILE: src/anchor/styles/dark.ts ================================================ import type { AnchorTheme } from './light' import { commonDark } from '../../_styles/common' import { self } from './light' const anchorDark: AnchorTheme = { name: 'Anchor', common: commonDark, self } export default anchorDark ================================================ FILE: src/anchor/styles/index.ts ================================================ export { default as anchorDark } from './dark' export { default as anchorLight } from './light' export type { AnchorTheme, AnchorThemeVars } from './light' ================================================ FILE: src/anchor/styles/light.ts ================================================ import type { Theme } from '../../_mixins' import type { ThemeCommonVars } from '../../_styles/common' import { changeColor } from 'seemly' import { commonLight } from '../../_styles/common' import commonVars from './_common' export function self(vars: ThemeCommonVars) { const { borderRadius, railColor, primaryColor, primaryColorHover, primaryColorPressed, textColor2 } = vars return { ...commonVars, borderRadius, railColor, railColorActive: primaryColor, linkColor: changeColor(primaryColor, { alpha: 0.15 }), linkTextColor: textColor2, linkTextColorHover: primaryColorHover, linkTextColorPressed: primaryColorPressed, linkTextColorActive: primaryColor } } export type AnchorThemeVars = ReturnType const anchorLight: Theme<'Anchor', AnchorThemeVars> = { name: 'Anchor', common: commonLight, self } export default anchorLight export type AnchorTheme = typeof anchorLight ================================================ FILE: src/anchor/tests/Anchor.spec.ts ================================================ import { mount } from '@vue/test-utils' import { h } from 'vue' import { NAnchor, NAnchorLink } from '../index' describe('n-anchor', () => { it('should work with import on demand', () => { mount(NAnchor) }) it('should work with `showRail` and `showBackground` prop', async () => { const wrapper = mount(NAnchor, { props: { showRail: true } }) expect(wrapper.find('.n-anchor-rail').exists()).toBe(true) await wrapper.setProps({ showBackground: true }) expect(wrapper.find('.n-anchor-link-background').exists()).toBe(true) wrapper.unmount() }) it('should work with `affix` prop', () => { const wrapper = mount(NAnchor, { props: { affix: true } }) expect(wrapper.find('.n-affix').exists()).toBe(true) wrapper.unmount() }) it('should work with `type` prop', async () => { const wrapper = mount(NAnchor, { props: { type: 'rail' } }) expect(wrapper.find('.n-anchor--show-rail').exists()).toBe(true) await wrapper.setProps({ type: 'block' }) expect(wrapper.find('.n-anchor--block').exists()).toBe(true) wrapper.unmount() }) it('should work with `title` and `href` prop', async () => { const wrapper = mount(NAnchor, { props: { showRail: false }, slots: { default: () => { return h(NAnchorLink, { title: 'testTitle', href: '#testHref' }) } } }) expect(wrapper.find('.n-anchor-link__title').attributes('href')).toBe( '#testHref' ) expect(wrapper.find('.n-anchor-link__title').attributes('title')).toBe( 'testTitle' ) wrapper.unmount() }) it('should work with `naive-scrollbar` and `max-height` prop', async () => { const wrapper = mount(NAnchor, { props: { naiveScrollbar: true, style: { maxHeight: '100px' } }, slots: { default() { return h(NAnchorLink, { title: 'testTitle', href: '#testHref' }) } } }) expect(wrapper.find('.n-scrollbar')).toBeTruthy() wrapper.unmount() }) }) ================================================ FILE: src/anchor/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NAnchor } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/auto-complete/demos/enUS/after-select.demo.vue ================================================ # Actions after select Choose whether the element blurs after a selection is made with `blur-after-select`. ================================================ FILE: src/auto-complete/demos/enUS/append.demo.vue ================================================ # Append Append the selected option to the input box instead of directly overwriting it, and use it in conjunction with get-show. ================================================ FILE: src/auto-complete/demos/enUS/basic.demo.vue ================================================ # Basic Start typing to see how this works. ================================================ FILE: src/auto-complete/demos/enUS/custom-input.demo.vue ================================================ # Customize input element You can also replace the input element of the auto-complete component (e.g. using a textarea). ================================================ FILE: src/auto-complete/demos/enUS/customized-rendering.demo.vue ================================================ # Customized rendering Use `render-label` to customize label rendering. ================================================ FILE: src/auto-complete/demos/enUS/group.demo.vue ================================================ # Group ================================================ FILE: src/auto-complete/demos/enUS/index.demo-entry.md ================================================ # AutoComplete Offer a search hint or maybe guess some likely options? ## Demos ```demo basic.vue size.vue group.vue custom-input.vue after-select.vue show-options-by-value.vue customized-rendering.vue status.vue append.vue ``` ## API ### AutoComplete Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | append | `boolean` | `false` | Whether to append content to input. | 2.38.0 | | blur-after-select | `boolean` | `false` | Whether to blur after selection. | | | clear-after-select | `boolean` | `false` | Whether to clear after selection. | | | clearable | `boolean` | `false` | Whether autocomplete is clearable. | | | default-value | `string` | `null` | Default value of autocomplete. | | | disabled | `boolean` | `false` | Whether the autocomplete is disabled. | | | get-show | `(value: string) => boolean` | `undefined` | Use the input to determine whether to show options on focus. | | | input-props | `InputHTMLAttributes` | `undefined` | The attributes of input element in autocomplete. | | | loading | `boolean` | `false` | Whether to show a loading status. | | | menu-props | `HTMLAttributes` | `undefined` | The menu's dom props. | 2.32.2 | | options | `Array` | `[]` | Options to autocomplete from. | | | placeholder | `string` | `'Please Input'` | Autocomplete's placeholder. | | | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end'` | `'bottom-start'` | Autocomplete's placement. | 2.25.0 | | render-label | `(option: SelectOption \| SelectGroupOption, selected: boolean) => VNodeChild` | `undefined` | Render function for each option label. | 2.24.0 | | render-option | `(info: { node: VNode, option: SelectOption \| SelectGroupOption, selected: boolean }) => VNodeChild` | `undefined` | Render function for each option. | 2.24.0 | | scrollbar-props | `ScrollbarProps` | `undefined` | See [Scrollbar props](scrollbar#Scrollbar-Props) | 2.44.0 | | show-empty | `boolean` | `false` | Whether to show menu if there's no option. | 2.37.1 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Autocomplete size. | | | status | `'success' \| 'warning' \| 'error'` | `undefined` | Validation status. | 2.27.0 | | to | `string \| HTMLElement \| false` | `body` | Container node of the menu. `false` will keep it not detached. | | | value | `string` | `undefined` | Input of autocomplete. | | | on-blur | `(event: FocusEvent) => void` | `undefined` | On blur callback function. | | | on-focus | `(event: FocusEvent) => void` | `undefined` | On focus callback function. | | | on-select | `(value: string) => void` | `undefined` | On select callback function. | | | on-update:value | `(value: string \| null) => void` | `undefined` | On update callback function. | | #### AutoCompleteOption Properties | Name | Type | Description | | -------- | --------- | ------------------------------- | | disabled | `boolean` | Whether the option is disabled. | | label | `string` | Option label value. | | value | `string` | Option ID (should be unique). | #### AutoCompleteGroupOption Properties | Name | Type | Description | | -------- | ------------------------------------- | ----------------------- | | children | `Array` | Group children options. | | label | `string` | Group label. | | key | `string \| number` | Unique group key. | | type | `'group'` | Required group type. | ### AutoComplete Slots | Name | Parameters | Description | Version | | --- | --- | --- | --- | | default | `(options: { handleInput: (value: string) => void, handleFocus: function, handleBlur: function, value: string, theme: string \| null })` | Custom input elements, supplied by the user. | | | empty | `()` | Menu's content to show when there's no option. | 2.37.1 | | prefix | `()` | Input's prefix content. | | | suffix | `()` | Input's suffix content. | | ### AutoComplete Methods | Name | Type | Description | Version | | ----- | ------------ | ------------------------ | ------- | | blur | `() => void` | Blur the input element. | 2.26.2 | | focus | `() => void` | Focus the input element. | 2.26.2 | ================================================ FILE: src/auto-complete/demos/enUS/show-options-by-value.demo.vue ================================================ # Whether to show menu Your can determine is whether to show menu based on value when it is focused. ================================================ FILE: src/auto-complete/demos/enUS/size.demo.vue ================================================ # Size ================================================ FILE: src/auto-complete/demos/enUS/status.demo.vue ================================================ # Validation status Validation status can be applied outside form. ================================================ FILE: src/auto-complete/demos/zhCN/after-select.demo.vue ================================================ # 选择后的动作 在选中选项后清除内容或者选择后 Blur。 ================================================ FILE: src/auto-complete/demos/zhCN/append.demo.vue ================================================ # 追加模式 在选中选项后追加到输入框中，而不是直接覆盖，配合 get-show 使用。 ================================================ FILE: src/auto-complete/demos/zhCN/basic.demo.vue ================================================ # 基础用法 ================================================ FILE: src/auto-complete/demos/zhCN/custom-input.demo.vue ================================================ # 自定义输入元素 你可以替换 AutoComplete 的输入元素。 ================================================ FILE: src/auto-complete/demos/zhCN/customized-rendering.demo.vue ================================================ # 自定义渲染 使用 `render-label` 自定义选项内容。 ================================================ FILE: src/auto-complete/demos/zhCN/group.demo.vue ================================================ # 成组 ================================================ FILE: src/auto-complete/demos/zhCN/index.demo-entry.md ================================================ # 自动填充 Auto Complete 用来当搜索提示或者类似的东西。 ## 演示 ```demo basic.vue size.vue group.vue custom-input.vue after-select.vue show-options-by-value.vue customized-rendering.vue status.vue append.vue ``` ## API ### AutoComplete Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | append | `boolean` | `false` | 选中后是否追加 | 2.38.0 | | blur-after-select | `boolean` | `false` | 选中后是否 blur | | | bordered | `boolean` | `undefined` | 是否显示输入框边框 | | | clear-after-select | `boolean` | `false` | 选中后是否清空 | | | clearable | `boolean` | `false` | 自动填充是否支持可清除 | | | default-value | `string` | `null` | 自动填充的默认值 | | | disabled | `boolean` | `false` | 自动填充是否禁用 | | | get-show | `(value: string) => boolean` | `undefined` | 根据输入值在聚焦的状态中决定是否显示菜单 | | | input-props | `InputHTMLAttributes` | `undefined` | 自动填充中 input 元素的属性 | | | loading | `boolean` | `false` | 是否展示加载状态 | | | menu-props | `HTMLAttributes` | `undefined` | 菜单的 DOM 属性 | 2.32.2 | | options | `Array` | `[]` | 自动填充的自定义选项 | | | placeholder | `string` | `'请输入'` | 自动填充的提示信息 | | | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end'` | `'bottom-start'` | 自动填充的弹出位置 | 2.25.0 | | render-label | `(option: SelectOption \| SelectGroupOption, selected: boolean) => VNodeChild` | `undefined` | 选项标签渲染函数 | 2.24.0 | | render-option | `(info: { node: VNode, option: SelectOption \| SelectGroupOption, selected: boolean }) => VNodeChild` | `undefined` | 选项的渲染函数 | 2.24.0 | | scrollbar-props | `ScrollbarProps` | `undefined` | See [Scrollbar props](scrollbar#Scrollbar-Props) | 2.44.0 | | show-empty | `boolean` | `false` | 在没有选项的时候是否展示菜单 | 2.37.1 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 自动填充的尺寸大小 | | | status | `'success' \| 'warning' \| 'error'` | `undefined` | 验证状态 | 2.27.0 | | to | `string \| HTMLElement \| false` | `body` | 菜单的容器节点，`false` 会待在原地 | | | value | `string` | `undefined` | 自动填充的数据用户可控 | | | z-index | `number` | `undefined` | 菜单的 z-index | | | on-blur | `(event: FocusEvent) => void` | `undefined` | blur 时触发的回调函数 | | | on-focus | `(event: FocusEvent) => void` | `undefined` | focus 时触发的回调函数 | | | on-select | `(value: string) => void` | `undefined` | select 选中时触发的回调函数 | | | on-update:value | `(value: string \| null) => void` | `undefined` | 可控数据更新时触发的回调函数 | | #### AutoCompleteOption Properties | 名称 | 类型 | 介绍 | | -------- | --------- | --------------- | | disabled | `boolean` | 是否禁用 | | label | `string` | 显示的 label 值 | | value | `string` | 需要唯一 | #### AutoCompleteGroupOption Properties | 名称 | 类型 | 介绍 | | --- | --- | --- | | children | `Array` | AutoCompleteGroupOption 的 children 项 | | label | `string` | AutoCompleteGroupOption 的名字 | | key | `string \| number` | AutoCompleteGroupOption 的 key | | type | `'group'` | AutoCompleteGroupOption 的类型 | ### AutoComplete Slots | 名称 | 参数 | 说明 | 版本 | | --- | --- | --- | --- | | default | `(options: { handleInput: (value: string) => void, handleFocus: function, handleBlur: function, value: string, theme: string \| null })` | 自定义输入元素，由用户填充 | | | empty | `()` | 菜单为空时候的内容 | 2.37.1 | | prefix | `()` | 输入框头部内容 | | | suffix | `()` | 输入框尾部内容 | | ### AutoComplete Methods | 名称 | 类型 | 说明 | 版本 | | ----- | ------------ | ---------------- | ------ | | blur | `() => void` | Blur input 元素 | 2.26.2 | | focus | `() => void` | Focus input 元素 | 2.26.2 | ================================================ FILE: src/auto-complete/demos/zhCN/show-options-by-value.demo.vue ================================================ # 是否显示菜单 你可以根据输入的值来决定是否显示菜单 ================================================ FILE: src/auto-complete/demos/zhCN/size.demo.vue ================================================ # 尺寸 ================================================ FILE: src/auto-complete/demos/zhCN/status.demo.vue ================================================ # 验证状态 输入的验证状态可以脱离表单使用。 ================================================ FILE: src/auto-complete/index.ts ================================================ export { autoCompleteProps, default as NAutoComplete } from './src/AutoComplete' export type { AutoCompleteProps, AutoCompleteSlots } from './src/AutoComplete' export type { AutoCompleteDefaultSlotProps, AutoCompleteGroupOption, AutoCompleteInst, AutoCompleteOption } from './src/interface' export type * from './src/public-types' ================================================ FILE: src/auto-complete/src/AutoComplete.tsx ================================================ import type { TreeNode } from 'treemate' import type { CSSProperties, HTMLAttributes, InputHTMLAttributes, PropType, SlotsType, VNode } from 'vue' import type { FollowerPlacement } from 'vueuc' import type { InternalSelectMenuRef, ScrollbarProps } from '../../_internal' import type { RenderLabel, RenderOption } from '../../_internal/select-menu/src/interface' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils' import type { FormValidationStatus } from '../../form/src/public-types' import type { InputInst } from '../../input' import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../select/src/interface' import type { AutoCompleteTheme } from '../styles' import type { AutoCompleteDefaultSlotProps, AutoCompleteInst, AutoCompleteOption, AutoCompleteOptions, OnSelect, OnSelectImpl, OnUpdateImpl, OnUpdateValue } from './interface' import type { AutoCompleteSize } from './public-types' import { getPreciseEventTarget } from 'seemly' import { createTreeMate } from 'treemate' import { clickoutside } from 'vdirs' import { useIsMounted, useMergedState } from 'vooks' import { computed, defineComponent, h, ref, toRef, Transition, watchEffect, withDirectives } from 'vue' import { VBinder, VFollower, VTarget } from 'vueuc' import { NInternalSelectMenu } from '../../_internal' import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins' import { call, getFirstSlotVNodeWithTypedProps, useAdjustedTo, warnOnce } from '../../_utils' import { NInput } from '../../input' import { createTmOptions } from '../../select/src/utils' import { autoCompleteLight } from '../styles' import style from './styles/index.cssr' import { mapAutoCompleteOptionsToSelectOptions } from './utils' export const autoCompleteProps = { ...(useTheme.props as ThemeProps), to: useAdjustedTo.propTo, menuProps: Object as PropType, append: Boolean, bordered: { type: Boolean as PropType, default: undefined }, clearable: { type: Boolean, default: undefined }, defaultValue: { type: String as PropType, default: null }, loading: { type: Boolean, default: undefined }, disabled: { type: Boolean as PropType, default: undefined }, placeholder: String, placement: { type: String as PropType, default: 'bottom-start' }, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function as PropType<(inputValue: string) => boolean>, showEmpty: Boolean, inputProps: Object as PropType, renderOption: Function as PropType, renderLabel: Function as PropType, size: String as PropType, options: { type: Array as PropType, default: () => [] }, zIndex: Number, status: String as PropType, 'onUpdate:value': [Function, Array] as PropType>, onUpdateValue: [Function, Array] as PropType>, onSelect: [Function, Array] as PropType>, onBlur: [Function, Array] as PropType void>>, onFocus: [Function, Array] as PropType void>>, scrollbarProps: Object as PropType, // deprecated onInput: [Function, Array] as PropType | undefined> } as const export type AutoCompleteProps = ExtractPublicPropTypes export interface AutoCompleteSlots { default?: (options: AutoCompleteDefaultSlotProps) => VNode[] empty?: () => VNode[] prefix?: () => VNode[] suffix?: () => VNode[] } export default defineComponent({ name: 'AutoComplete', props: autoCompleteProps, slots: Object as SlotsType, setup(props) { if (__DEV__) { watchEffect(() => { if (props.onInput !== undefined) { warnOnce( 'auto-complete', '`on-input` is deprecated, please use `on-update:value` instead.' ) } }) } const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef, inlineThemeDisabled, mergedComponentPropsRef } = useConfig(props) const formItem = useFormItem(props, { mergedSize: (NFormItem) => { const { size } = props if (size) return size const { mergedSize: formItemSize } = NFormItem || {} if (formItemSize?.value) return formItemSize.value as AutoCompleteSize const configSize = mergedComponentPropsRef?.value?.AutoComplete?.size if (configSize) return configSize return 'medium' } }) const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem const triggerElRef = ref(null) const menuInstRef = ref(null) const uncontrolledValueRef = ref(props.defaultValue) const controlledValueRef = toRef(props, 'value') const mergedValueRef = useMergedState( controlledValueRef, uncontrolledValueRef ) const canBeActivatedRef = ref(false) const isComposingRef = ref(false) const themeRef = useTheme( 'AutoComplete', '-auto-complete', style, autoCompleteLight, props, mergedClsPrefixRef ) const selectOptionsRef = computed(() => { return mapAutoCompleteOptionsToSelectOptions(props.options) }) const mergedShowOptionsRef = computed(() => { const { getShow } = props if (getShow) { return getShow(mergedValueRef.value || '') } return !!mergedValueRef.value }) const activeRef = computed(() => { return ( mergedShowOptionsRef.value && canBeActivatedRef.value && (props.showEmpty ? true : !!selectOptionsRef.value.length) ) }) const treeMateRef = computed(() => createTreeMate( selectOptionsRef.value, createTmOptions('value', 'children') ) ) function doUpdateValue(value: string | null): void { const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onInput } = props const { nTriggerFormInput, nTriggerFormChange } = formItem if (onUpdateValue) call(onUpdateValue as OnUpdateImpl, value) if (_onUpdateValue) call(_onUpdateValue as OnUpdateImpl, value) if (onInput) call(onInput as OnUpdateImpl, value) uncontrolledValueRef.value = value nTriggerFormInput() nTriggerFormChange() } function doSelect(value: string | number): void { const { onSelect } = props const { nTriggerFormInput, nTriggerFormChange } = formItem if (onSelect) call(onSelect as OnSelectImpl, value) nTriggerFormInput() nTriggerFormChange() } function doBlur(e: FocusEvent): void { const { onBlur } = props const { nTriggerFormBlur } = formItem if (onBlur) call(onBlur, e) nTriggerFormBlur() } function doFocus(e: FocusEvent): void { const { onFocus } = props const { nTriggerFormFocus } = formItem if (onFocus) call(onFocus, e) nTriggerFormFocus() } function handleCompositionStart(): void { isComposingRef.value = true } function handleCompositionEnd(): void { window.setTimeout(() => { isComposingRef.value = false }, 0) } function handleKeyDown(e: KeyboardEvent): void { switch (e.key) { case 'Enter': if (!isComposingRef.value) { const pendingOptionTmNode = menuInstRef.value?.getPendingTmNode() if (pendingOptionTmNode) { select(pendingOptionTmNode.rawNode as AutoCompleteOption) e.preventDefault() } } break case 'ArrowDown': menuInstRef.value?.next() break case 'ArrowUp': menuInstRef.value?.prev() break } } function select(option: AutoCompleteOption): void { if (option?.value !== undefined) { doSelect(option.value) if (props.clearAfterSelect) { doUpdateValue(null) } else if (option.label !== undefined) { doUpdateValue( props.append ? `${mergedValueRef.value}${option.label}` : option.label ) } canBeActivatedRef.value = false if (props.blurAfterSelect) { blur() } } } function handleClear(): void { doUpdateValue(null) } function handleFocus(e: FocusEvent): void { canBeActivatedRef.value = true doFocus(e) } function handleBlur(e: FocusEvent): void { canBeActivatedRef.value = false doBlur(e) } function handleInput(value: string): void { canBeActivatedRef.value = true doUpdateValue(value) } function handleToggle(option: TreeNode): void { select(option.rawNode as AutoCompleteOption) } function handleClickOutsideMenu(e: MouseEvent): void { if ( !triggerElRef.value?.contains(getPreciseEventTarget(e) as Node | null) ) { canBeActivatedRef.value = false } } function blur(): void { if (triggerElRef.value?.contains(document.activeElement)) { ;(document.activeElement as HTMLElement)?.blur() } } const cssVarsRef = computed(() => { const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow } } = themeRef.value return { '--n-menu-box-shadow': menuBoxShadow, '--n-bezier': cubicBezierEaseInOut } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass('auto-complete', undefined, cssVarsRef, props) : undefined const inputInstRef = ref(null) const exposedMethods: AutoCompleteInst = { focus: () => { inputInstRef.value?.focus() }, blur: () => { inputInstRef.value?.blur() } } return { focus: exposedMethods.focus, blur: exposedMethods.blur, inputInstRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, isMounted: useIsMounted(), adjustedTo: useAdjustedTo(props), menuInstRef, triggerElRef, treeMate: treeMateRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, active: activeRef, mergedStatus: mergedStatusRef, handleClear, handleFocus, handleBlur, handleInput, handleToggle, handleClickOutsideMenu, handleCompositionStart, handleCompositionEnd, handleKeyDown, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender, mergedBordered: mergedBorderedRef, namespace: namespaceRef, mergedClsPrefix: mergedClsPrefixRef } }, render() { const { mergedClsPrefix } = this return (
{{ default: () => [ {{ default: () => { const defaultSlot = this.$slots.default if (defaultSlot) { return getFirstSlotVNodeWithTypedProps( 'default', defaultSlot, { handleInput: this.handleInput, handleFocus: this.handleFocus, handleBlur: this.handleBlur, value: this.mergedValue } ) } const { mergedTheme } = this return ( {{ suffix: () => this.$slots.suffix?.(), prefix: () => this.$slots.prefix?.() }} ) } }} , {{ default: () => ( {{ default: () => { this.onRender?.() if (!this.active) return null const { menuProps } = this return withDirectives( {{ empty: () => this.$slots.empty?.() }} , [ [ clickoutside, this.handleClickOutsideMenu, undefined as unknown as string, { capture: true } ] ] ) } }} ) }} ] }}
) } }) ================================================ FILE: src/auto-complete/src/interface.ts ================================================ import type { SelectBaseOption, SelectGroupOption } from '../../select/src/interface' export type AutoCompleteOption = SelectBaseOption export interface AutoCompleteGroupOption extends Omit { children: AutoCompleteOptions } export type AutoCompleteOptions = Array< AutoCompleteOption | AutoCompleteGroupOption | string > export type OnUpdateValue = (value: string & (string | null)) => void export type OnUpdateImpl = (value: string | null) => void export type OnSelect = (value: string & number) => void export type OnSelectImpl = (value: string | number) => void export interface AutoCompleteInst { focus: () => void blur: () => void } export interface AutoCompleteDefaultSlotProps { handleInput: (value: string) => void handleFocus: (e: FocusEvent) => void handleBlur: (e: FocusEvent) => void value: string | null } ================================================ FILE: src/auto-complete/src/public-types.ts ================================================ export type AutoCompleteSize = 'small' | 'medium' | 'large' ================================================ FILE: src/auto-complete/src/styles/index.cssr.ts ================================================ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr' import { c, cB } from '../../../_utils/cssr' // vars: // --n-bezier // --n-menu-box-shadow export default c([ cB('auto-complete', ` z-index: auto; position: relative; display: inline-flex; width: 100%; `), cB('auto-complete-menu', ` margin: 4px 0; box-shadow: var(--n-menu-box-shadow); `, [ fadeInScaleUpTransition({ originalTransition: 'background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier)' }) ]) ]) ================================================ FILE: src/auto-complete/src/utils.ts ================================================ import type { SelectBaseOption, SelectGroupOption, SelectMixedOption } from '../../select/src/interface' import type { AutoCompleteGroupOption, AutoCompleteOption, AutoCompleteOptions } from './interface' export function mapAutoCompleteOptionsToSelectOptions( options: AutoCompleteOptions ): SelectMixedOption[] { return options.map(convertAutoCompleteOptionToSelectOption) } function convertAutoCompleteOptionToSelectOption( option: AutoCompleteOption | AutoCompleteGroupOption | string ): SelectMixedOption { if (typeof option === 'string') { return { label: option, value: option } } else if (option.type === 'group') { const groupOption: SelectGroupOption = { type: 'group', label: option.label ?? (option.name as any), value: option.value ?? (option.name as any), key: (option.key || option.name) as any, children: (option.children as Array).map( groupOption => convertAutoCompleteOptionToSelectOption( groupOption ) as SelectBaseOption ) } return groupOption } else { return option as SelectMixedOption } } ================================================ FILE: src/auto-complete/styles/dark.ts ================================================ import type { AutoCompleteTheme } from './light' import { internalSelectMenuDark } from '../../_internal/select-menu/styles' import { commonDark } from '../../_styles/common' import { inputDark } from '../../input/styles' import { self } from './light' const autoCompleteDark: AutoCompleteTheme = { name: 'AutoComplete', common: commonDark, peers: { InternalSelectMenu: internalSelectMenuDark, Input: inputDark }, self } export default autoCompleteDark ================================================ FILE: src/auto-complete/styles/index.ts ================================================ export { default as autoCompleteDark } from './dark' export { default as autoCompleteLight } from './light' export type { AutoCompleteTheme, AutoCompleteThemeVars } from './light' ================================================ FILE: src/auto-complete/styles/light.ts ================================================ import type { ThemeCommonVars } from '../../_styles/common' import { internalSelectMenuLight } from '../../_internal/select-menu/styles' import { createTheme } from '../../_mixins' import { commonLight } from '../../_styles/common' import { inputLight } from '../../input/styles' export function self(vars: ThemeCommonVars) { const { boxShadow2 } = vars return { menuBoxShadow: boxShadow2 } } const autoCompleteLight = createTheme({ name: 'AutoComplete', common: commonLight, peers: { InternalSelectMenu: internalSelectMenuLight, Input: inputLight }, self }) export default autoCompleteLight export type AutoCompleteTheme = typeof autoCompleteLight export type AutoCompleteThemeVars = ReturnType ================================================ FILE: src/auto-complete/tests/AutoComplete.spec.ts ================================================ import type { AutoCompleteProps } from '../index' import { mount } from '@vue/test-utils' import { NAutoComplete } from '../index' describe('n-auto-complete', () => { it('should work with import on demand', () => { mount(NAutoComplete) }) it('should work with `clearable` prop', async () => { const wrapper = mount(NAutoComplete) expect(wrapper.find('.n-base-clear').exists()).not.toBe(true) await wrapper.setProps({ clearable: true }) expect(wrapper.find('.n-base-clear').exists()).toBe(true) wrapper.unmount() }) it('should work with `disabled` prop', async () => { const wrapper = mount(NAutoComplete) expect(wrapper.find('.n-input').classes()).not.toContain( 'n-input--disabled' ) await wrapper.setProps({ disabled: true }) expect(wrapper.find('.n-input').classes()).toContain('n-input--disabled') wrapper.unmount() }) it('should work with `loading` prop', async () => { const options: AutoCompleteProps['options'] = [ '@gmail.com', '@163.com', '@qq.com' ].map((suffix) => { const prefix = 'test' return { label: prefix + suffix, value: prefix + suffix } }) const wrapper = mount(NAutoComplete, { props: { options } }) expect(wrapper.find('.n-base-loading__container').exists()).toBe(false) await wrapper.setProps({ loading: true }) expect(wrapper.find('.n-base-loading__container').exists()).toBe(true) wrapper.unmount() }) it('should work with `placeholder` prop', async () => { const wrapper = mount(NAutoComplete) expect(wrapper.find('input').attributes('placeholder')).toBe('Please Input') await wrapper.setProps({ placeholder: 'test-placeholder' }) expect(wrapper.find('input').attributes('placeholder')).toBe( 'test-placeholder' ) wrapper.unmount() }) it('should work with `size` prop', async () => { ;(['small', 'medium', 'large'] as const).forEach((size) => { const wrapper = mount(NAutoComplete, { props: { size } }) expect(wrapper.find('.n-input').attributes('style')).toMatchSnapshot() wrapper.unmount() }) }) it('should work with `getShow` prop', async () => { const options: AutoCompleteProps['options'] = [ '@gmail.com', '@163.com', '@qq.com' ].map((suffix) => { const prefix = 'test' return { label: prefix + suffix, value: prefix + suffix } }) const wrapper = mount(NAutoComplete) await wrapper.setProps({ getShow: (value: string | null) => { if (value === 'a') { return true } return false }, options }) expect(document.querySelector('.n-auto-complete-menu')).toEqual(null) wrapper.find('input').setValue('a') await wrapper.find('input').trigger('focus') expect(document.querySelector('.n-auto-complete-menu')).not.toEqual(null) wrapper.unmount() }) it('should work with `append` prop and `getShow` prop', async () => { const options: AutoCompleteProps['options'] = [ 'gmail.com', '163.com', 'qq.com' ].map((suffix) => { return { label: suffix, value: suffix } }) const wrapper = mount(NAutoComplete) await wrapper.setProps({ getShow: (value: string | null) => { return !!value?.endsWith('@') }, options }) expect(document.querySelector('.n-auto-complete-menu')).toEqual(null) wrapper.find('input').setValue('@') await wrapper.find('input').trigger('focus') expect(document.querySelector('.n-auto-complete-menu')).not.toEqual(null) wrapper.unmount() }) it('should work with `input-props` prop', async () => { const wrapper = mount(NAutoComplete, { props: { inputProps: { id: 'input', max: '10' } } }) expect(wrapper.find('input').attributes('max')).toEqual('10') wrapper.unmount() }) it('should work with `on-blur` prop', async () => { const onBlur = vi.fn() const wrapper = mount(NAutoComplete, { props: { onBlur } }) await wrapper.find('input').trigger('focus') await wrapper.find('input').trigger('blur') expect(onBlur).toHaveBeenCalled() wrapper.unmount() }) it('should work with `on-focus` prop', async () => { const onFocus = vi.fn() const wrapper = mount(NAutoComplete, { props: { onFocus } }) await wrapper.find('input').trigger('focus') await wrapper.find('input').trigger('blur') expect(onFocus).toHaveBeenCalled() wrapper.unmount() }) it('should work with `status` prop', async () => { ;(['success', 'warning', 'error'] as const).forEach((status) => { const wrapper = mount(NAutoComplete, { props: { status } }) expect(wrapper.find('.n-input').classes()).toContain( `n-input--${status}-status` ) wrapper.unmount() }) }) it('should work with `placement` prop', async () => { ;( [ 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end' ] as const ).forEach(async (placement) => { const wrapper = mount(NAutoComplete, { props: { placement } }) await vi.waitFor(() => { expect( document .querySelector('.v-binder-follower-content') ?.getAttribute('v-placement') ).toBe(placement) }) wrapper.unmount() }) }) }) ================================================ FILE: src/auto-complete/tests/__snapshots__/AutoComplete.spec.ts.snap ================================================ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`n-auto-complete > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 28px; --n-padding-left: 10px; --n-padding-right: 10px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; exports[`n-auto-complete > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 14px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 34px; --n-padding-left: 12px; --n-padding-right: 12px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; exports[`n-auto-complete > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-count-text-color: rgb(118, 124, 130); --n-count-text-color-disabled: rgba(194, 194, 194, 1); --n-color: rgba(255, 255, 255, 1); --n-font-size: 15px; --n-font-weight: 400; --n-border-radius: 3px; --n-height: 40px; --n-padding-left: 14px; --n-padding-right: 14px; --n-text-color: rgb(51, 54, 57); --n-caret-color: #18a058; --n-text-decoration-color: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-disabled: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-focus: 1px solid #36ad6a; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-icon-size: 16px; --n-line-height-textarea: 1.6; --n-color-disabled: rgb(250, 250, 252); --n-color-focus: rgba(255, 255, 255, 1); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-loading-color: #18a058; --n-caret-color-warning: #f0a020; --n-color-focus-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-loading-color-warning: #f0a020; --n-caret-color-error: #d03050; --n-color-focus-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-loading-color-error: #d03050; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-size: 16px; --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-icon-color: rgba(194, 194, 194, 1); --n-icon-color-hover: rgba(146, 146, 146, 1); --n-icon-color-pressed: rgba(175, 175, 175, 1); --n-icon-color-disabled: rgba(209, 209, 209, 1); --n-suffix-text-color: rgb(51, 54, 57);"`; ================================================ FILE: src/auto-complete/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NAutoComplete } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/avatar/demos/enUS/badge.demo.vue ================================================ # Badge Using it with `badge` would be nice (if you like tons of notifications). ================================================ FILE: src/avatar/demos/enUS/color.demo.vue ================================================ # Color You can set colors related to things you want to eat. ================================================ FILE: src/avatar/demos/enUS/fallback.demo.vue ================================================ # Fallback Show 07akioni if loading fails. ================================================ FILE: src/avatar/demos/enUS/group.demo.vue ================================================ # Avatar Group Crowded people. --- Please note that the demo uses `NGAvatarGroup` which is available since naive-ui `2.43.0`. The `NGAvatarGroup` is the same as `NAvatarGroup` except with a generic `options` prop which can make slots & props types more accurate in Vue files. The component is only available in Vue >= `3.3` and in `.vue` files. If your environment doesn't support [Vue Generic Components](https://blog.vuejs.org/posts/vue-3-3#generic-components), please use `NAvatarGroup` instead. The `NGAvatarGroup` should be imported from `'naive-ui/generic'`. ================================================ FILE: src/avatar/demos/enUS/icon.demo.vue ================================================ # Icon I like using an icon in an avatar. ================================================ FILE: src/avatar/demos/enUS/index.demo-entry.md ================================================ # Avatar On the Internet, nobody knows you're a dog. ## Demos ```demo size.vue shape.vue color.vue badge.vue icon.vue name-size.vue fallback.vue group.vue lazy.vue v-show-debug.vue ``` ## API ### Avatar Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | bordered | `boolean` | `false` | Whether to display a avatar with border. | | | color | `string` | `undefined` | The background color of the avatar. | | | fallback-src | `string` | `undefined` | Image URL to show when avatar fails to load. | | | img-props | `ImgHTMLAttributes` | `undefined` | The props of the img element inside the component. | 2.34.0 | | intersection-observer-options | `{ root?: Element \| Document \| string \| null, rootMargin?: string, threshold?: number \| number[]; }` | `undefined` | Intersection observer's config to be applied when `lazy=true`. | 2.31.0 | | lazy | `boolean` | `false` | Load image after it enters viewport. When used alone, it will be assigned the property value of [HTMLImageElement.loading](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading). Alternatively, it can be used in conjunction with the `intersection-observer-options` configuration to achieve lazy loading. | 2.31.0 | | object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'fill'` | Object-fit type of the image in the container. | | | render-fallback | `() => VNodeChild` | `undefined` | Render function of fallback content. | 2.33.4 | | render-placeholder | `() => VNodeChild` | `undefined` | Render function of placeholder. | 2.33.4 | | round | `boolean` | `false` | Whether to display a rounded avatar. | | | size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Avatar's size. | | src | `string` | `undefined` | Avatar's image source. | | | on-error | `(e: Event) => void` | `undefined` | Callback executed when the avatar image fails to load. | | ### AvatarGroup Props The generic type is `` (available since `2.43.0`). It is only supported in `.vue` files with `Vue >= 3.3`. You can use it by `importing NGAvatarGroup from 'naive-ui/generic'`. Otherwise, please use the regular `n-avatar-group` component. ```ts interface AvatarGroupOption { src: string } ``` | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | expand-on-hover | `boolean` | `false` | Expand on hover. | 2.37.0 | | max | `number` | `undefined` | Max avatar count in the group. | | | max-style | `Object \| string` | `undefined` | The style of the overflow placeholder. | | | options | `Array` | `[]` | Avatar group options. | | | size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Avatar's size. | 2.43.0 | | vertical | `boolean` | `false` | Whether display a vertical avatar group. | | ### Avatar Slots | Name | Parameters | Description | Version | | --- | --- | --- | --- | | default | `()` | The content of the avatar. | | | fallback | `()` | Content if avatar load fails. | 2.33.4 | | placeholder | `()` | Placeholder shown when image is not loaded. | 2.31.0 | ### AvatarGroup Slots | Name | Parameters | Description | | --- | --- | --- | | avatar | `(info: { option: { src: string } })` | Avatar of the avatar group. | | default | `()` | The content of the avatar group. | | rest | `(info: { options: Array<{ src: string }>, rest: number })` | Overflow indicator of the avatar group. | ================================================ FILE: src/avatar/demos/enUS/lazy.demo.vue ================================================ # Lazy load Load the images only after they enter the viewport. There are two ways to use it: one is to use the `lazy` property alone, which will be set to the value of the [HTMLImageElement.loading](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) property, and the other is to use `lazy` together with the `intersection-observer-options` configuration to implement lazy loading using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API. ================================================ FILE: src/avatar/demos/enUS/name-size.demo.vue ================================================ # Content size Text is resized to fit the avatar. ================================================ FILE: src/avatar/demos/enUS/shape.demo.vue ================================================ # Shape Avatar can be `round`. ================================================ FILE: src/avatar/demos/enUS/size.demo.vue ================================================ # Size Avatar has `small`, `medium` and `large` sizes. You could also use a custom px number for size. ================================================ FILE: src/avatar/demos/enUS/v-show-debug.demo.vue ================================================ # v-show debug ================================================ FILE: src/avatar/demos/zhCN/badge.demo.vue ================================================ # 标记 和 `Badge` 一起用也挺好的 (如果你喜欢看到一堆一堆的推送)。 ================================================ FILE: src/avatar/demos/zhCN/color.demo.vue ================================================ # 颜色 你可以把它设成某种和你爱吃的东西有关的颜色。 ================================================ FILE: src/avatar/demos/zhCN/error-placeholder-debug.demo.vue ================================================ # Error placeholder debug ================================================ FILE: src/avatar/demos/zhCN/fallback.demo.vue ================================================ # 加载失败时显示的图像 下面的头像加载失败时会展示 07akioni。 ================================================ FILE: src/avatar/demos/zhCN/group.demo.vue ================================================ # 头像组 人多不一定是好事。 --- 请注意，该演示使用了 `NGAvatarGroup` 组件，该组件自 naive-ui 的 `2.43.0` 起才可用。 `NGAvatarGroup` 与 `NAvatarGroup` 几乎完全相同，不同之处在于它新增了一个通用的 `options` 属性（generic `options` prop），这可以使在 `.vue` 文件中使用时让 slots 和 props 的类型更精确。 该组件仅在 Vue >= `3.3` 且在 `.vue` 文件中才能使用。 如果你的开发环境不支持 [Vue 泛型组件](https://blog.vuejs.org/posts/vue-3-3#generic-components)，请改用 `NAvatarGroup`。 `NGAvatarGroup` 应从 `'naive-ui/generic'` 中导入。 ================================================ FILE: src/avatar/demos/zhCN/icon.demo.vue ================================================ # 图标 我喜欢用图标当头像。 ================================================ FILE: src/avatar/demos/zhCN/index.demo-entry.md ================================================ # 头像 Avatar 在互联网上，没有人知道你是 \*\*\* 。 ## 演示 ```demo error-placeholder-debug.vue size.vue shape.vue color.vue badge.vue icon.vue name-size.vue fallback.vue group.vue lazy.vue v-show-debug.vue rtl-debug.vue ``` ## API ### Avatar Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | bordered | `boolean` | `false` | 头像是否带边框 | | | color | `string` | `undefined` | 头像的背景色 | | | fallback-src | `string` | `undefined` | 头像加载失败时显示的图片的地址 | | | img-props | `ImgHTMLAttributes` | `undefined` | 组件中 img 元素的属性 | 2.34.0 | | intersection-observer-options | `{ root?: Element \| Document \| string \| null, rootMargin?: string, threshold?: number \| number[]; }` | `undefined` | `lazy=true` 时 intersection observer 观测的配置 | 2.31.0 | | lazy | `boolean` | `false` | 是否让图片进入视口再加载，单独使用将设置为[HTMLImageElement.loading](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) 的属性值；也可配合 `intersection-observer-options` 配置实现懒加载 | 2.31.0 | | object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'fill'` | 头像的图片在容器内的的适应类型 | | | render-fallback | `() => VNodeChild` | `undefined` | 加载失败的渲染函数 | 2.33.4 | | render-placeholder | `() => VNodeChild` | `undefined` | 占位的渲染函数 | 2.33.4 | | round | `boolean` | `false` | 头像是否圆形 | | | size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | 头像的尺寸 | | src | `string` | `undefined` | 头像的地址 | | | on-error | `(e: Event) => void` | `undefined` | 头像的图片加载失败执行的回调 | | ### AvatarGroup Props 泛型 ``，自 `2.43.0` 可用。 泛型能力仅在 `.vue` 文件中，`Vue >= 3.3`，通过 `import { NGAvatarGroup } from 'naive-ui/generic'` 可用，否则请使用普通的 `n-avatar-group`。 ```ts interface AvatarGroupOption { src: string } ``` | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | expand-on-hover | `boolean` | `false` | 悬停时展开 | 2.37.0 | | max | `number` | `undefined` | 组内头像显示的最大个数 | | | max-style | `Object \| string` | `undefined` | 溢出标识的样式 | | | options | `Array` | `[]` | 头像组的选项 | | | size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | 头像的尺寸 | 2.43.0 | | vertical | `boolean` | `false` | 组内头像是否垂直排列 | | ### Avatar Slots | 名称 | 参数 | 说明 | 版本 | | ----------- | ---- | -------------------------- | ------ | | default | `()` | 头像内填充的内容 | | | fallback | `()` | 加载失败的内容 | 2.33.4 | | placeholder | `()` | 图像没有完成加载时候的占位 | 2.31.0 | ### AvatarGroup Slots | 名称 | 参数 | 说明 | | --- | --- | --- | | avatar | `(info: { option: { src: string } })` | 头像组头像 | | default | `()` | 头像组内填充的内容 | | rest | `(info: { options: Array<{ src: string }>, rest: number })` | 头像组溢出容器 | ================================================ FILE: src/avatar/demos/zhCN/lazy.demo.vue ================================================ # 懒加载 让图片进入视口再加载，两种使用方式：一种是单独使用 `lazy` 属性，则将设置为原生 [HTMLImageElement.loading](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/loading) 的属性值； 另一种方式是配合 `intersection-observer-options` 配置，将采用 [IntersectionObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver) API 实现懒加载。 ================================================ FILE: src/avatar/demos/zhCN/name-size.demo.vue ================================================ # 字号 字号会根据内容文字自动调整。 ================================================ FILE: src/avatar/demos/zhCN/rtl-debug.demo.vue ================================================ # Rtl Debug ================================================ FILE: src/avatar/demos/zhCN/shape.demo.vue ================================================ # 形状 头像可以是圆形。 ================================================ FILE: src/avatar/demos/zhCN/size.demo.vue ================================================ # 尺寸 头像有 `small`、`medium` 和 `large` 大小，也可以自己设定尺寸。 ================================================ FILE: src/avatar/demos/zhCN/v-show-debug.demo.vue ================================================ # v-show debug ================================================ FILE: src/avatar/index.ts ================================================ export { avatarProps, default as NAvatar } from './src/Avatar' export type { AvatarProps, AvatarSlots } from './src/Avatar' ================================================ FILE: src/avatar/src/Avatar.tsx ================================================ import type { ImgHTMLAttributes, PropType, SlotsType, VNode, VNodeChild } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes } from '../../_utils' import type { IntersectionObserverOptions } from '../../image/src/utils' import type { AvatarTheme } from '../styles' import type { ObjectFit, Size } from './interface' import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue' import { VResizeObserver } from 'vueuc' import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { color2Class, createKey, resolveSlot, resolveWrappedSlot } from '../../_utils' import { isImageSupportNativeLazy } from '../../_utils/env/is-native-lazy-load' import { observeIntersection } from '../../image/src/utils' import { tagInjectionKey } from '../../tag/src/Tag' import { avatarLight } from '../styles' import { avatarGroupInjectionKey } from './context' import style from './styles/index.cssr' export const avatarProps = { ...(useTheme.props as ThemeProps), size: [String, Number] as PropType, src: String, circle: { type: Boolean, default: undefined }, objectFit: String as PropType, round: { type: Boolean, default: undefined }, bordered: { type: Boolean, default: undefined }, onError: Function as PropType<(e: Event) => void>, fallbackSrc: String, intersectionObserverOptions: Object as PropType, lazy: Boolean, onLoad: Function as PropType<(e: Event) => void>, renderPlaceholder: Function as PropType<() => VNodeChild>, renderFallback: Function as PropType<() => VNodeChild>, imgProps: Object as PropType, /** @deprecated */ color: String } as const export type AvatarProps = ExtractPublicPropTypes export interface AvatarSlots { default?: () => VNode[] placeholder?: () => VNode[] fallback?: () => VNode[] } export default defineComponent({ name: 'Avatar', props: avatarProps, slots: Object as SlotsType, setup(props) { const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props) const hasLoadErrorRef = ref(false) let memoedTextHtml: string | null = null const textRef = ref(null) const selfRef = ref(null) const fitTextTransform = (): void => { const { value: textEl } = textRef if (textEl) { if (memoedTextHtml === null || memoedTextHtml !== textEl.innerHTML) { memoedTextHtml = textEl.innerHTML const { value: selfEl } = selfRef if (selfEl) { const { offsetWidth: elWidth, offsetHeight: elHeight } = selfEl const { offsetWidth: textWidth, offsetHeight: textHeight } = textEl const radix = 0.9 const ratio = Math.min( (elWidth / textWidth) * radix, (elHeight / textHeight) * radix, 1 ) textEl.style.transform = `translateX(-50%) translateY(-50%) scale(${ratio})` } } } } const NAvatarGroup = inject(avatarGroupInjectionKey, null) const mergedSizeRef = computed(() => { const { size } = props if (size) return size const { size: avatarGroupSize } = NAvatarGroup || {} if (avatarGroupSize) return avatarGroupSize return 'medium' }) const themeRef = useTheme( 'Avatar', '-avatar', style, avatarLight, props, mergedClsPrefixRef ) const TagInjection = inject(tagInjectionKey, null) const mergedRoundRef = computed(() => { if (NAvatarGroup) return true const { round, circle } = props if (round !== undefined || circle !== undefined) return round || circle if (TagInjection) { return TagInjection.roundRef.value } return false }) const mergedBorderedRef = computed(() => { if (NAvatarGroup) return true return props.bordered || false }) const cssVarsRef = computed(() => { const size = mergedSizeRef.value const round = mergedRoundRef.value const bordered = mergedBorderedRef.value const { color: propColor } = props const { self: { borderRadius, fontSize, color, border, colorModal, colorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value let height: string if (typeof size === 'number') { height = `${size}px` } else { height = themeRef.value.self[createKey('height', size)] } return { '--n-font-size': fontSize, '--n-border': bordered ? border : 'none', '--n-border-radius': round ? '50%' : borderRadius, '--n-color': propColor || color, '--n-color-modal': propColor || colorModal, '--n-color-popover': propColor || colorPopover, '--n-bezier': cubicBezierEaseInOut, '--n-merged-size': `var(--n-avatar-size-override, ${height})` } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( 'avatar', computed(() => { const size = mergedSizeRef.value const round = mergedRoundRef.value const bordered = mergedBorderedRef.value const { color } = props let hash = '' if (size) { if (typeof size === 'number') { hash += `a${size}` } else { hash += size[0] } } if (round) { hash += 'b' } if (bordered) { hash += 'c' } if (color) { hash += color2Class(color) } return hash }), cssVarsRef, props ) : undefined const shouldStartLoadingRef = ref(!props.lazy) onMounted(() => { // Use IntersectionObserver if lazy and intersectionObserverOptions is set if (props.lazy && props.intersectionObserverOptions) { let unobserve: (() => void) | undefined const stopWatchHandle = watchEffect(() => { unobserve?.() unobserve = undefined if (props.lazy) { unobserve = observeIntersection( selfRef.value, props.intersectionObserverOptions, shouldStartLoadingRef ) } }) onBeforeUnmount(() => { stopWatchHandle() unobserve?.() }) } }) watch( () => props.src || props.imgProps?.src, () => { hasLoadErrorRef.value = false } ) const loadedRef = ref(!props.lazy) return { textRef, selfRef, mergedRoundRef, mergedClsPrefix: mergedClsPrefixRef, fitTextTransform, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender, hasLoadError: hasLoadErrorRef, shouldStartLoading: shouldStartLoadingRef, loaded: loadedRef, mergedOnError: (e: Event) => { if (!shouldStartLoadingRef.value) return hasLoadErrorRef.value = true const { onError, imgProps: { onError: imgPropsOnError } = {} } = props onError?.(e) imgPropsOnError?.(e) }, mergedOnLoad: (e: Event) => { const { onLoad, imgProps: { onLoad: imgPropsOnLoad } = {} } = props onLoad?.(e) imgPropsOnLoad?.(e) loadedRef.value = true } } }, render() { const { $slots, src, mergedClsPrefix, lazy, onRender, loaded, hasLoadError, imgProps = {} } = this onRender?.() let img: VNodeChild const placeholderNode = !loaded && !hasLoadError && (this.renderPlaceholder ? this.renderPlaceholder() : this.$slots.placeholder?.()) if (this.hasLoadError) { img = this.renderFallback ? this.renderFallback() : resolveSlot($slots.fallback, () => [ ]) } else { img = resolveWrappedSlot($slots.default, (children) => { if (children) { return ( {{ default: () => ( {children} ) }} ) } else if (src || imgProps.src) { const loadSrc = this.src || imgProps.src return h('img', { ...imgProps, loading: // If interseciton observer options is set, do not use native lazy isImageSupportNativeLazy && !this.intersectionObserverOptions && lazy ? 'lazy' : 'eager', src: lazy && this.intersectionObserverOptions ? this.shouldStartLoading ? loadSrc : undefined : loadSrc, 'data-image-src': loadSrc, onLoad: this.mergedOnLoad, onError: this.mergedOnError, style: [ imgProps.style || '', { objectFit: this.objectFit }, placeholderNode ? { height: '0', width: '0', visibility: 'hidden', position: 'absolute' } : '' ] }) } }) } return ( {img} {lazy && placeholderNode} ) } }) ================================================ FILE: src/avatar/src/context.ts ================================================ import type { AvatarGroupInjection } from '../../avatar-group/src/AvatarGroup' import { createInjectionKey } from '../../_utils' export const avatarGroupInjectionKey = createInjectionKey('n-avatar-group') ================================================ FILE: src/avatar/src/interface.ts ================================================ export type Size = number | 'small' | 'medium' | 'large' export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' ================================================ FILE: src/avatar/src/styles/index.cssr.ts ================================================ import { c, cB, cE, insideModal, insidePopover } from '../../../_utils/cssr' // vars: // --n-font-size // --n-border-radius // --n-color // --n-color-modal // --n-color-popover // --n-bezier // --n-merged-size export default cB('avatar', ` width: var(--n-merged-size); height: var(--n-merged-size); color: #FFF; font-size: var(--n-font-size); display: inline-flex; position: relative; overflow: hidden; text-align: center; border: var(--n-border); border-radius: var(--n-border-radius); --n-merged-color: var(--n-color); background-color: var(--n-merged-color); transition: border-color .3s var(--n-bezier), background-color .3s var(--n-bezier), color .3s var(--n-bezier); `, [ insideModal(c('&', '--n-merged-color: var(--n-color-modal);')), insidePopover(c('&', '--n-merged-color: var(--n-color-popover);')), c('img', ` width: 100%; height: 100%; `), cE('text', ` white-space: nowrap; display: inline-block; position: absolute; left: 50%; top: 50%; `), cB('icon', ` vertical-align: bottom; font-size: calc(var(--n-merged-size) - 6px); `), cE('text', 'line-height: 1.25') ]) ================================================ FILE: src/avatar/styles/dark.ts ================================================ import type { AvatarTheme } from './light' import { commonDark } from '../../_styles/common' import { self } from './light' const avatarDark: AvatarTheme = { name: 'Avatar', common: commonDark, self } export default avatarDark ================================================ FILE: src/avatar/styles/index.ts ================================================ export { default as avatarDark } from './dark' export { default as avatarLight } from './light' export type { AvatarTheme, AvatarThemeVars } from './light' ================================================ FILE: src/avatar/styles/light.ts ================================================ import type { Theme } from '../../_mixins' import type { ThemeCommonVars } from '../../_styles/common' import { composite } from 'seemly' import { commonLight } from '../../_styles/common' export function self(vars: ThemeCommonVars) { const { borderRadius, avatarColor, cardColor, fontSize, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge, modalColor, popoverColor } = vars return { borderRadius, fontSize, border: `2px solid ${cardColor}`, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge, color: composite(cardColor, avatarColor), colorModal: composite(modalColor, avatarColor), colorPopover: composite(popoverColor, avatarColor) } } export type AvatarThemeVars = ReturnType const avatarLight: Theme<'Avatar', AvatarThemeVars> = { name: 'Avatar', common: commonLight, self } export default avatarLight export type AvatarTheme = typeof avatarLight export type AvatarGroupTheme = typeof avatarLight ================================================ FILE: src/avatar/tests/Avatar.spec.tsx ================================================ import { CashOutline as CashIcon } from '@vicons/ionicons5' import { mount } from '@vue/test-utils' import { h, nextTick } from 'vue' import { NIcon } from '../../icon' import { NAvatar } from '../index' // Please note that resize observer doesn't work in JSDOM, so text transfrom // can't be tested. describe('n-avatar', () => { // mock offsetHeight offsetWidth const originalOffsetHeight = Object.getOwnPropertyDescriptor( HTMLElement.prototype, 'offsetHeight' ) const originalOffsetWidth = Object.getOwnPropertyDescriptor( HTMLElement.prototype, 'offsetWidth' ) beforeAll(() => { Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { get() { if (this.className === 'n-avatar__text') { return 80 } return 100 } }) Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { get() { if (this.className === 'n-avatar__text') { return 80 } return 100 } }) }) afterAll(() => { Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { get: () => originalOffsetHeight }) Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { get: () => originalOffsetWidth }) }) it('should work with import on demand', () => { mount(NAvatar) }) it('size is string', () => { const wrapper = mount(NAvatar, { props: { size: 'medium' } }) expect(wrapper.attributes('style')).toContain('--n-merged-size') expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) it('size is number', () => { const wrapper = mount(NAvatar, { props: { size: 50 } }) expect(wrapper.attributes('style')).toContain( '--n-merged-size: var(--n-avatar-size-override, 50px);' ) expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) it('round avatar', () => { const wrapper = mount(NAvatar, { props: { round: true } }) expect(wrapper.attributes('style')).toContain('--n-border-radius: 50%;') expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) it('bordered avatar', () => { const wrapper = mount(NAvatar, { props: { bordered: true } }) expect(wrapper.attributes('style')).toContain('--n-border: 2px solid #fff;') expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) it('custom style', () => { const wrapper = mount(NAvatar, { props: { style: { backgroundColor: 'red' } } }) expect(wrapper.attributes('style')).toContain('background-color: red;') expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) it('image avatar', () => { const wrapper = mount(NAvatar, { props: { src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg' } }) expect(wrapper.find('img').exists()).toBe(true) expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) it('icon avatar', () => { const wrapper = mount(NAvatar, { slots: { default: () => h(NIcon, null, { default: () => h(CashIcon) }) } }) expect(wrapper.find('i').classes()).toContain('n-icon') expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) it('avatar adjust text', async () => { const AdjustAvatar = { data() { return { text: '' } }, render() { const { text } = this as any return {{ default: () => text }} } } const wrapper = mount(AdjustAvatar) const textNode = wrapper.find('.n-avatar__text') await wrapper.setData({ text: 'adjust text' }) await nextTick() expect(textNode.exists()).toBe(true) expect(wrapper.html()).toMatchSnapshot() wrapper.unmount() }) it('image avatar error handle when load failed', async () => { const onError = vi.fn() const wrapper = mount(NAvatar, { props: { src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', onError } }) await wrapper.find('img').trigger('error') expect(onError).toHaveBeenCalled() wrapper.unmount() }) it('should work with `objectFit` prop', () => { const wrapper = mount(NAvatar, { props: { src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', objectFit: 'contain' } }) expect(wrapper.find('img').attributes('style')).toContain( 'object-fit: contain;' ) wrapper.unmount() }) }) ================================================ FILE: src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap ================================================ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`n-avatar > avatar adjust text 1`] = ` "adjust text " `; exports[`n-avatar > bordered avatar 1`] = `""`; exports[`n-avatar > custom style 1`] = `""`; exports[`n-avatar > icon avatar 1`] = ` " " `; exports[`n-avatar > image avatar 1`] = `""`; exports[`n-avatar > round avatar 1`] = `""`; exports[`n-avatar > size is number 1`] = `""`; exports[`n-avatar > size is string 1`] = `""`; ================================================ FILE: src/avatar/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NAvatar } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/avatar-group/index.ts ================================================ export { avatarGroupProps, default as NAvatarGroup } from './src/AvatarGroup' export type { AvatarGroupProps, AvatarGroupSlots } from './src/AvatarGroup' export type * from './src/generic-public-types' export type * from './src/public-types' ================================================ FILE: src/avatar-group/src/AvatarGroup.tsx ================================================ import type { CSSProperties, PropType, SlotsType, VNode } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes } from '../../_utils' import type { Size } from '../../avatar/src/interface' import type { AvatarGroupTheme } from '../styles' import type { AvatarGroupAvatarSlotProps, AvatarGroupOption, AvatarGroupRestSlotProps } from './public-types' import { computed, defineComponent, h, provide } from 'vue' import { useConfig, useTheme } from '../../_mixins' import { useRtl } from '../../_mixins/use-rtl' import NAvatar from '../../avatar/src/Avatar' import { avatarGroupInjectionKey } from '../../avatar/src/context' import { avatarGroupLight } from '../styles' import style from './styles/avatar-group.cssr' export interface AvatarGroupInjection { size?: Size | undefined } export const avatarGroupProps = { ...(useTheme.props as ThemeProps), max: Number, maxStyle: [Object, String] as PropType, options: { type: Array as PropType, default: () => [] }, vertical: Boolean, expandOnHover: Boolean, size: [String, Number] as PropType } as const export type AvatarGroupProps = ExtractPublicPropTypes export interface AvatarGroupSlots { avatar?: (props: AvatarGroupAvatarSlotProps) => VNode[] rest?: (props: AvatarGroupRestSlotProps) => VNode[] default?: () => VNode[] } export default defineComponent({ name: 'AvatarGroup', props: avatarGroupProps, slots: Object as SlotsType, setup(props) { const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props) const mergedThemeRef = useTheme( 'AvatarGroup', '-avatar-group', style, avatarGroupLight, props, mergedClsPrefixRef ) provide(avatarGroupInjectionKey, props) const rtlEnabledRef = useRtl( 'AvatarGroup', mergedRtlRef, mergedClsPrefixRef ) const restOptionsRef = computed(() => { const { max } = props if (max === undefined) return undefined const { options } = props if (options.length > max) return options.slice(max - 1, options.length) return [] }) const displayedOptionsRef = computed(() => { const { options, max } = props if (max === undefined) return options if (options.length > max) return options.slice(0, max - 1) if (options.length === max) return options.slice(0, max) return options }) return { mergedTheme: mergedThemeRef, rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, restOptions: restOptionsRef, displayedOptions: displayedOptionsRef, cssVars: computed(() => { return { '--n-gap': mergedThemeRef.value.self.gap } }) } }, render() { const { mergedClsPrefix, displayedOptions, restOptions, mergedTheme, $slots } = this return (
{displayedOptions.map((option) => { return $slots.avatar ? ( $slots.avatar({ option }) ) : ( ) })} {restOptions !== undefined && restOptions.length > 0 && ($slots.rest ? ( $slots.rest({ options: restOptions, rest: restOptions.length }) ) : ( {{ default: () => `+${restOptions.length}` }} ))}
) } }) ================================================ FILE: src/avatar-group/src/generic-public-types.ts ================================================ import type { CSSProperties, VNode } from 'vue' import type { Equal, Expect, ThemeRelatedProps } from '../../_utils' import type { Size } from '../../avatar/src/interface' import type { AvatarGroupProps } from './AvatarGroup' import type { AvatarGroupAvatarSlotProps, AvatarGroupOption, AvatarGroupRestSlotProps } from './public-types' interface ResolvableAvatarGroupProps< T extends AvatarGroupOption = AvatarGroupOption > { options?: T[] vertical?: boolean expandOnHover?: boolean size?: Size max?: number maxStyle?: string | CSSProperties } // eslint-disable-next-line ts/ban-ts-comment // @ts-ignore type _ // = Expect< Equal, ResolvableAvatarGroupProps> > export type GAvatarGroupProps = ResolvableAvatarGroupProps export interface GAvatarGroupSlots { avatar?: (props: AvatarGroupAvatarSlotProps) => VNode[] rest?: (props: AvatarGroupRestSlotProps) => VNode[] default?: () => VNode[] } ================================================ FILE: src/avatar-group/src/public-types.ts ================================================ export interface AvatarGroupAvatarSlotProps< T extends AvatarGroupOption = AvatarGroupOption > { option: T } export interface AvatarGroupRestSlotProps< T extends AvatarGroupOption = AvatarGroupOption > { options: Array rest: number } export interface AvatarGroupOption { src: string } ================================================ FILE: src/avatar-group/src/styles/avatar-group-rtl.cssr.ts ================================================ import { c, cB, cM, cNotM } from '../../../_utils/cssr' // --n-gap export default cB('avatar-group', [ cM('rtl', ` direction: rtl; `, [ cNotM('vertical', ` flex-direction: row; `, [ cB('avatar', [ c('&:not(:first-child)', ` margin-right: var(--n-gap); margin-left: 0; `) ]) ]) ]) ]) ================================================ FILE: src/avatar-group/src/styles/avatar-group.cssr.ts ================================================ import { c, cB, cM, cNotM } from '../../../_utils/cssr/index' // --n-gap export default cB('avatar-group', ` flex-wrap: nowrap; display: inline-flex; position: relative; `, [ cM('expand-on-hover', [ cB('avatar', [ c('&:not(:first-child)', ` transition: margin .3s var(--n-bezier); `) ]), c('&:hover', [ cNotM('vertical', [ cB('avatar', [ c('&:not(:first-child)', ` margin-left: 0 !important; `) ]) ]), cM('vertical', [ cB('avatar', [ c('&:not(:first-child)', ` margin-top: 0 !important; `) ]) ]) ]) ]), cNotM('vertical', ` flex-direction: row; `, [ cB('avatar', [ c('&:not(:first-child)', ` margin-left: var(--n-gap); `) ]) ]), cM('vertical', ` flex-direction: column; `, [ cB('avatar', [ c('&:not(:first-child)', ` margin-top: var(--n-gap); `) ]) ]) ]) ================================================ FILE: src/avatar-group/styles/dark.ts ================================================ import type { AvatarGroupTheme } from './light' import { commonDark } from '../../_styles/common' import { avatarDark } from '../../avatar/styles' import { self } from './light' const avatarGroupDark: AvatarGroupTheme = { name: 'AvatarGroup', common: commonDark, peers: { Avatar: avatarDark }, self } export default avatarGroupDark ================================================ FILE: src/avatar-group/styles/index.ts ================================================ export { default as avatarGroupDark } from './dark' export { default as avatarGroupLight } from './light' export type { AvatarGroupTheme, AvatarGroupThemeVars } from './light' export { avatarGroupRtl } from './rtl' ================================================ FILE: src/avatar-group/styles/light.ts ================================================ import { createTheme } from '../../_mixins' import { commonLight } from '../../_styles/common' import { avatarLight } from '../../avatar/styles' export type AvatarGroupThemeVars = Record export function self() { return { gap: '-12px' } } const avatarGroupLight = createTheme({ name: 'AvatarGroup', common: commonLight, peers: { Avatar: avatarLight }, self }) export default avatarGroupLight export type AvatarGroupTheme = typeof avatarGroupLight ================================================ FILE: src/avatar-group/styles/rtl.ts ================================================ import type { RtlItem } from '../../config-provider/src/internal-interface' import rtlStyle from '../src/styles/avatar-group-rtl.cssr' export const avatarGroupRtl: RtlItem = { name: 'AvatarGroup', style: rtlStyle } ================================================ FILE: src/avatar-group/tests/Avatar.spec.tsx ================================================ import { mount } from '@vue/test-utils' import { NAvatarGroup } from '../index' describe('n-avatar-group', () => { it('should work with `options` prop in `avatar group`', async () => { const options = [ { name: 'test1', src: 'https://www.naiveui.com/assets/naivelogo.93278402.svg' }, { name: 'test2', src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg' }, { name: 'test3', src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg' }, { name: 'test4', src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg' } ] const wrapper = mount(NAvatarGroup, { props: { options, max: 2 } }) expect(wrapper.findAll('.n-avatar').length).toBe(2) await wrapper.setProps({ vertical: true }) expect(wrapper.find('[role="group"]').classes()).toContain( 'n-avatar-group--vertical' ) await wrapper.setProps({ max: 4 }) expect(wrapper.find('.n-avatar__text').exists()).toBe(false) await wrapper.setProps({ options: [] }) expect(wrapper.findAll('.n-avatar').length).toBe(0) wrapper.unmount() }) }) ================================================ FILE: src/avatar-group/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NAvatar } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/back-top/demos/enUS/basic.demo.vue ================================================ # Basic BackTop will find its first scrollable ascendant element and listen scroll event on it. ================================================ FILE: src/back-top/demos/enUS/change-position.demo.vue ================================================ # Change position For example: right 40px & bottom 160px. ================================================ FILE: src/back-top/demos/enUS/index.demo-entry.md ================================================ # Back Top It helps you back to where you were. However, time never goes back. ## Demos Scroll down to see demos work. ```demo basic.vue visibility-height.vue change-position.vue target-container-selector.vue ``` ## API ### BackTop Props | Name | Type | Default | Description | | --- | --- | --- | --- | | bottom | `number \| string` | `40` | The height of BackTop from the bottom of the page | | listen-to | `string \| HTMLElement` | `undefined` | The element to be listened to scroll event. If it is `undefined` back top will listen to the nearest scrollable parent. | | right | `number \| string` | `40` | The width of BackTop from the right side of the page | | show | `boolean` | `undefined` | Whether to show BackTop | | to | `string \| HTMLElement` | `'body'` | Container node to show BackTop | | visibility-height | `number` | `180` | BackTop's trigger scroll top. | | on-update:show | `(value: boolean) => void` | `undefined` | Callback is triggered when back-top display changes. | ================================================ FILE: src/back-top/demos/enUS/target-container-selector.demo.vue ================================================ # Target to be listened to You can specify target to listen scroll event of. ================================================ FILE: src/back-top/demos/enUS/visibility-height.demo.vue ================================================ # Visibility height You can change visibility height of backtop. ================================================ FILE: src/back-top/demos/zhCN/basic.demo.vue ================================================ # 基础用法 BackTop 会找到首个可滚动的祖先元素并且监听它的滚动事件。 ================================================ FILE: src/back-top/demos/zhCN/change-position.demo.vue ================================================ # 改变位置 例如：right 40px & bottom 160px。 ================================================ FILE: src/back-top/demos/zhCN/index.demo-entry.md ================================================ # 回到顶部 Back Top 它可以帮你回到你曾经到过的地方。不过时间是回不去了。 ## 演示 向下滚动页面查看效果。 ```demo basic.vue visibility-height.vue change-position.vue target-container-selector.vue ``` ## API ### BackTop Props | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | bottom | `number \| string` | `40` | BackTop 距离页面底部的高度 | | listen-to | `string \| HTMLElement` | `undefined` | 监听滚动的元素，如果为 `undefined` 会监听距离最近的一个可滚动的祖先节点 | | right | `number \| string` | `40` | BackTop 距离页面右侧的宽度 | | show | `boolean` | `undefined` | 是否显示 BackTop（受控） | | to | `string \| HTMLElement` | `'body'` | BackTop 渲染的容器节点 | | visibility-height | `number` | `180` | 滚动时触发显示回到顶部的高度 | | on-update:show | `(value: boolean) => void` | `undefined` | BackTop 的 show 改变时触发事件 | ================================================ FILE: src/back-top/demos/zhCN/target-container-selector.demo.vue ================================================ # 监听目标 你可以设定监听哪个元素来触发 Back Top。 ================================================ FILE: src/back-top/demos/zhCN/visibility-height.demo.vue ================================================ # 可视高度 可以改变 Back Top 的可视高度。 ================================================ FILE: src/back-top/index.ts ================================================ export { backTopProps, default as NBackTop } from './src/BackTop' export type { BackTopProps } from './src/BackTop' ================================================ FILE: src/back-top/src/BackTop.tsx ================================================ import type { PropType } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes } from '../../_utils' import type { BackTopTheme } from '../styles' import { getScrollParent, unwrapElement } from 'seemly' import { useIsMounted, useMergedState } from 'vooks' import { computed, defineComponent, h, mergeProps, nextTick, onBeforeUnmount, onMounted, ref, toRef, Transition, watch, watchEffect } from 'vue' import { VLazyTeleport } from 'vueuc' import { NBaseIcon } from '../../_internal' import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { formatLength, isDocument, lockHtmlScrollRightCompensationRef, resolveSlot, warn, warnOnce } from '../../_utils' import { backTopLight } from '../styles' import renderBackTopIcon from './BackTopIcon' import style from './styles/index.cssr' export const backTopProps = { ...(useTheme.props as ThemeProps), show: { type: Boolean as PropType, default: undefined }, right: { type: [Number, String] as PropType, default: 40 }, bottom: { type: [Number, String] as PropType, default: 40 }, to: { type: [String, Object] as PropType, default: 'body' }, visibilityHeight: { type: Number, default: 180 }, listenTo: [String, Object, Function] as PropType< string | HTMLElement | Document | (() => HTMLElement | Document) >, 'onUpdate:show': { type: Function, default: () => {} }, // deprecated target: Function as PropType<() => HTMLElement>, onShow: Function as unknown as PropType<() => void>, onHide: Function as unknown as PropType<() => void> } as const export type BackTopProps = ExtractPublicPropTypes export default defineComponent({ name: 'BackTop', // make style applied to back-top button inheritAttrs: false, props: backTopProps, setup(props) { if (__DEV__) { watchEffect(() => { if (props.target !== undefined) { warnOnce( 'back-top', '`target` is deprecated, please use `listen-to` instead.' ) } if (props.onShow !== undefined) { warnOnce( 'back-top', '`on-show` is deprecated, please use `on-update:show` instead.' ) } if (props.onHide !== undefined) { warnOnce( 'back-top', '`on-hide` is deprecated, please use `on-update:show` instead.' ) } }) } const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props) const scrollTopRef = ref(null) const uncontrolledShowRef = ref(false) watchEffect(() => { const { value: scrollTop } = scrollTopRef if (scrollTop === null) { uncontrolledShowRef.value = false return } uncontrolledShowRef.value = scrollTop >= props.visibilityHeight }) const DomInfoReadyRef = ref(false) watch(uncontrolledShowRef, (value) => { if (DomInfoReadyRef.value) { props['onUpdate:show']?.(value) } }) const controlledShowRef = toRef(props, 'show') const mergedShowRef = useMergedState(controlledShowRef, uncontrolledShowRef) const transitionDisabledRef = ref(true) const placeholderRef = ref(null) const styleRef = computed( (): { right: string bottom: string } => { return { right: `calc(${formatLength(props.right)} + ${ lockHtmlScrollRightCompensationRef.value })`, bottom: formatLength(props.bottom) } } ) let scrollElement: HTMLElement | Document let scrollListenerRegistered: boolean // deprecated watch(mergedShowRef, (value) => { if (DomInfoReadyRef.value) { if (value) { props.onShow?.() } props.onHide?.() } }) const themeRef = useTheme( 'BackTop', '-back-top', style, backTopLight, props, mergedClsPrefixRef ) function init(): void { if (scrollListenerRegistered) return scrollListenerRegistered = true const scrollEl = props.target?.() || unwrapElement(props.listenTo) || getScrollParent(placeholderRef.value) if (!scrollEl) { if (__DEV__) { warn( 'back-top', 'Container of back-top element is not found. This could be a bug of naive-ui.' ) } return } scrollElement = scrollEl === document.documentElement ? document : scrollEl const { to } = props const target = typeof to === 'string' ? document.querySelector(to) : to if (__DEV__ && !target) { warn('back-top', 'Target is not found.') } scrollElement.addEventListener('scroll', handleScroll) handleScroll() } function handleClick(): void { ;(isDocument(scrollElement) ? document.documentElement : scrollElement ).scrollTo({ top: 0, behavior: 'smooth' }) } function handleScroll(): void { scrollTopRef.value = ( isDocument(scrollElement) ? document.documentElement : scrollElement ).scrollTop if (!DomInfoReadyRef.value) { void nextTick(() => { DomInfoReadyRef.value = true }) } } function handleAfterEnter(): void { transitionDisabledRef.value = false } onMounted(() => { init() transitionDisabledRef.value = mergedShowRef.value }) onBeforeUnmount(() => { if (scrollElement) { scrollElement.removeEventListener('scroll', handleScroll) } }) const cssVarsRef = computed(() => { const { self: { color, boxShadow, boxShadowHover, boxShadowPressed, iconColor, iconColorHover, iconColorPressed, width, height, iconSize, borderRadius, textColor }, common: { cubicBezierEaseInOut } } = themeRef.value return { '--n-bezier': cubicBezierEaseInOut, '--n-border-radius': borderRadius, '--n-height': height, '--n-width': width, '--n-box-shadow': boxShadow, '--n-box-shadow-hover': boxShadowHover, '--n-box-shadow-pressed': boxShadowPressed, '--n-color': color, '--n-icon-size': iconSize, '--n-icon-color': iconColor, '--n-icon-color-hover': iconColorHover, '--n-icon-color-pressed': iconColorPressed, '--n-text-color': textColor } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass('back-top', undefined, cssVarsRef, props) : undefined return { placeholderRef, style: styleRef, mergedShow: mergedShowRef, isMounted: useIsMounted(), scrollElement: ref(null), scrollTop: scrollTopRef, DomInfoReady: DomInfoReadyRef, transitionDisabled: transitionDisabledRef, mergedClsPrefix: mergedClsPrefixRef, handleAfterEnter, handleScroll, handleClick, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { const { mergedClsPrefix } = this return ( ) } }) ================================================ FILE: src/back-top/src/BackTopIcon.tsx ================================================ import { h } from 'vue' export default () => ( ) ================================================ FILE: src/back-top/src/styles/index.cssr.ts ================================================ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr' import { c, cB, cM } from '../../../_utils/cssr' // vars: // --n-bezier // --n-border-radius // --n-height // --n-width // --n-box-shadow // --n-box-shadow-hover // --n-box-shadow-pressed // --n-color // --n-icon-size // --n-icon-color // --n-icon-color-hover // --n-icon-color-pressed // --n-text-color export default cB('back-top', ` position: fixed; right: 40px; bottom: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--n-text-color); transition: color .3s var(--n-bezier), box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier); border-radius: var(--n-border-radius); height: var(--n-height); min-width: var(--n-width); box-shadow: var(--n-box-shadow); background-color: var(--n-color); `, [ fadeInScaleUpTransition(), cM('transition-disabled', { transition: 'none !important' }), cB('base-icon', ` font-size: var(--n-icon-size); color: var(--n-icon-color); transition: color .3s var(--n-bezier); `), c('svg', { pointerEvents: 'none' }), c('&:hover', { boxShadow: 'var(--n-box-shadow-hover)' }, [ cB('base-icon', { color: 'var(--n-icon-color-hover)' }) ]), c('&:active', { boxShadow: 'var(--n-box-shadow-pressed)' }, [ cB('base-icon', { color: 'var(--n-icon-color-pressed)' }) ]) ]) ================================================ FILE: src/back-top/styles/_common.ts ================================================ export default { width: '44px', height: '44px', borderRadius: '22px', iconSize: '26px' } ================================================ FILE: src/back-top/styles/dark.ts ================================================ import type { BackTopTheme } from './light' import { commonDark } from '../../_styles/common' import commonVariables from './_common' const backTopDark: BackTopTheme = { name: 'BackTop', common: commonDark, self(vars) { const { popoverColor, textColor2, primaryColorHover, primaryColorPressed } = vars return { ...commonVariables, color: popoverColor, textColor: textColor2, iconColor: textColor2, iconColorHover: primaryColorHover, iconColorPressed: primaryColorPressed, boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)', boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)', boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)' } } } export default backTopDark ================================================ FILE: src/back-top/styles/index.ts ================================================ export { default as backTopDark } from './dark' export { default as backTopLight } from './light' export type { BackTopTheme, BackTopThemeVars } from './light' ================================================ FILE: src/back-top/styles/light.ts ================================================ import type { Theme } from '../../_mixins' import type { ThemeCommonVars } from '../../_styles/common' import { commonLight } from '../../_styles/common' import commonVariables from './_common' function self(vars: ThemeCommonVars) { const { popoverColor, textColor2, primaryColorHover, primaryColorPressed } = vars return { ...commonVariables, color: popoverColor, textColor: textColor2, iconColor: textColor2, iconColorHover: primaryColorHover, iconColorPressed: primaryColorPressed, boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)', boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)', boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)' } } export type BackTopThemeVars = ReturnType const backTopLight: Theme<'BackTop', BackTopThemeVars> = { name: 'BackTop', common: commonLight, self } export default backTopLight export type BackTopTheme = typeof backTopLight ================================================ FILE: src/back-top/tests/BackTop.spec.ts ================================================ import { mount } from '@vue/test-utils' import { NBackTop } from '../index' describe('n-back-top', () => { it('should work with import on demand', () => { mount(NBackTop, { attachTo: document.body }) }) it('should work with `show` prop', async () => { document.body.innerHTML = `${document.body.innerHTML}
` const wrapper = mount(NBackTop, { attachTo: document.getElementById('test') ?? undefined, props: { show: true } }) wrapper.element.scrollTop = 1000 await wrapper.trigger('scroll') expect(wrapper.html()).toContain('teleport start') wrapper.unmount() }) }) ================================================ FILE: src/back-top/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NBackTop } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/badge/demos/enUS/basic.demo.vue ================================================ # Basic ================================================ FILE: src/badge/demos/enUS/color.demo.vue ================================================ # Customizing color ================================================ FILE: src/badge/demos/enUS/custom-content.demo.vue ================================================ # Customizing content Insert some custom content in it. ================================================ FILE: src/badge/demos/enUS/index.demo-entry.md ================================================ # Badge I bet you have seen it and know how it should be applied. ## Demos ```demo basic.vue type.vue processing.vue show-zero.vue overflow.vue manual.vue custom-content.vue color.vue raw.vue offset.vue ``` ## API ### Badge Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | color | `string` | `undefined` | Badge color. | | | dot | `boolean` | `false` | Show badge as dot. | | | max | `number` | `undefined` | The maximum number of the badge when its value overflows. | | | offset | `[string \| number, string \| number]` | `undefined` | Offset of the badge from the left and top of the default position. | 2.34.3 | | processing | `boolean` | `false` | Show processing status. | | | show-zero | `boolean` | `false` | Whether to display the badge, even if provided value equals 0. | | | show | `boolean` | `true` | Whether the badge should be shown altogether. | | | type | `'default' \| 'success' \| 'error' \| 'warning' \| 'info'` | `'default'` | Type of the badge. | | | value | `string \| number` | `undefined` | Badge's value. | | ### Badge Slots | Name | Parameters | Description | | ------- | ---------- | ---------------- | | default | `()` | Badge's content. | ================================================ FILE: src/badge/demos/enUS/manual.demo.vue ================================================ # Controlled visibility ================================================ FILE: src/badge/demos/enUS/offset.demo.vue ================================================ # Offset ================================================ FILE: src/badge/demos/enUS/overflow.demo.vue ================================================ # Overflow Set `max` prop to handle overflow situation. ================================================ FILE: src/badge/demos/enUS/processing.demo.vue ================================================ # Processing Set `processing` prop to indicate it is processing. ================================================ FILE: src/badge/demos/enUS/raw.demo.vue ================================================ # Raw ================================================ FILE: src/badge/demos/enUS/show-zero.demo.vue ================================================ # Show zero Set `show-zero` prop to display zero. ================================================ FILE: src/badge/demos/enUS/type.demo.vue ================================================ # Type Badge has `default`, `error`, `info`, `success`, `warning` types. ================================================ FILE: src/badge/demos/zhCN/basic.demo.vue ================================================ # 基础用法 ================================================ FILE: src/badge/demos/zhCN/color.demo.vue ================================================ # 自定义颜色 ================================================ FILE: src/badge/demos/zhCN/custom-content.demo.vue ================================================ # 自定义内容 在里面插入一些自定义内容。 ================================================ FILE: src/badge/demos/zhCN/index.demo-entry.md ================================================ # 标记 Badge 我敢说你肯定见过这玩意而且知道怎么用它。 ## 演示 ```demo basic.vue type.vue processing.vue show-zero.vue overflow.vue manual.vue custom-content.vue color.vue raw.vue rtl-debug.vue offset.vue ``` ## API ### Badge Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | color | `string` | `undefined` | 标记的颜色 | | | dot | `boolean` | `false` | 标记是否显示为点 | | | max | `number` | `undefined` | 标记最大数来处理溢出情况 | | | offset | `[string \| number, string \| number]` | `undefined` | 距默认位置左侧、上方的偏移量 | 2.34.3 | | processing | `boolean` | `false` | 标记显示进度 | | | show-zero | `boolean` | `false` | 标记为 0 时是否显示 | | | show | `boolean` | `true` | 标记受控显示 | | | type | `'default' \| 'success' \| 'error' \| 'warning' \| 'info'` | `'default'` | 标记显示类型 | | | value | `string \| number` | `undefined` | 标记数量 | | ### Badge Slots | 名称 | 参数 | 说明 | | ------- | ---- | ---------------- | | default | `()` | 标记内填充的内容 | ================================================ FILE: src/badge/demos/zhCN/manual.demo.vue ================================================ # 受控显示 ================================================ FILE: src/badge/demos/zhCN/offset.demo.vue ================================================ # 自定义位置偏移 ================================================ FILE: src/badge/demos/zhCN/overflow.demo.vue ================================================ # 溢出 设定 `max` 来处理溢出情况。 ================================================ FILE: src/badge/demos/zhCN/processing.demo.vue ================================================ # 处理中 设定 `processing` 来表明正在处理。 ================================================ FILE: src/badge/demos/zhCN/raw.demo.vue ================================================ # 直接使用 ================================================ FILE: src/badge/demos/zhCN/rtl-debug.demo.vue ================================================ # Rtl Debug ================================================ FILE: src/badge/demos/zhCN/show-zero.demo.vue ================================================ # 显示 0 设定 `show-zero` 来显示 0。 ================================================ FILE: src/badge/demos/zhCN/type.demo.vue ================================================ # 类型 标记有 `default`、`error`、`info`、`success`、`warning` 类型。 ================================================ FILE: src/badge/index.ts ================================================ export { badgeProps, default as NBadge } from './src/Badge' export type { BadgeProps } from './src/Badge' ================================================ FILE: src/badge/src/Badge.tsx ================================================ import type { CSSProperties, PropType } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes } from '../../_utils' import type { BadgeTheme } from '../styles' import { computed, defineComponent, h, onMounted, ref, Transition } from 'vue' import { NBaseSlotMachine, NBaseWave } from '../../_internal' import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { useRtl } from '../../_mixins/use-rtl' import { color2Class, createKey, getTitleAttribute, isSlotEmpty, resolveSlot } from '../../_utils' import { badgeLight } from '../styles' import style from './styles/index.cssr' export const badgeProps = { ...(useTheme.props as ThemeProps), value: [String, Number] as PropType, max: Number, dot: Boolean, type: { type: String as PropType< 'success' | 'error' | 'warning' | 'info' | 'default' >, default: 'default' }, show: { type: Boolean, default: true }, showZero: Boolean, processing: Boolean, color: String, offset: Array as unknown as PropType< readonly [number | string, number | string] > } as const export type BadgeProps = ExtractPublicPropTypes export default defineComponent({ name: 'Badge', props: badgeProps, setup(props, { slots }) { const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props) const themeRef = useTheme( 'Badge', '-badge', style, badgeLight, props, mergedClsPrefixRef ) const appearedRef = ref(false) const handleAfterEnter = (): void => { appearedRef.value = true } const handleAfterLeave = (): void => { appearedRef.value = false } const showBadgeRef = computed(() => { return ( props.show && (props.dot || (props.value !== undefined && !(!props.showZero && Number(props.value) <= 0)) || !isSlotEmpty(slots.value)) ) }) onMounted(() => { if (showBadgeRef.value) appearedRef.value = true }) const rtlEnabledRef = useRtl('Badge', mergedRtlRef, mergedClsPrefixRef) const cssVarsRef = computed(() => { const { type, color: propColor } = props const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [createKey('color', type)]: color, fontFamily, fontSize } } = themeRef.value return { '--n-font-size': fontSize, '--n-font-family': fontFamily, '--n-color': propColor || color, '--n-ripple-color': propColor || color, '--n-bezier': cubicBezierEaseInOut, '--n-ripple-bezier': cubicBezierEaseOut } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( 'badge', computed(() => { let hash = '' const { type, color } = props if (type) { hash += type[0] } if (color) { hash += color2Class(color) } return hash }), cssVarsRef, props ) : undefined const offsetStyleRef = computed(() => { const { offset } = props if (!offset) return undefined const [x, y] = offset const reslovedOffsetX = typeof x === 'number' ? `${x}px` : x const reslovedOffsetY = typeof y === 'number' ? `${y}px` : y return { transform: `translate(calc(${ rtlEnabledRef?.value ? '50%' : '-50%' } + ${reslovedOffsetX}), ${reslovedOffsetY})` } }) return { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, appeared: appearedRef, showBadge: showBadgeRef, handleAfterEnter, handleAfterLeave, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender, offsetStyle: offsetStyleRef } }, render() { const { mergedClsPrefix, onRender, themeClass, $slots } = this onRender?.() const children = $slots.default?.() return (
{children} {{ default: () => this.showBadge ? ( {resolveSlot($slots.value, () => [ !this.dot ? ( ) : null ])} {this.processing ? ( ) : null} ) : null }}
) } }) ================================================ FILE: src/badge/src/styles/index.cssr.ts ================================================ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr' import { c, cB, cM } from '../../../_utils/cssr' // vars: // --n-color // --n-ripple-color // --n-bezier // --n-ripple-bezier // --n-font-size // --n-font-family export default c([ c('@keyframes badge-wave-spread', { from: { boxShadow: '0 0 0.5px 0px var(--n-ripple-color)', opacity: 0.6 }, to: { // don't use exact 5px since chrome will display the animation with glitches boxShadow: '0 0 0.5px 4.5px var(--n-ripple-color)', opacity: 0 } }), cB('badge', ` display: inline-flex; position: relative; vertical-align: middle; font-family: var(--n-font-family); `, [ cM('as-is', [ cB('badge-sup', { position: 'static', transform: 'translateX(0)' }, [ fadeInScaleUpTransition({ transformOrigin: 'left bottom', originalTransform: 'translateX(0)' }) ]) ]), cM('dot', [ cB('badge-sup', ` height: 8px; width: 8px; padding: 0; min-width: 8px; left: 100%; bottom: calc(100% - 4px); `, [ c('::before', 'border-radius: 4px;') ]) ]), cB('badge-sup', ` background: var(--n-color); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); color: #FFF; position: absolute; height: 18px; line-height: 18px; border-radius: 9px; padding: 0 6px; text-align: center; font-size: var(--n-font-size); transform: translateX(-50%); left: 100%; bottom: calc(100% - 9px); font-variant-numeric: tabular-nums; z-index: 2; display: flex; align-items: center; `, [ fadeInScaleUpTransition({ transformOrigin: 'left bottom', originalTransform: 'translateX(-50%)' }), cB('base-wave', { zIndex: 1, animationDuration: '2s', animationIterationCount: 'infinite', animationDelay: '1s', animationTimingFunction: 'var(--n-ripple-bezier)', animationName: 'badge-wave-spread' }), c('&::before', ` opacity: 0; transform: scale(1); border-radius: 9px; content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; `) ]) ]) ]) ================================================ FILE: src/badge/src/styles/rtl.cssr.ts ================================================ import { cB, cM } from '../../../_utils/cssr' export default cB('badge', [ cM('rtl', ` direction: rtl; `, [ cB('badge-sup', ` right: 100%; left: unset; transform: translateX(50%); direction: initial; `) ]) ]) ================================================ FILE: src/badge/styles/dark.ts ================================================ import type { BadgeTheme } from './light' import { commonDark } from '../../_styles/common' const badgeDark: BadgeTheme = { name: 'Badge', common: commonDark, self(vars) { const { errorColorSuppl, infoColorSuppl, successColorSuppl, warningColorSuppl, fontFamily } = vars return { color: errorColorSuppl, colorInfo: infoColorSuppl, colorSuccess: successColorSuppl, colorError: errorColorSuppl, colorWarning: warningColorSuppl, fontSize: '12px', fontFamily } } } export default badgeDark ================================================ FILE: src/badge/styles/index.ts ================================================ export { default as badgeDark } from './dark' export { default as badgeLight } from './light' export type { BadgeTheme, BadgeThemeVars } from './light' export { badgeRtl } from './rtl' ================================================ FILE: src/badge/styles/light.ts ================================================ import type { Theme } from '../../_mixins' import type { ThemeCommonVars } from '../../_styles/common' import { commonLight } from '../../_styles/common' function self(vars: ThemeCommonVars) { const { errorColor, infoColor, successColor, warningColor, fontFamily } = vars return { color: errorColor, colorInfo: infoColor, colorSuccess: successColor, colorError: errorColor, colorWarning: warningColor, fontSize: '12px', fontFamily } } export type BadgeThemeVars = ReturnType const badgeLight: Theme<'Badge', BadgeThemeVars> = { name: 'Badge', common: commonLight, self } export default badgeLight export type BadgeTheme = typeof badgeLight ================================================ FILE: src/badge/styles/rtl.ts ================================================ import type { RtlItem } from '../../config-provider/src/internal-interface' import rtlStyle from '../src/styles/rtl.cssr' export const badgeRtl: RtlItem = { name: 'Badge', style: rtlStyle } ================================================ FILE: src/badge/tests/Badge.spec.ts ================================================ import { mount } from '@vue/test-utils' import { NBadge } from '../index' describe('n-badge', () => { it('should work with import on demand', () => { mount(NBadge) }) it('should work with `dot` prop', async () => { const wrapper = mount(NBadge, { props: { value: 5 } }) expect(wrapper.find('.n-badge').classes('n-badge--dot')).not.toBe(true) expect(wrapper.find('.n-base-slot-machine').exists()).toBe(true) await wrapper.setProps({ dot: true }) expect(wrapper.find('.n-badge').classes('n-badge--dot')).toBe(true) expect(wrapper.find('.n-base-slot-machine').exists()).not.toBe(true) wrapper.unmount() }) it('should work with `color` prop', async () => { const wrapper = mount(NBadge, { props: { value: 5, color: 'grey' } }) expect(wrapper.find('.n-badge').attributes('style')).toContain( '--n-color: grey;' ) wrapper.unmount() }) it('should work with `max` prop', async () => { const wrapper = mount(NBadge, { props: { value: 5, max: 5 } }) expect( wrapper .find('.n-base-slot-machine-current-number__inner--not-number') .exists() ).not.toBe(true) await wrapper.setProps({ value: 6 }) expect( wrapper .find('.n-base-slot-machine-current-number__inner--not-number') .exists() ).toBe(true) wrapper.unmount() }) it('should work with `processing` prop', async () => { const wrapper = mount(NBadge, { props: { value: 5 } }) expect(wrapper.find('.n-base-wave').exists()).not.toBe(true) await wrapper.setProps({ processing: true }) expect(wrapper.find('.n-base-wave').exists()).toBe(true) wrapper.unmount() }) it('should work with `show-zero` prop', async () => { const wrapper = mount(NBadge, { props: { value: 0 } }) expect(wrapper.find('.n-badge-sup').exists()).not.toBe(true) await wrapper.setProps({ showZero: true }) expect(wrapper.find('.n-badge-sup').exists()).toBe(true) wrapper.unmount() }) it('should work with `show` prop', async () => { const wrapper = mount(NBadge, { props: { value: 7 } }) expect(wrapper.find('.n-badge-sup').exists()).toBe(true) await wrapper.setProps({ show: false }) expect(wrapper.find('.n-badge-sup').exists()).not.toBe(true) wrapper.unmount() }) it('should work with `type` prop', () => { const data = [ { type: 'default', color: '#d03050' }, { type: 'error', color: '#d03050' }, { type: 'info', color: '#2080f0' }, { type: 'success', color: '#18a058' }, { type: 'warning', color: '#f0a020' } ] as const data.forEach((item) => { const wrapper = mount(NBadge, { props: { type: item.type, value: 5 } }) expect(wrapper.find('.n-badge').attributes('style')).toContain(item.color) wrapper.unmount() }) }) }) ================================================ FILE: src/badge/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NBadge } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/breadcrumb/demos/enUS/basic.demo.vue ================================================ # Basic ================================================ FILE: src/breadcrumb/demos/enUS/custom.demo.vue ================================================ # Dropdown It is possible to pass a custom template when you want to customize the item link to be, for example a `dropdown` or a `router-link`. ================================================ FILE: src/breadcrumb/demos/enUS/index.demo-entry.md ================================================ # Breadcrumb It doesn't look like what it calls. ## Demos ```demo basic.vue custom.vue separator.vue separator-per-item.vue ``` ## API ### Breadcrumb Props | Name | Type | Default | Description | | --------- | -------- | ------- | --------------------- | | separator | `string` | `'/'` | Breadcrumb separator. | ### BreadcrumbItem Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | clickable | `boolean` | `true` | Whether it's clickable. | 2.30.0 | | href | `string` | `undefined` | BreadcrumbItem link. | | | separator | `string` | `undefined` | BreadcrumbItem separator. | | | show-separator | `boolean` | `true` | Whether to show the separator. | 2.44.0 | ### Breadcrumb Slots | Name | Parameters | Description | | ------- | ---------- | ------------------------ | | default | `()` | Breadcrumb default slot. | ### Breadcrumb Item Slots | Name | Parameters | Description | | --------- | ---------- | ------------------------------ | | default | `()` | BreadcrumbItem default slot. | | separator | `()` | BreadcrumbItem separator slot. | ================================================ FILE: src/breadcrumb/demos/enUS/separator-per-item.demo.vue ================================================ # Custom separator by item Use separator prop or separator slot to custom separator of an item. When both are present, separator slot will be used. ================================================ FILE: src/breadcrumb/demos/enUS/separator.demo.vue ================================================ # Customize separator Use separator prop to custom separator. ================================================ FILE: src/breadcrumb/demos/zhCN/basic.demo.vue ================================================ # 基础用法 ================================================ FILE: src/breadcrumb/demos/zhCN/custom.demo.vue ================================================ # 下拉菜单 和下拉菜单一起使用。 ================================================ FILE: src/breadcrumb/demos/zhCN/index.demo-entry.md ================================================ # 面包屑 Breadcrumb 这东西长得和它名字不怎么像。 ## 演示 ```demo basic.vue custom.vue separator.vue separator-per-item.vue ``` ## API ### Breadcrumb Props | 名称 | 类型 | 默认值 | 说明 | | --------- | -------- | ------ | ------------------ | | separator | `string` | `'/'` | 面包屑之间的分隔符 | ### BreadcrumbItem Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | -------------- | --------- | ----------- | ---------------------- | ------ | | clickable | `boolean` | `true` | 是否可点击 | 2.30.0 | | href | `string` | `undefined` | 链接地址 | | | separator | `string` | `'/'` | 面包屑子项之间的分隔符 | 2.44.0 | | show-separator | `boolean` | `true` | 是否显示分隔符 | | ### Breadcrumb Slots | 名称 | 参数 | 说明 | | ------- | ---- | ------------------------- | | default | `()` | Breadcrumb 默认填充的内容 | ### Breadcrumb Item Slots | 名称 | 参数 | 说明 | | --------- | ---- | ----------------------------- | | default | `()` | BreadcrumbItem 默认填充的内容 | | separator | `()` | 分隔符填充的内容 | ================================================ FILE: src/breadcrumb/demos/zhCN/separator-per-item.demo.vue ================================================ # 自定义每项分隔符 使用 separator prop 或 separator slot 自定义每一项的分隔符。如果二者均提供，将优先使用 separator slot。 ================================================ FILE: src/breadcrumb/demos/zhCN/separator.demo.vue ================================================ # 自定义分隔符 使用 separator prop 自定义分隔符。 ================================================ FILE: src/breadcrumb/index.ts ================================================ export { breadcrumbProps, default as NBreadcrumb } from './src/Breadcrumb' export type { BreadcrumbProps } from './src/Breadcrumb' export { breadcrumbItemProps, default as NBreadcrumbItem } from './src/BreadcrumbItem' export type { BreadcrumbItemProps, BreadcrumbItemSlots } from './src/BreadcrumbItem' ================================================ FILE: src/breadcrumb/src/Breadcrumb.tsx ================================================ import type { CSSProperties, Ref } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes } from '../../_utils' import type { BreadcrumbTheme } from '../styles' import { computed, defineComponent, h, provide, toRef } from 'vue' import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { createInjectionKey } from '../../_utils' import { breadcrumbLight } from '../styles' import style from './styles/index.cssr' export interface BreadcrumbInjection { separatorRef: Ref mergedClsPrefixRef: Ref } export const breadcrumbInjectionKey = createInjectionKey('n-breadcrumb') export const breadcrumbProps = { ...(useTheme.props as ThemeProps), separator: { type: String, default: '/' } } as const export type BreadcrumbProps = ExtractPublicPropTypes export default defineComponent({ name: 'Breadcrumb', props: breadcrumbProps, setup(props) { const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props) const themeRef = useTheme( 'Breadcrumb', '-breadcrumb', style, breadcrumbLight, props, mergedClsPrefixRef ) provide(breadcrumbInjectionKey, { separatorRef: toRef(props, 'separator'), mergedClsPrefixRef }) const cssVarsRef = computed(() => { const { common: { cubicBezierEaseInOut }, self: { separatorColor, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, fontSize, fontWeightActive, itemBorderRadius, itemColorHover, itemColorPressed, itemLineHeight } } = themeRef.value return { '--n-font-size': fontSize, '--n-bezier': cubicBezierEaseInOut, '--n-item-text-color': itemTextColor, '--n-item-text-color-hover': itemTextColorHover, '--n-item-text-color-pressed': itemTextColorPressed, '--n-item-text-color-active': itemTextColorActive, '--n-separator-color': separatorColor, '--n-item-color-hover': itemColorHover, '--n-item-color-pressed': itemColorPressed, '--n-item-border-radius': itemBorderRadius, '--n-font-weight-active': fontWeightActive, '--n-item-line-height': itemLineHeight } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass('breadcrumb', undefined, cssVarsRef, props) : undefined return { mergedClsPrefix: mergedClsPrefixRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { this.onRender?.() return ( ) } }) ================================================ FILE: src/breadcrumb/src/BreadcrumbItem.tsx ================================================ import type { ExtractPropTypes, PropType, SlotsType, VNode } from 'vue' import { computed, defineComponent, h, inject } from 'vue' import { resolveSlot, warn } from '../../_utils' import { useBrowserLocation } from '../../_utils/composable/use-browser-location' import { breadcrumbInjectionKey } from './Breadcrumb' export const breadcrumbItemProps = { separator: String, href: String, clickable: { type: Boolean, default: true }, showSeparator: { type: Boolean, default: true }, onClick: Function as PropType<(e: MouseEvent) => void> } as const export type BreadcrumbItemProps = Partial< ExtractPropTypes > export interface BreadcrumbItemSlots { default?: () => VNode[] separator?: () => VNode[] } export default defineComponent({ name: 'BreadcrumbItem', props: breadcrumbItemProps, slots: Object as SlotsType, setup(props, { slots }) { const NBreadcrumb = inject(breadcrumbInjectionKey, null) if (!NBreadcrumb) { if (__DEV__) { warn( 'breadcrumb', '`n-breadcrumb-item` must be placed inside `n-breadcrumb`.' ) } return () => null } const { separatorRef, mergedClsPrefixRef } = NBreadcrumb const browserLocationRef = useBrowserLocation() const htmlTagRef = computed(() => (props.href ? 'a' : 'span')) const ariaCurrentRef = computed(() => browserLocationRef.value.href === props.href ? 'location' : null ) return () => { const { value: mergedClsPrefix } = mergedClsPrefixRef return (
  • {h( htmlTagRef.value, { class: `${mergedClsPrefix}-breadcrumb-item__link`, 'aria-current': ariaCurrentRef.value, href: props.href, onClick: props.onClick }, slots )} {props.showSeparator && ( )}
    • ) } } }) ================================================ FILE: src/breadcrumb/src/styles/index.cssr.ts ================================================ import { c, cB, cE, cM } from '../../../_utils/cssr' // vars: // --n-font-size // --n-bezier // --n-item-text-color // --n-item-text-color-hover // --n-item-text-color-pressed // --n-item-text-color-active // --n-separator-color // --n-font-weight-active // --n-item-border-radius // --n-item-color-hover // --n-item-color-active // --n-item-line-height export default cB('breadcrumb', ` white-space: nowrap; cursor: default; line-height: var(--n-item-line-height); `, [ c('ul', ` list-style: none; padding: 0; margin: 0; `), c('a', ` color: inherit; text-decoration: inherit; `), cB('breadcrumb-item', ` font-size: var(--n-font-size); transition: color .3s var(--n-bezier); display: inline-flex; align-items: center; `, [ cB('icon', ` font-size: 18px; vertical-align: -.2em; transition: color .3s var(--n-bezier); color: var(--n-item-text-color); `), c('&:not(:last-child)', [ cM('clickable', [ cE('link', ` cursor: pointer; `, [ c('&:hover', ` background-color: var(--n-item-color-hover); `), c('&:active', ` background-color: var(--n-item-color-pressed); `) ]) ]) ]), cE('link', ` padding: 4px; border-radius: var(--n-item-border-radius); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); color: var(--n-item-text-color); position: relative; `, [ c('&:hover', ` color: var(--n-item-text-color-hover); `, [ cB('icon', ` color: var(--n-item-text-color-hover); `) ]), c('&:active', ` color: var(--n-item-text-color-pressed); `, [ cB('icon', ` color: var(--n-item-text-color-pressed); `) ]) ]), cE('separator', ` margin: 0 8px; color: var(--n-separator-color); transition: color .3s var(--n-bezier); user-select: none; -webkit-user-select: none; `), c('&:last-child', [ cE('link', ` font-weight: var(--n-font-weight-active); cursor: unset; color: var(--n-item-text-color-active); `, [ cB('icon', ` color: var(--n-item-text-color-active); `) ]), cE('separator', ` display: none; `) ]) ]) ]) ================================================ FILE: src/breadcrumb/styles/_common.ts ================================================ export default { fontWeightActive: '400' } ================================================ FILE: src/breadcrumb/styles/dark.ts ================================================ import type { BreadcrumbTheme } from './light' import { commonDark } from '../../_styles/common' import { self } from './light' const breadcrumbDark: BreadcrumbTheme = { name: 'Breadcrumb', common: commonDark, self } export default breadcrumbDark ================================================ FILE: src/breadcrumb/styles/index.ts ================================================ export { default as breadcrumbDark } from './dark' export { default as breadcrumbLight } from './light' export type { BreadcrumbTheme, BreadcrumbThemeVars } from './light' ================================================ FILE: src/breadcrumb/styles/light.ts ================================================ import type { Theme } from '../../_mixins' import type { ThemeCommonVars } from '../../_styles/common' import { commonLight } from '../../_styles/common' import commonVariables from './_common' export function self(vars: ThemeCommonVars) { const { fontSize, textColor3, textColor2, borderRadius, buttonColor2Hover, buttonColor2Pressed } = vars return { ...commonVariables, fontSize, itemLineHeight: '1.25', itemTextColor: textColor3, itemTextColorHover: textColor2, itemTextColorPressed: textColor2, itemTextColorActive: textColor2, itemBorderRadius: borderRadius, itemColorHover: buttonColor2Hover, itemColorPressed: buttonColor2Pressed, separatorColor: textColor3 } } export type BreadcrumbThemeVars = ReturnType const breadcrumbLight: Theme<'Breadcrumb', BreadcrumbThemeVars> = { name: 'Breadcrumb', common: commonLight, self } export default breadcrumbLight export type BreadcrumbTheme = typeof breadcrumbLight ================================================ FILE: src/breadcrumb/tests/Breadcrumb.spec.ts ================================================ import { mount } from '@vue/test-utils' import { h, ref } from 'vue' import * as useBrowserLocationModule from '../../_utils/composable/use-browser-location' import { NBreadcrumb, NBreadcrumbItem } from '../index' describe('n-breadcrumb', () => { it('should work with import on demand', () => { mount(NBreadcrumb) }) it('should raise an error if breadcrumbItem is not inside a BreadCrumb', () => { const mockErrorLogger = vi .spyOn(console, 'error') .mockImplementation(() => {}) const wrapper = mount(NBreadcrumbItem) expect(wrapper.isVisible()).toBe(false) expect(mockErrorLogger).toHaveBeenCalledWith( '[naive/breadcrumb]: `n-breadcrumb-item` must be placed inside `n-breadcrumb`.' ) wrapper.unmount() }) it('should work with Breadcrumb, BreadcrumbItem slots', async () => { const wrapper = mount(NBreadcrumb, { slots: { default: () => [ h(NBreadcrumbItem, null, { default: () => 'test-item1' }), h(NBreadcrumbItem, null, { default: () => 'test-item2' }) ] } }) expect(wrapper.find('ul').element.children.length).toBe(2) expect( wrapper.find('ul').element.children[0].getAttribute('class') ).toContain('n-breadcrumb-item') const itemList = wrapper.findAll('.n-breadcrumb-item__link') expect(itemList[0].text()).toBe('test-item1') expect(itemList[1].text()).toBe('test-item2') wrapper.unmount() }) it('should work with Breadcrumb\'s `separator` prop', async () => { const wrapper = mount(NBreadcrumb, { props: { separator: '@' }, slots: { default: () => [ h(NBreadcrumbItem, null, { default: () => 'test-item1' }), h(NBreadcrumbItem, null, { default: () => 'test-item2' }) ] } }) expect( wrapper .findAll('.n-breadcrumb-item__separator') .every(i => i.text() === '@') ).toBe(true) wrapper.unmount() }) it('should work with BreadcrumbItem\'s `separator` prop', async () => { const wrapper = mount(NBreadcrumb, { slots: { default: () => [ h( NBreadcrumbItem, { separator: '@' }, { default: () => 'test-item1' } ), h(NBreadcrumbItem, null, { default: () => 'test-item2' }) ] } }) expect(wrapper.findAll('.n-breadcrumb-item__separator')[0].text()).toBe('@') expect(wrapper.findAll('.n-breadcrumb-item__separator')[1].text()).toBe('/') wrapper.unmount() }) it('should be possible to pass `href` props to NBreadcrumbItem', () => { const wrapper = mount(NBreadcrumb, { slots: { default: () => [ h(NBreadcrumbItem, null, { default: () => 'Home' }), h(NBreadcrumbItem, { href: '/path1' }, { default: () => 'Path1' }) ] } }) const firstBreadcrumbItem = wrapper.find('span.n-breadcrumb-item__link') const secondBreadcrumbItem = wrapper.find('a.n-breadcrumb-item__link') expect(firstBreadcrumbItem.exists()).toBe(true) expect(firstBreadcrumbItem.text()).toMatch('Home') expect(secondBreadcrumbItem.exists()).toBe(true) expect(secondBreadcrumbItem.attributes('href')).toMatch('/path1') wrapper.unmount() }) describe('accessibility', () => { it('should labelled the landmark region', () => { const wrapper = mount(NBreadcrumb) expect(wrapper.find('.n-breadcrumb').attributes('aria-label')).toBe( 'Breadcrumb' ) wrapper.unmount() }) it('should add `aria-current` if the item is the current location', () => { const url = 'http://some-domain/path1' const currentUrl = 'http://some-domain/path2' // https://github.com/jsdom/jsdom/issues/3492 // https://jestjs.io/blog#known-issues vi.spyOn( useBrowserLocationModule, 'useBrowserLocation' ).mockImplementation(() => ref({ href: currentUrl })) const wrapper = mount(NBreadcrumb, { slots: { default: () => [ h(NBreadcrumbItem, { default: () => 'Home' }), h( NBreadcrumbItem, { href: url }, { default: () => 'Path1' } ), h( NBreadcrumbItem, { href: currentUrl }, { default: () => 'Path2' } ) ] } }) expect( wrapper.find('span.n-breadcrumb-item__link').attributes('aria-current') ).toBeUndefined() expect( wrapper .find(`a.n-breadcrumb-item__link[href="${url}"]`) .attributes('aria-current') ).toBeUndefined() expect( wrapper .find(`a.n-breadcrumb-item__link[href="${currentUrl}"]`) .attributes('aria-current') ).toBe('location') wrapper.unmount() }) it('should add `aria-hidden` to the separator', () => { const wrapper = mount(NBreadcrumb, { slots: { default: () => [ h(NBreadcrumbItem, { default: () => 'Home' }), h( NBreadcrumbItem, { href: '/path1', isCurrent: true }, { default: () => 'Path1' } ) ] } }) expect( wrapper.find('.n-breadcrumb-item__separator').attributes('aria-hidden') ).toBe('true') wrapper.unmount() }) }) }) ================================================ FILE: src/breadcrumb/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NBreadcrumb } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/button/demos/enUS/basic.demo.vue ================================================ # Basic There are `default`, `primary`, `tertiary`, `info`, `success`, `warning` and `error` button types. ================================================ FILE: src/button/demos/enUS/color.demo.vue ================================================ # Custom color These two colors look like a toadstool. ================================================ FILE: src/button/demos/enUS/dashed.demo.vue ================================================ # Dashed Use `dashed` to show a dashed button. ================================================ FILE: src/button/demos/enUS/disabled.demo.vue ================================================ # Disabled Buttons can be disabled. ================================================ FILE: src/button/demos/enUS/events.demo.vue ================================================ # Events Handle events of buttons. ================================================ FILE: src/button/demos/enUS/ghost.demo.vue ================================================ # Ghost Ghost buttons have transparent backgrounds. ================================================ FILE: src/button/demos/enUS/group.demo.vue ================================================ # Button group Buttons can be grouped. ================================================ FILE: src/button/demos/enUS/icon-button.demo.vue ================================================ # Use icons as buttons Sometimes you may want to use an icon as a button and customize its size. You can use the `text` prop and `font-size` style to set it. ================================================ FILE: src/button/demos/enUS/icon.demo.vue ================================================ # Icon Icons can be used in buttons. You can use `render-icon` prop or `icon` slot. ================================================ FILE: src/button/demos/enUS/index.demo-entry.md ================================================ # Button Button is used to trigger some actions. ## Demos ```demo basic.vue secondary.vue tertiary.vue quaternary.vue dashed.vue size.vue text.vue tag.vue disabled.vue icon.vue events.vue shape.vue ghost.vue loading.vue color.vue group.vue icon-button.vue popover.vue ``` ## API ### Button Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | attr-type | `'button' \| 'submit' \| 'reset'` | `'button'` | The `type` attribute of the button's DOM. | | | block | `boolean` | `false` | Whether the button is displayed as block. | | | bordered | `boolean` | `true` | Whether the button shows the border. | | | circle | `boolean` | `false` | Whether the button is round. | | | color | `string` | `undefined` | Button color (support `#FFF`, `#FFFFFF`, `yellow`,`rgb(0, 0, 0)` formatted colors). | | | dashed | `boolean` | `false` | Whether the button's border is a dashed line. | | | disabled | `boolean` | `false` | Whether the button is disabled. | | | focusable | `boolean` | `true` | Whether the button is focusable. | | | ghost | `boolean` | `false` | Whether the button is ghost. | | | native-focus-behavior | `boolean` | Browser is not Safari | Whether to follow button's native focus behavior. Since safari's button can't be focused by click, naive-ui uses some tricks to make it focusable on safari. If you don't need the behavior or need the button to be draggable, you can enable the prop. | 2.28.3 | | icon-placement | `'left' \| 'right'` | `'left'` | The position of the icon in the button. | | | keyboard | `boolean` | `true` | Whether is supports keyboard operation. | | | quaternary | `boolean` | `false` | Whether the button is quaternary button. | | | loading | `boolean` | `false` | Whether the button shows the loading status. | | | spin-props | `{ strokeWidth?: number, stroke?: string, scale?: number, radius?: number }` | `undefined` | Loading icon properties. | 2.44.0 | | render-icon | `() => VNodeChild` | `undefined` | Render function that renders button icon. | 2.34.0 | | round | `boolean` | `false` | Whether the button shows rounded corners. | | | secondary | `boolean` | `false` | Whether the button is secondary button. | | | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Button size. | | | strong | `boolean` | `false` | Whether to use strong text in the button. | | | tertiary | `boolean` | `false` | Whether the button is tertiary button. | | | text | `boolean` | `false` | Whether to display as a text button. | | | text-color | `string` | `undefined` | Button text color (support `#FFF`, `#FFFFFF`, `yellow`,`rgb(0, 0, 0)` formatted colors). | | | type | `'default' \| 'tertiary' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Button type. | | | tag | `string` | `'button'` | What tag need the button be rendered as. | | ### ButtonGroup Props | Name | Type | Default | Description | | --- | --- | --- | --- | | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `undefined` | The buttons' size in button group. If set, the button's size prop inner group won't work. | | vertical | `boolean` | `false` | Directions of buttons in the group. | ### Button Slots | Name | Parameters | Description | | ------- | ---------- | ---------------------------------- | | default | `()` | The default content of the button. | | icon | `()` | The icon of the button. | ### ButtonGroup Slots | Name | Parameters | Description | | ------- | ---------- | -------------------------------------- | | default | `()` | The button group is filled by default. | ================================================ FILE: src/button/demos/enUS/loading.demo.vue ================================================ # Loading Buttons can have loading states. ================================================ FILE: src/button/demos/enUS/popover.demo.vue ================================================ # Using popover in disabled state The native disabled button won't trigger some mouse events so `n-popover` can't listen to it. If you need to use it, you can use `tag` prop to change button's behavior. ================================================ FILE: src/button/demos/enUS/quaternary.demo.vue ================================================ # Quaternary button ================================================ FILE: src/button/demos/enUS/secondary.demo.vue ================================================ # Secondary button ================================================ FILE: src/button/demos/enUS/shape.demo.vue ================================================ # Shape Buttons can have different shapes. ================================================ FILE: src/button/demos/enUS/size.demo.vue ================================================ # Size Buttons can be `tiny`, `small`, `medium` and `large` in size. ================================================ FILE: src/button/demos/enUS/tag.demo.vue ================================================ # Tag You can render buttons with different tags. For example ``. ================================================ FILE: src/button/demos/enUS/tertiary.demo.vue ================================================ # Tertiary button ================================================ FILE: src/button/demos/enUS/text.demo.vue ================================================ # Text button It just looks like text. ================================================ FILE: src/button/demos/zhCN/basic.demo.vue ================================================ # 基础 按钮的 `type` 分别为 `default`、`tertiary`、`primary`、`info`、`success`、`warning` 和 `error`。 ================================================ FILE: src/button/demos/zhCN/color.demo.vue ================================================ # 自定义颜色 这两个颜色看起来像毒蘑菇。 ================================================ FILE: src/button/demos/zhCN/dashed.demo.vue ================================================ # 虚线按钮 使用 `dashed` 来使用虚线按钮。 ================================================ FILE: src/button/demos/zhCN/debug.demo.vue ================================================ # debug `Debug` 用的。 ================================================ FILE: src/button/demos/zhCN/disabled.demo.vue ================================================ # 禁用 按钮可以被禁用。 ================================================ FILE: src/button/demos/zhCN/events.demo.vue ================================================ # 事件 处理按钮的事件。 ================================================ FILE: src/button/demos/zhCN/ghost.demo.vue ================================================ # 透明背景 `Ghost` 按钮有透明的背景。 ================================================ FILE: src/button/demos/zhCN/group.demo.vue ================================================ # 按钮组 可以把几个按钮结合成按钮组。 ================================================ FILE: src/button/demos/zhCN/icon-button.demo.vue ================================================ # 使用图标作为按钮 有时你可能会想用图标作为按钮并且自定义一些尺寸。这时你可以使用 `text` 按钮和 `font-size` 来进行设定。 ================================================ FILE: src/button/demos/zhCN/icon.demo.vue ================================================ # 图标 在按钮上使用图标，可以使用 `render-icon` 属性或 `icon` 插槽。 ================================================ FILE: src/button/demos/zhCN/index.demo-entry.md ================================================ # 按钮 Button 按钮用来触发一些操作。 ## 演示 ```demo basic.vue secondary.vue tertiary.vue quaternary.vue dashed.vue size.vue text.vue tag.vue disabled.vue icon.vue events.vue shape.vue ghost.vue loading.vue color.vue group.vue icon-button.vue popover.vue rtl-debug.vue debug.vue ``` ## API ### Button Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | attr-type | `'button' \| 'submit' \| 'reset'` | `'button'` | 按钮的 DOM 的 `type` 属性 | | | block | `boolean` | `false` | 按钮是否显示为块级 | | | bordered | `boolean` | `true` | 按钮是否显示 border | | | circle | `boolean` | `false` | 按钮是否为圆形 | | | color | `string` | `undefined` | 按钮颜色（支持形如 `#FFF`， `#FFFFFF`， `yellow`，`rgb(0, 0, 0)` 的颜色） | | | dashed | `boolean` | `false` | 按钮边框是否为虚线 | | | disabled | `boolean` | `false` | 按钮是否禁用 | | | focusable | `boolean` | `true` | 按钮是否可以被聚焦 | | | ghost | `boolean` | `false` | 按钮是否透明 | | | native-focus-behavior | `boolean` | 浏览器不是 Safari | 按钮是否遵循原生的 focus 行为。Safari 原生的 button 无法通过点击被聚焦，所以默认情况下 naive-ui 做了一些处理使它可以被聚焦，如果你不需要这种行为，或者发现你需要让按钮可被拖动，可以开启这个属性 | 2.28.3 | | icon-placement | `'left' \| 'right'` | `'left'` | 按钮中图标的位置 | | | keyboard | `boolean` | `true` | 是否支持键盘操作 | | | loading | `boolean` | `false` | 按钮是否显示加载状态 | | | quaternary | `boolean` | `false` | 是否是四级按钮 | | | spin-props | `{ strokeWidth?: number, stroke?: string, scale?: number, radius?: number }` | `undefined` | 加载图标的属性 | 2.44.0 | | render-icon | `() => VNodeChild` | `undefined` | 按钮图标的渲染函数 | 2.34.0 | | round | `boolean` | `false` | 按钮是否显示圆角 | | | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | 按钮的尺寸 | | | secondary | `boolean` | `false` | 是否是次要按钮 | | | strong | `boolean` | `false` | 按钮文字是否加粗 | | | tertiary | `boolean` | `false` | 是否是三级按钮 | | | text | `boolean` | `false` | 是否显示为文本按钮 | | | text-color | `string` | `undefined` | 按钮文字颜色（支持形如 `#FFF`， `#FFFFFF`， `yellow`，`rgb(0, 0, 0)` 的颜色） | | | type | `'default' \| 'tertiary' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | 按钮的类型 | | | tag | `string` | `'button'` | 按钮需要被渲染为什么标签 | | ### ButtonGroup Props | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `undefined` | 在组内的按钮的尺寸。如果设定，内部的按钮尺寸将不生效 | | vertical | `boolean` | `false` | 组内按钮的排列方式 | ### Button Slots | 名称 | 参数 | 说明 | | ------- | ---- | ---------- | | default | `()` | 按钮的内容 | | icon | `()` | 按钮的图标 | ### ButtonGroup Slots | 名称 | 参数 | 说明 | | ------- | ---- | ------------ | | default | `()` | 按钮组的内容 | ================================================ FILE: src/button/demos/zhCN/loading.demo.vue ================================================ # 加载中 按钮有加载状态。 ================================================ FILE: src/button/demos/zhCN/popover.demo.vue ================================================ # 配合 Popover 的特殊情况 disabled 的原生 button 不会触发部分鼠标事件，因此 `n-popover` 无法监听到相关的事件。如果你需要在这种情况下使用，可以使用 `tag` 属性来调整 button 的行为。 ================================================ FILE: src/button/demos/zhCN/quaternary.demo.vue ================================================ # 次次次要按钮 ================================================ FILE: src/button/demos/zhCN/rtl-debug.demo.vue ================================================ # Rtl Debug ================================================ FILE: src/button/demos/zhCN/secondary.demo.vue ================================================ # 次要按钮 ================================================ FILE: src/button/demos/zhCN/shape.demo.vue ================================================ # 形状 按钮拥有不同的形状。 ================================================ FILE: src/button/demos/zhCN/size.demo.vue ================================================ # 尺寸 有 `tiny`、`small`、`medium` 和 `large` 尺寸。 ================================================ FILE: src/button/demos/zhCN/tag.demo.vue ================================================ # 标签 你可以把按钮渲染成不同的标签，比如 ``。 ================================================ FILE: src/button/demos/zhCN/tertiary.demo.vue ================================================ # 次次要按钮 ================================================ FILE: src/button/demos/zhCN/text.demo.vue ================================================ # 文本按钮 长得就像文本。 ================================================ FILE: src/button/index.ts ================================================ export { buttonProps, default as NButton, XButton as NxButton } from './src/Button' export type { ButtonProps, ButtonSlots } from './src/Button' export type * from './src/public-types' ================================================ FILE: src/button/src/Button.tsx ================================================ import type { ButtonHTMLAttributes, CSSProperties, ExtractPropTypes, PropType, SlotsType, VNode, VNodeChild } from 'vue' import type { BaseWaveRef } from '../../_internal' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils' import type { ButtonTheme } from '../styles' import type { ButtonSize, ButtonSpinProps, ButtonType } from './public-types' import { changeColor } from 'seemly' import { useMemo } from 'vooks' import { computed, defineComponent, h, inject, ref, watchEffect } from 'vue' import { NBaseLoading, NBaseWave, NFadeInExpandTransition, NIconSwitchTransition } from '../../_internal' import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins' import { useRtl } from '../../_mixins/use-rtl' import { call, color2Class, createKey, isSlotEmpty, resolveWrappedSlot, warnOnce } from '../../_utils' import { createHoverColor, createPressedColor } from '../../_utils/color/index' import { isSafari } from '../../_utils/env/browser' import { buttonGroupInjectionKey } from '../../button-group/src/context' import { buttonLight } from '../styles' import style from './styles/index.cssr' export const buttonProps = { ...(useTheme.props as ThemeProps), color: String, textColor: String, text: Boolean, block: Boolean, loading: Boolean, disabled: Boolean, circle: Boolean, size: String as PropType, ghost: Boolean, round: Boolean, secondary: Boolean, tertiary: Boolean, quaternary: Boolean, strong: Boolean, focusable: { type: Boolean, default: true }, keyboard: { type: Boolean, default: true }, tag: { type: String as PropType, default: 'button' }, type: { type: String as PropType, default: 'default' }, dashed: Boolean, renderIcon: Function as PropType<() => VNodeChild>, iconPlacement: { type: String as PropType<'left' | 'right'>, default: 'left' }, attrType: { type: String as PropType<'button' | 'submit' | 'reset'>, default: 'button' }, bordered: { type: Boolean, default: true }, onClick: [Function, Array] as PropType void>>, nativeFocusBehavior: { type: Boolean, default: !isSafari }, spinProps: Object as PropType } as const export type ButtonProps = ExtractPublicPropTypes export interface ButtonSlots { default?: () => VNode[] icon?: () => VNode[] } const Button = defineComponent({ name: 'Button', props: buttonProps, slots: Object as SlotsType, setup(props) { if (__DEV__) { watchEffect(() => { const { dashed, ghost, text, secondary, tertiary, quaternary } = props if ( (dashed || ghost || text) && (secondary || tertiary || quaternary) ) { warnOnce( 'button', '`dashed`, `ghost` and `text` props can\'t be used along with `secondary`, `tertiary` and `quaternary` props.' ) } }) } const selfElRef = ref(null) const waveElRef = ref(null) const enterPressedRef = ref(false) const showBorderRef = useMemo(() => { return ( !props.quaternary && !props.tertiary && !props.secondary && !props.text && (!props.color || props.ghost || props.dashed) && props.bordered ) }) const NButtonGroup = inject(buttonGroupInjectionKey, {}) const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef, mergedComponentPropsRef } = useConfig(props) const { mergedSizeRef } = useFormItem( {}, { defaultSize: 'medium', mergedSize: (NFormItem) => { const { size } = props if (size) return size const { size: buttonGroupSize } = NButtonGroup if (buttonGroupSize) return buttonGroupSize const { mergedSize: formItemSize } = NFormItem || {} if (formItemSize) return formItemSize.value const configSize = mergedComponentPropsRef?.value?.Button?.size if (configSize) return configSize return 'medium' } } ) const mergedFocusableRef = computed(() => { return props.focusable && !props.disabled }) const handleMousedown = (e: MouseEvent): void => { if (!mergedFocusableRef.value) { e.preventDefault() } if (props.nativeFocusBehavior) { return } e.preventDefault() // normally this won't be called if disabled (when tag is button) // if not, we try to make it behave like a button if (props.disabled) { return } if (mergedFocusableRef.value) { selfElRef.value?.focus({ preventScroll: true }) } } const handleClick = (e: MouseEvent): void => { if (!props.disabled && !props.loading) { const { onClick } = props if (onClick) call(onClick, e) if (!props.text) { waveElRef.value?.play() } } } const handleKeyup = (e: KeyboardEvent): void => { switch (e.key) { case 'Enter': if (!props.keyboard) { return } enterPressedRef.value = false } } const handleKeydown = (e: KeyboardEvent): void => { switch (e.key) { case 'Enter': if (!props.keyboard || props.loading) { e.preventDefault() return } enterPressedRef.value = true } } const handleBlur = (): void => { enterPressedRef.value = false } const themeRef = useTheme( 'Button', '-button', style, buttonLight, props, mergedClsPrefixRef ) const rtlEnabledRef = useRtl('Button', mergedRtlRef, mergedClsPrefixRef) const cssVarsRef = computed(() => { const theme = themeRef.value const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme const { rippleDuration, opacityDisabled, fontWeight, fontWeightStrong } = self const size = mergedSizeRef.value const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props // font const fontProps = { '--n-font-weight': strong ? fontWeightStrong : fontWeight } // color let colorProps = { '--n-color': 'initial', '--n-color-hover': 'initial', '--n-color-pressed': 'initial', '--n-color-focus': 'initial', '--n-color-disabled': 'initial', '--n-ripple-color': 'initial', '--n-text-color': 'initial', '--n-text-color-hover': 'initial', '--n-text-color-pressed': 'initial', '--n-text-color-focus': 'initial', '--n-text-color-disabled': 'initial' } const typeIsTertiary = type === 'tertiary' const typeIsDefault = type === 'default' const mergedType = typeIsTertiary ? 'default' : type if (text) { const propTextColor = textColor || color const mergedTextColor = propTextColor || self[createKey('textColorText', mergedType)] colorProps = { '--n-color': '#0000', '--n-color-hover': '#0000', '--n-color-pressed': '#0000', '--n-color-focus': '#0000', '--n-color-disabled': '#0000', '--n-ripple-color': '#0000', '--n-text-color': mergedTextColor, '--n-text-color-hover': propTextColor ? createHoverColor(propTextColor) : self[createKey('textColorTextHover', mergedType)], '--n-text-color-pressed': propTextColor ? createPressedColor(propTextColor) : self[createKey('textColorTextPressed', mergedType)], '--n-text-color-focus': propTextColor ? createHoverColor(propTextColor) : self[createKey('textColorTextHover', mergedType)], '--n-text-color-disabled': propTextColor || self[createKey('textColorTextDisabled', mergedType)] } } else if (ghost || dashed) { const mergedTextColor = textColor || color colorProps = { '--n-color': '#0000', '--n-color-hover': '#0000', '--n-color-pressed': '#0000', '--n-color-focus': '#0000', '--n-color-disabled': '#0000', '--n-ripple-color': color || self[createKey('rippleColor', mergedType)], '--n-text-color': mergedTextColor || self[createKey('textColorGhost', mergedType)], '--n-text-color-hover': mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey('textColorGhostHover', mergedType)], '--n-text-color-pressed': mergedTextColor ? createPressedColor(mergedTextColor) : self[createKey('textColorGhostPressed', mergedType)], '--n-text-color-focus': mergedTextColor ? createHoverColor(mergedTextColor) : self[createKey('textColorGhostHover', mergedType)], '--n-text-color-disabled': mergedTextColor || self[createKey('textColorGhostDisabled', mergedType)] } } else if (secondary) { const typeTextColor = typeIsDefault ? self.textColor : typeIsTertiary ? self.textColorTertiary : self[createKey('color', mergedType)] const mergedTextColor = color || typeTextColor const isColoredType = type !== 'default' && type !== 'tertiary' colorProps = { '--n-color': isColoredType ? changeColor(mergedTextColor, { alpha: Number(self.colorOpacitySecondary) }) : self.colorSecondary, '--n-color-hover': isColoredType ? changeColor(mergedTextColor, { alpha: Number(self.colorOpacitySecondaryHover) }) : self.colorSecondaryHover, '--n-color-pressed': isColoredType ? changeColor(mergedTextColor, { alpha: Number(self.colorOpacitySecondaryPressed) }) : self.colorSecondaryPressed, '--n-color-focus': isColoredType ? changeColor(mergedTextColor, { alpha: Number(self.colorOpacitySecondaryHover) }) : self.colorSecondaryHover, '--n-color-disabled': self.colorSecondary, '--n-ripple-color': '#0000', '--n-text-color': mergedTextColor, '--n-text-color-hover': mergedTextColor, '--n-text-color-pressed': mergedTextColor, '--n-text-color-focus': mergedTextColor, '--n-text-color-disabled': mergedTextColor } } else if (tertiary || quaternary) { const typeColor = typeIsDefault ? self.textColor : typeIsTertiary ? self.textColorTertiary : self[createKey('color', mergedType)] const mergedColor = color || typeColor if (tertiary) { colorProps['--n-color'] = self.colorTertiary colorProps['--n-color-hover'] = self.colorTertiaryHover colorProps['--n-color-pressed'] = self.colorTertiaryPressed colorProps['--n-color-focus'] = self.colorSecondaryHover colorProps['--n-color-disabled'] = self.colorTertiary } else { colorProps['--n-color'] = self.colorQuaternary colorProps['--n-color-hover'] = self.colorQuaternaryHover colorProps['--n-color-pressed'] = self.colorQuaternaryPressed colorProps['--n-color-focus'] = self.colorQuaternaryHover colorProps['--n-color-disabled'] = self.colorQuaternary } colorProps['--n-ripple-color'] = '#0000' colorProps['--n-text-color'] = mergedColor colorProps['--n-text-color-hover'] = mergedColor colorProps['--n-text-color-pressed'] = mergedColor colorProps['--n-text-color-focus'] = mergedColor colorProps['--n-text-color-disabled'] = mergedColor } else { colorProps = { '--n-color': color || self[createKey('color', mergedType)], '--n-color-hover': color ? createHoverColor(color) : self[createKey('colorHover', mergedType)], '--n-color-pressed': color ? createPressedColor(color) : self[createKey('colorPressed', mergedType)], '--n-color-focus': color ? createHoverColor(color) : self[createKey('colorFocus', mergedType)], '--n-color-disabled': color || self[createKey('colorDisabled', mergedType)], '--n-ripple-color': color || self[createKey('rippleColor', mergedType)], '--n-text-color': textColor || (color ? self.textColorPrimary : typeIsTertiary ? self.textColorTertiary : self[createKey('textColor', mergedType)]), '--n-text-color-hover': textColor || (color ? self.textColorHoverPrimary : self[createKey('textColorHover', mergedType)]), '--n-text-color-pressed': textColor || (color ? self.textColorPressedPrimary : self[createKey('textColorPressed', mergedType)]), '--n-text-color-focus': textColor || (color ? self.textColorFocusPrimary : self[createKey('textColorFocus', mergedType)]), '--n-text-color-disabled': textColor || (color ? self.textColorDisabledPrimary : self[createKey('textColorDisabled', mergedType)]) } } // border let borderProps = { '--n-border': 'initial', '--n-border-hover': 'initial', '--n-border-pressed': 'initial', '--n-border-focus': 'initial', '--n-border-disabled': 'initial' } if (text) { borderProps = { '--n-border': 'none', '--n-border-hover': 'none', '--n-border-pressed': 'none', '--n-border-focus': 'none', '--n-border-disabled': 'none' } } else { borderProps = { '--n-border': self[createKey('border', mergedType)], '--n-border-hover': self[createKey('borderHover', mergedType)], '--n-border-pressed': self[createKey('borderPressed', mergedType)], '--n-border-focus': self[createKey('borderFocus', mergedType)], '--n-border-disabled': self[createKey('borderDisabled', mergedType)] } } // size const { [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize, [createKey('padding', size)]: padding, [createKey('paddingRound', size)]: paddingRound, [createKey('iconSize', size)]: iconSize, [createKey('borderRadius', size)]: borderRadius, [createKey('iconMargin', size)]: iconMargin, waveOpacity } = self const sizeProps = { '--n-width': circle && !text ? height : 'initial', '--n-height': text ? 'initial' : height, '--n-font-size': fontSize, '--n-padding': circle ? 'initial' : text ? 'initial' : round ? paddingRound : padding, '--n-icon-size': iconSize, '--n-icon-margin': iconMargin, '--n-border-radius': text ? 'initial' : circle || round ? height : borderRadius } return { '--n-bezier': cubicBezierEaseInOut, '--n-bezier-ease-out': cubicBezierEaseOut, '--n-ripple-duration': rippleDuration, '--n-opacity-disabled': opacityDisabled, '--n-wave-opacity': waveOpacity, ...fontProps, ...colorProps, ...borderProps, ...sizeProps } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( 'button', computed(() => { let hash = '' const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props if (dashed) hash += 'a' if (ghost) hash += 'b' if (text) hash += 'c' if (round) hash += 'd' if (circle) hash += 'e' if (secondary) hash += 'f' if (tertiary) hash += 'g' if (quaternary) hash += 'h' if (strong) hash += 'i' if (color) hash += `j${color2Class(color)}` if (textColor) hash += `k${color2Class(textColor)}` const { value: size } = mergedSizeRef hash += `l${size[0]}` hash += `m${type[0]}` return hash }), cssVarsRef, props ) : undefined return { selfElRef, waveElRef, mergedClsPrefix: mergedClsPrefixRef, mergedFocusable: mergedFocusableRef, mergedSize: mergedSizeRef, showBorder: showBorderRef, enterPressed: enterPressedRef, rtlEnabled: rtlEnabledRef, handleMousedown, handleKeydown, handleBlur, handleKeyup, handleClick, customColorCssVars: computed(() => { const { color } = props if (!color) return null const hoverColor = createHoverColor(color) return { '--n-border-color': color, '--n-border-color-hover': hoverColor, '--n-border-color-pressed': createPressedColor(color), '--n-border-color-focus': hoverColor, '--n-border-color-disabled': color } }), cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { const { mergedClsPrefix, tag: Component, onRender } = this onRender?.() const children = resolveWrappedSlot( this.$slots.default, children => children && ( {children} ) ) return ( {this.iconPlacement === 'right' && children} {{ default: () => resolveWrappedSlot( this.$slots.icon, children => (this.loading || this.renderIcon || children) && ( {{ default: () => this.loading ? ( ) : (
    {this.renderIcon ? this.renderIcon() : children}
    ) }}     ) ) }}     {this.iconPlacement === 'left' && children} {!this.text ? ( ) : null} {this.showBorder ? (
    ) : null} {this.showBorder ? (
    ) : null} ) } }) type InternalButtonProps = ExtractPropTypes type NativeButtonProps = Omit type MergedProps = Partial export default Button // XButton is for tsx type checking // It's not compatible with render function `h` // Currently we don't expose it as public // If there's any issue about this, we may expose it // Since most people use template, the type checking phase doesn't work as tsx export const XButton: new () => { $props: MergedProps } = Button as any // Also, we may make XButton a generic type which support `tag` prop // but currently vue doesn't export IntrinsicElementAttributes from runtime-dom // so we can't easily make an attr map by hand // just leave it for later ================================================ FILE: src/button/src/public-types.ts ================================================ import type { SharedSpinProps } from '../../_internal' export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large' export type ButtonSpinProps = SharedSpinProps export type ButtonType = | 'default' | 'tertiary' | 'primary' | 'info' | 'success' | 'warning' | 'error' ================================================ FILE: src/button/src/styles/index.cssr.ts ================================================ import { fadeInWidthExpandTransition } from '../../../_styles/transitions/fade-in-width-expand.cssr' import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.cssr' import { isBrowser } from '../../../_utils' import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr' // vars: // --n-bezier // --n-bezier-ease-out // --n-ripple-duration // --n-opacity-disabled // --n-text-color // --n-text-color-hover // --n-text-color-pressed // --n-text-color-focus // --n-text-color-disabled // --n-color // --n-color-hover // --n-color-pressed // --n-color-focus // --n-color-disabled // --n-border // --n-border-hover // --n-border-pressed // --n-border-focus // --n-border-disabled // --n-ripple-color // --n-border-radius // --n-height // --n-width // --n-font-size // --n-padding // --n-icon-size // --n-icon-margin // --n-wave-opacity // --n-font-weight // // private-vars: // --n-border-color-xxx, used for custom color export default c([ cB('button', ` margin: 0; font-weight: var(--n-font-weight); line-height: 1; font-family: inherit; padding: var(--n-padding); height: var(--n-height); font-size: var(--n-font-size); border-radius: var(--n-border-radius); color: var(--n-text-color); background-color: var(--n-color); width: var(--n-width); white-space: nowrap; outline: none; position: relative; z-index: auto; border: none; display: inline-flex; flex-wrap: nowrap; flex-shrink: 0; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; text-align: center; cursor: pointer; text-decoration: none; transition: color .3s var(--n-bezier), background-color .3s var(--n-bezier), opacity .3s var(--n-bezier), border-color .3s var(--n-bezier); `, [ cM('color', [ cE('border', { borderColor: 'var(--n-border-color)' }), cM('disabled', [ cE('border', { borderColor: 'var(--n-border-color-disabled)' }) ]), cNotM('disabled', [ c('&:focus', [ cE('state-border', { borderColor: 'var(--n-border-color-focus)' }) ]), c('&:hover', [ cE('state-border', { borderColor: 'var(--n-border-color-hover)' }) ]), c('&:active', [ cE('state-border', { borderColor: 'var(--n-border-color-pressed)' }) ]), cM('pressed', [ cE('state-border', { borderColor: 'var(--n-border-color-pressed)' }) ]) ]) ]), cM('disabled', { backgroundColor: 'var(--n-color-disabled)', color: 'var(--n-text-color-disabled)' }, [ cE('border', { border: 'var(--n-border-disabled)' }) ]), cNotM('disabled', [ c('&:focus', { backgroundColor: 'var(--n-color-focus)', color: 'var(--n-text-color-focus)' }, [ cE('state-border', { border: 'var(--n-border-focus)' }) ]), c('&:hover', { backgroundColor: 'var(--n-color-hover)', color: 'var(--n-text-color-hover)' }, [ cE('state-border', { border: 'var(--n-border-hover)' }) ]), c('&:active', { backgroundColor: 'var(--n-color-pressed)', color: 'var(--n-text-color-pressed)' }, [ cE('state-border', { border: 'var(--n-border-pressed)' }) ]), cM('pressed', { backgroundColor: 'var(--n-color-pressed)', color: 'var(--n-text-color-pressed)' }, [ cE('state-border', { border: 'var(--n-border-pressed)' }) ]) ]), cM('loading', 'cursor: wait;'), cB('base-wave', ` pointer-events: none; top: 0; right: 0; bottom: 0; left: 0; animation-iteration-count: 1; animation-duration: var(--n-ripple-duration); animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out); `, [ cM('active', { zIndex: 1, animationName: 'button-wave-spread, button-wave-opacity' }) ]), (isBrowser && 'MozBoxSizing' in document.createElement('div').style) ? c('&::moz-focus-inner', { border: 0 }) : null, cE('border, state-border', ` position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; transition: border-color .3s var(--n-bezier); pointer-events: none; `), cE('border', ` border: var(--n-border); `), cE('state-border', ` border: var(--n-border); border-color: #0000; z-index: 1; `), cE('icon', ` margin: var(--n-icon-margin); margin-left: 0; height: var(--n-icon-size); width: var(--n-icon-size); max-width: var(--n-icon-size); font-size: var(--n-icon-size); position: relative; flex-shrink: 0; `, [ cB('icon-slot', ` height: var(--n-icon-size); width: var(--n-icon-size); position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; `, [ iconSwitchTransition({ top: '50%', originalTransform: 'translateY(-50%)' }) ]), fadeInWidthExpandTransition() ]), cE('content', ` display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; `, [ c('~', [ cE('icon', { margin: 'var(--n-icon-margin)', marginRight: 0 }) ]) ]), cM('block', ` display: flex; width: 100%; `), cM('dashed', [ cE('border, state-border', { borderStyle: 'dashed !important' }) ]), cM('disabled', { cursor: 'not-allowed', opacity: 'var(--n-opacity-disabled)' }) ]), c('@keyframes button-wave-spread', { from: { boxShadow: '0 0 0.5px 0 var(--n-ripple-color)' }, to: { // don't use exact 5px since chrome will display the animation with glitches boxShadow: '0 0 0.5px 4.5px var(--n-ripple-color)' } }), c('@keyframes button-wave-opacity', { from: { opacity: 'var(--n-wave-opacity)' }, to: { opacity: 0 } }) ]) ================================================ FILE: src/button/src/styles/rtl.cssr.ts ================================================ import { c, cB, cE, cM } from '../../../_utils/cssr' export default cB('button', [ cM('rtl', ` direction: rtl; `, [ cE('icon', { margin: 'var(--n-icon-margin)', marginRight: 0 }), cE('content', [ c('~', [ cE('icon', { margin: 'var(--n-icon-margin)', marginLeft: 0 }) ]) ]) ]) ]) ================================================ FILE: src/button/styles/_common.ts ================================================ export default { paddingTiny: '0 6px', paddingSmall: '0 10px', paddingMedium: '0 14px', paddingLarge: '0 18px', paddingRoundTiny: '0 10px', paddingRoundSmall: '0 14px', paddingRoundMedium: '0 18px', paddingRoundLarge: '0 22px', iconMarginTiny: '6px', iconMarginSmall: '6px', iconMarginMedium: '6px', iconMarginLarge: '6px', iconSizeTiny: '14px', iconSizeSmall: '18px', iconSizeMedium: '18px', iconSizeLarge: '20px', rippleDuration: '.6s' } ================================================ FILE: src/button/styles/dark.ts ================================================ import type { ButtonTheme } from './light' import { commonDark } from '../../_styles/common' import { self } from './light' const buttonDark: ButtonTheme = { name: 'Button', common: commonDark, self(vars) { const commonSelf = self(vars) commonSelf.waveOpacity = '0.8' commonSelf.colorOpacitySecondary = '0.16' commonSelf.colorOpacitySecondaryHover = '0.2' commonSelf.colorOpacitySecondaryPressed = '0.12' return commonSelf } } export default buttonDark ================================================ FILE: src/button/styles/index.ts ================================================ export { default as buttonDark } from './dark' export { default as buttonLight } from './light' export type { ButtonTheme, ButtonThemeVars } from './light' export { buttonRtl } from './rtl' ================================================ FILE: src/button/styles/light.ts ================================================ import type { Theme } from '../../_mixins' import type { ThemeCommonVars } from '../../_styles/common' import { commonLight } from '../../_styles/common' import commonVariables from './_common' export function self(vars: ThemeCommonVars) { const { heightTiny, heightSmall, heightMedium, heightLarge, borderRadius, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, opacityDisabled, textColor2, textColor3, primaryColorHover, primaryColorPressed, borderColor, primaryColor, baseColor, infoColor, infoColorHover, infoColorPressed, successColor, successColorHover, successColorPressed, warningColor, warningColorHover, warningColorPressed, errorColor, errorColorHover, errorColorPressed, fontWeight, buttonColor2, buttonColor2Hover, buttonColor2Pressed, fontWeightStrong } = vars return { ...commonVariables, heightTiny, heightSmall, heightMedium, heightLarge, borderRadiusTiny: borderRadius, borderRadiusSmall: borderRadius, borderRadiusMedium: borderRadius, borderRadiusLarge: borderRadius, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, opacityDisabled, // secondary colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.22', colorOpacitySecondaryPressed: '0.28', colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, // tertiary colorTertiary: buttonColor2, colorTertiaryHover: buttonColor2Hover, colorTertiaryPressed: buttonColor2Pressed, // quaternary colorQuaternary: '#0000', colorQuaternaryHover: buttonColor2Hover, colorQuaternaryPressed: buttonColor2Pressed, // default type color: '#0000', colorHover: '#0000', colorPressed: '#0000', colorFocus: '#0000', colorDisabled: '#0000', textColor: textColor2, textColorTertiary: textColor3, // tertiary textColorHover: primaryColorHover, textColorPressed: primaryColorPressed, textColorFocus: primaryColorHover, textColorDisabled: textColor2, textColorText: textColor2, textColorTextHover: primaryColorHover, textColorTextPressed: primaryColorPressed, textColorTextFocus: primaryColorHover, textColorTextDisabled: textColor2, textColorGhost: textColor2, textColorGhostHover: primaryColorHover, textColorGhostPressed: primaryColorPressed, textColorGhostFocus: primaryColorHover, textColorGhostDisabled: textColor2, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderPressed: `1px solid ${primaryColorPressed}`, borderFocus: `1px solid ${primaryColorHover}`, borderDisabled: `1px solid ${borderColor}`, rippleColor: primaryColor, // primary colorPrimary: primaryColor, colorHoverPrimary: primaryColorHover, colorPressedPrimary: primaryColorPressed, colorFocusPrimary: primaryColorHover, colorDisabledPrimary: primaryColor, textColorPrimary: baseColor, textColorHoverPrimary: baseColor, textColorPressedPrimary: baseColor, textColorFocusPrimary: baseColor, textColorDisabledPrimary: baseColor, textColorTextPrimary: primaryColor, textColorTextHoverPrimary: primaryColorHover, textColorTextPressedPrimary: primaryColorPressed, textColorTextFocusPrimary: primaryColorHover, textColorTextDisabledPrimary: textColor2, textColorGhostPrimary: primaryColor, textColorGhostHoverPrimary: primaryColorHover, textColorGhostPressedPrimary: primaryColorPressed, textColorGhostFocusPrimary: primaryColorHover, textColorGhostDisabledPrimary: primaryColor, borderPrimary: `1px solid ${primaryColor}`, borderHoverPrimary: `1px solid ${primaryColorHover}`, borderPressedPrimary: `1px solid ${primaryColorPressed}`, borderFocusPrimary: `1px solid ${primaryColorHover}`, borderDisabledPrimary: `1px solid ${primaryColor}`, rippleColorPrimary: primaryColor, // info colorInfo: infoColor, colorHoverInfo: infoColorHover, colorPressedInfo: infoColorPressed, colorFocusInfo: infoColorHover, colorDisabledInfo: infoColor, textColorInfo: baseColor, textColorHoverInfo: baseColor, textColorPressedInfo: baseColor, textColorFocusInfo: baseColor, textColorDisabledInfo: baseColor, textColorTextInfo: infoColor, textColorTextHoverInfo: infoColorHover, textColorTextPressedInfo: infoColorPressed, textColorTextFocusInfo: infoColorHover, textColorTextDisabledInfo: textColor2, textColorGhostInfo: infoColor, textColorGhostHoverInfo: infoColorHover, textColorGhostPressedInfo: infoColorPressed, textColorGhostFocusInfo: infoColorHover, textColorGhostDisabledInfo: infoColor, borderInfo: `1px solid ${infoColor}`, borderHoverInfo: `1px solid ${infoColorHover}`, borderPressedInfo: `1px solid ${infoColorPressed}`, borderFocusInfo: `1px solid ${infoColorHover}`, borderDisabledInfo: `1px solid ${infoColor}`, rippleColorInfo: infoColor, // success colorSuccess: successColor, colorHoverSuccess: successColorHover, colorPressedSuccess: successColorPressed, colorFocusSuccess: successColorHover, colorDisabledSuccess: successColor, textColorSuccess: baseColor, textColorHoverSuccess: baseColor, textColorPressedSuccess: baseColor, textColorFocusSuccess: baseColor, textColorDisabledSuccess: baseColor, textColorTextSuccess: successColor, textColorTextHoverSuccess: successColorHover, textColorTextPressedSuccess: successColorPressed, textColorTextFocusSuccess: successColorHover, textColorTextDisabledSuccess: textColor2, textColorGhostSuccess: successColor, textColorGhostHoverSuccess: successColorHover, textColorGhostPressedSuccess: successColorPressed, textColorGhostFocusSuccess: successColorHover, textColorGhostDisabledSuccess: successColor, borderSuccess: `1px solid ${successColor}`, borderHoverSuccess: `1px solid ${successColorHover}`, borderPressedSuccess: `1px solid ${successColorPressed}`, borderFocusSuccess: `1px solid ${successColorHover}`, borderDisabledSuccess: `1px solid ${successColor}`, rippleColorSuccess: successColor, // warning colorWarning: warningColor, colorHoverWarning: warningColorHover, colorPressedWarning: warningColorPressed, colorFocusWarning: warningColorHover, colorDisabledWarning: warningColor, textColorWarning: baseColor, textColorHoverWarning: baseColor, textColorPressedWarning: baseColor, textColorFocusWarning: baseColor, textColorDisabledWarning: baseColor, textColorTextWarning: warningColor, textColorTextHoverWarning: warningColorHover, textColorTextPressedWarning: warningColorPressed, textColorTextFocusWarning: warningColorHover, textColorTextDisabledWarning: textColor2, textColorGhostWarning: warningColor, textColorGhostHoverWarning: warningColorHover, textColorGhostPressedWarning: warningColorPressed, textColorGhostFocusWarning: warningColorHover, textColorGhostDisabledWarning: warningColor, borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderPressedWarning: `1px solid ${warningColorPressed}`, borderFocusWarning: `1px solid ${warningColorHover}`, borderDisabledWarning: `1px solid ${warningColor}`, rippleColorWarning: warningColor, // error colorError: errorColor, colorHoverError: errorColorHover, colorPressedError: errorColorPressed, colorFocusError: errorColorHover, colorDisabledError: errorColor, textColorError: baseColor, textColorHoverError: baseColor, textColorPressedError: baseColor, textColorFocusError: baseColor, textColorDisabledError: baseColor, textColorTextError: errorColor, textColorTextHoverError: errorColorHover, textColorTextPressedError: errorColorPressed, textColorTextFocusError: errorColorHover, textColorTextDisabledError: textColor2, textColorGhostError: errorColor, textColorGhostHoverError: errorColorHover, textColorGhostPressedError: errorColorPressed, textColorGhostFocusError: errorColorHover, textColorGhostDisabledError: errorColor, borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderPressedError: `1px solid ${errorColorPressed}`, borderFocusError: `1px solid ${errorColorHover}`, borderDisabledError: `1px solid ${errorColor}`, rippleColorError: errorColor, waveOpacity: '0.6', fontWeight, fontWeightStrong } } export type ButtonThemeVars = ReturnType const buttonLight: Theme<'Button', ButtonThemeVars> = { name: 'Button', common: commonLight, self } export default buttonLight export type ButtonTheme = typeof buttonLight ================================================ FILE: src/button/styles/rtl.ts ================================================ import type { RtlItem } from '../../config-provider/src/internal-interface' import rtlStyle from '../src/styles/rtl.cssr' export const buttonRtl: RtlItem = { name: 'Button', style: rtlStyle } ================================================ FILE: src/button/tests/Button.spec.tsx ================================================ import { CashOutline as CashIcon } from '@vicons/ionicons5' import { mount } from '@vue/test-utils' import { h } from 'vue' import { NIcon } from '../../icon' import { NButton, NxButton } from '../index' describe('n-button', () => { it('should work with import on demand', () => { mount(NButton) }) it('clickable', async () => { const onClick = vi.fn() const inst = mount(NButton, { props: { onClick } }) await inst.trigger('click') expect(onClick).toHaveBeenCalled() inst.unmount() }) it('keyboard', async () => { const onClick = vi.fn() const inst = mount(NButton, { props: { keyboard: false, onClick } }) await inst.trigger('click') expect(onClick).toHaveBeenCalledTimes(1) await inst.trigger('keydown.space') expect(onClick).toHaveBeenCalledTimes(1) await inst.trigger('keydown.enter') expect(onClick).toHaveBeenCalledTimes(1) inst.unmount() }) it('disabled', async () => { const onClick = vi.fn() const inst = mount(NButton, { props: { disabled: true, onClick } }) await inst.trigger('click') expect(onClick).not.toHaveBeenCalled() inst.unmount() }) it('passed native event & attr tsx type checking', () => { ;(() => (
    {}} />
    ))() }) it('should work with `attr-type` prop', () => { ;(['button', 'submit', 'reset'] as const).forEach((type) => { const wrapper = mount(NButton, { props: { attrType: type } }) expect(wrapper.find('button').attributes('type')).toContain(type) wrapper.unmount() }) }) it('should work with `block` prop', async () => { const wrapper = mount(NButton) expect(wrapper.find('.n-button').classes()).not.toContain('n-button--block') await wrapper.setProps({ block: true }) expect(wrapper.find('.n-button').classes()).toContain('n-button--block') wrapper.unmount() }) it('should work with `type` prop', async () => { ;(['primary', 'info', 'success', 'warning', 'error'] as const).forEach( (type) => { const wrapper = mount(NButton, { props: { type } }) expect(wrapper.find('button').classes()).toContain( `n-button--${type}-type` ) wrapper.unmount() } ) }) it('should work with `dashed` prop', async () => { const wrapper = mount(NButton) await wrapper.setProps({ dashed: true }) expect(wrapper.find('button').classes()).toContain('n-button--dashed') wrapper.unmount() }) it('should work with `bordered` prop', async () => { const wrapper = mount(NButton) await wrapper.setProps({ bordered: false }) expect(wrapper.find('.n-button__border').exists()).toBe(false) wrapper.unmount() }) it('should work with `size` prop', async () => { ;(['tiny', 'small', 'medium', 'large'] as const).forEach((size) => { const wrapper = mount(NButton, { props: { size } }) expect(wrapper.find('button').attributes('style')).toMatchSnapshot() wrapper.unmount() }) }) it('should work with `text` prop', () => { const wrapper = mount(NButton, { props: { text: true }, slots: { default: () => 'test' } }) expect(wrapper.find('button').attributes('style')).toMatchSnapshot() expect(wrapper.find('.n-button__content').element.textContent).toBe('test') wrapper.unmount() }) it('should work with `tag` prop', () => { const wrapper = mount(NButton, { props: { text: true, tag: 'a', href: 'https://www.naiveui.com', target: '_blank', type: 'primary' }, slots: { default: () => 'test' } }) expect(wrapper.find('a').attributes('style')).toMatchSnapshot() expect(wrapper.find('a').classes()).toContain('n-button--primary-type') expect(wrapper.find('a').attributes('type')).toContain('button') expect(wrapper.find('a').attributes('disabled')).toContain('false') expect(wrapper.find('a').attributes('href')).toContain( 'https://www.naiveui.com' ) expect(wrapper.find('a').attributes('target')).toContain('_blank') expect(wrapper.find('.n-button__content').element.textContent).toBe('test') wrapper.unmount() }) it('should work with `icon` slot', async () => { const wrapper = mount(NButton, { slots: { icon: () => h(NIcon, null, { default: () => h(CashIcon) }), default: () => 'test' } }) expect(wrapper.find('span').classes('n-button__icon')).toBe(true) expect(wrapper.find('div').classes('n-icon-slot')).toBe(true) expect(wrapper.find('i').classes('n-icon')).toBe(true) expect(wrapper.find('i').classes('n-icon')).toBe(true) expect(wrapper.find('.n-button__content').element.textContent).toBe('test') expect(wrapper.find('button').element.children[1].textContent).toBe('test') await wrapper.setProps({ iconPlacement: 'right' }) expect(wrapper.find('button').element.children[0].textContent).toBe('test') wrapper.unmount() }) it('should work with `shape` ', async () => { const wrapper = mount(NButton, { props: { circle: true }, slots: { icon: () => h(NIcon, null, { default: () => h(CashIcon) }) } }) const circleStyle: string[] = [ '--n-width: 34px;', '--n-padding: initial;', '--n-border-radius: 34px;' ] let buttonStyle = wrapper.find('button').attributes('style') expect(circleStyle.every(i => buttonStyle?.includes(i))).toBe(true) await wrapper.setProps({ circle: false, round: true }) const roundStyle: string[] = [ '--n-width: initial;', '--n-padding: 0 18px;', '--n-border-radius: 34px;' ] buttonStyle = wrapper.find('button').attributes('style') expect(roundStyle.every(i => buttonStyle?.includes(i))).toBe(true) await wrapper.setProps({ circle: false, round: false }) const defaultStyle: string[] = [ '--n-width: initial;', '--n-padding: 0 14px;', '--n-border-radius: 3px;' ] buttonStyle = wrapper.find('button').attributes('style') expect(defaultStyle.every(i => buttonStyle?.includes(i))).toBe(true) wrapper.unmount() }) it('should work with `ghost` prop', () => { const wrapper = mount(NButton, { props: { ghost: true }, slots: { default: () => 'test' } }) expect(wrapper.find('button').classes()).toContain('n-button--ghost') wrapper.unmount() }) it('should work with `icon-placement` prop', async () => { const wrapper = mount(NButton, { slots: { default: () => 'test', icon: () => h(NIcon, null, { default: () => h(CashIcon) }) } }) expect(wrapper.findAll('span')[0].attributes('class')).toContain( 'n-button__icon' ) expect(wrapper.findAll('span')[1].attributes('class')).toContain( 'n-button__content' ) await wrapper.setProps({ iconPlacement: 'right' }) expect(wrapper.findAll('span')[0].attributes('class')).toContain( 'n-button__content' ) expect(wrapper.findAll('span')[1].attributes('class')).toContain( 'n-button__icon' ) wrapper.unmount() }) it('should work with `loading` prop', () => { const wrapper = mount(NButton, { props: { loading: true }, slots: { default: () => 'test' } }) expect(wrapper.find('.n-icon-slot').classes()).toContain('n-base-loading') expect(wrapper.find('.n-icon-slot').attributes('aria-label')).toContain( 'loading' ) wrapper.unmount() }) it('should work with `color` prop', () => { const wrapper = mount(NButton, { props: { color: '#8a2be2' }, slots: { default: () => 'test' } }) expect(wrapper.find('button').classes()).toContain('n-button--color') const colorStyle: string[] = [ '--n-color: #8a2be2;', '--n-color-disabled: #8a2be2;', '--n-ripple-color: #8a2be2;' ] const buttonStyle = wrapper.find('button').attributes('style') expect(colorStyle.every(i => buttonStyle?.includes(i))).toBe(true) wrapper.unmount() }) it('should work with `text-color` prop', () => { const wrapper = mount(NButton, { props: { 'text-color': '#8a2be2' }, slots: { default: () => 'test' } }) const buttonStyle = wrapper.find('button').attributes('style') expect( ( [ '--n-text-color: #8a2be2;', '--n-text-color-disabled: #8a2be2;' ] as string[] ).every(i => buttonStyle?.includes(i)) ).toBe(true) wrapper.unmount() }) }) ================================================ FILE: src/button/tests/__snapshots__/Button.spec.tsx.snap ================================================ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`n-button > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 22px; --n-font-size: 12px; --n-padding: 0 6px; --n-icon-size: 14px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; exports[`n-button > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 28px; --n-font-size: 14px; --n-padding: 0 10px; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; exports[`n-button > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 34px; --n-font-size: 14px; --n-padding: 0 14px; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; exports[`n-button > should work with \`size\` prop 4`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #18a058; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: 1px solid rgb(224, 224, 230); --n-border-hover: 1px solid #36ad6a; --n-border-pressed: 1px solid #0c7a43; --n-border-focus: 1px solid #36ad6a; --n-border-disabled: 1px solid rgb(224, 224, 230); --n-width: initial; --n-height: 40px; --n-font-size: 15px; --n-padding: 0 18px; --n-icon-size: 20px; --n-icon-margin: 6px; --n-border-radius: 3px;"`; exports[`n-button > should work with \`tag\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #0000; --n-text-color: #18a058; --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: none; --n-border-hover: none; --n-border-pressed: none; --n-border-focus: none; --n-border-disabled: none; --n-width: initial; --n-height: initial; --n-font-size: 14px; --n-padding: initial; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: initial;"`; exports[`n-button > should work with \`text\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-bezier-ease-out: cubic-bezier(0, 0, .2, 1); --n-ripple-duration: .6s; --n-opacity-disabled: 0.5; --n-wave-opacity: 0.6; --n-font-weight: 400; --n-color: #0000; --n-color-hover: #0000; --n-color-pressed: #0000; --n-color-focus: #0000; --n-color-disabled: #0000; --n-ripple-color: #0000; --n-text-color: rgb(51, 54, 57); --n-text-color-hover: #36ad6a; --n-text-color-pressed: #0c7a43; --n-text-color-focus: #36ad6a; --n-text-color-disabled: rgb(51, 54, 57); --n-border: none; --n-border-hover: none; --n-border-pressed: none; --n-border-focus: none; --n-border-disabled: none; --n-width: initial; --n-height: initial; --n-font-size: 14px; --n-padding: initial; --n-icon-size: 18px; --n-icon-margin: 6px; --n-border-radius: initial;"`; ================================================ FILE: src/button/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NButton } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/button-group/index.ts ================================================ export { buttonGroupProps, default as NButtonGroup } from './src/ButtonGroup' export type { ButtonGroupProps } from './src/ButtonGroup' ================================================ FILE: src/button-group/src/ButtonGroup.tsx ================================================ import type { PropType } from 'vue' import type { ExtractPublicPropTypes } from '../../_utils' import type { ButtonSize } from '../../button/src/public-types' import { defineComponent, h, provide } from 'vue' import { useConfig, useStyle } from '../../_mixins' import { useRtl } from '../../_mixins/use-rtl' import { buttonGroupInjectionKey } from './context' import style from './styles/index.cssr' export interface ButtonGroupInjection { size?: ButtonSize | undefined } export const buttonGroupProps = { size: String as PropType, vertical: Boolean } as const export type ButtonGroupProps = ExtractPublicPropTypes export default defineComponent({ name: 'ButtonGroup', props: buttonGroupProps, setup(props) { const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props) useStyle('-button-group', style, mergedClsPrefixRef) provide(buttonGroupInjectionKey, props) const rtlEnabledRef = useRtl( 'ButtonGroup', mergedRtlRef, mergedClsPrefixRef ) return { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef } }, render() { const { mergedClsPrefix } = this return (
    {this.$slots}
    ) } }) ================================================ FILE: src/button-group/src/context.ts ================================================ import type { ButtonGroupInjection } from './ButtonGroup' import { createInjectionKey } from '../../_utils' export const buttonGroupInjectionKey = createInjectionKey('n-button-group') ================================================ FILE: src/button-group/src/styles/index.cssr.ts ================================================ import type { CNode } from 'css-render' import type { ButtonType } from '../../../button/src/public-types' import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr/index' export const zero = '0!important' export const n1 = '-1px!important' function createLeftBorderStyle(type: ButtonType): CNode { return cM(`${type}-type`, [ c('& +', [ cB('button', {}, [ cM(`${type}-type`, [ cE('border', { borderLeftWidth: zero }), cE('state-border', { left: n1 }) ]) ]) ]) ]) } function createTopBorderStyle(type: ButtonType): CNode { return cM(`${type}-type`, [ c('& +', [ cB('button', [ cM(`${type}-type`, [ cE('border', { borderTopWidth: zero }), cE('state-border', { top: n1 }) ]) ]) ]) ]) } export default cB('button-group', ` flex-wrap: nowrap; display: inline-flex; position: relative; `, [ cNotM('vertical', { flexDirection: 'row' }, [ cNotM('rtl', [ cB('button', [ c('&:first-child:not(:last-child)', ` margin-right: ${zero}; border-top-right-radius: ${zero}; border-bottom-right-radius: ${zero}; `), c('&:last-child:not(:first-child)', ` margin-left: ${zero}; border-top-left-radius: ${zero}; border-bottom-left-radius: ${zero}; `), c('&:not(:first-child):not(:last-child)', ` margin-left: ${zero}; margin-right: ${zero}; border-radius: ${zero}; `), createLeftBorderStyle('default'), cM('ghost', [ createLeftBorderStyle('primary'), createLeftBorderStyle('info'), createLeftBorderStyle('success'), createLeftBorderStyle('warning'), createLeftBorderStyle('error') ]) ]) ]) ]), cM('vertical', { flexDirection: 'column' }, [ cB('button', [ c('&:first-child:not(:last-child)', ` margin-bottom: ${zero}; margin-left: ${zero}; margin-right: ${zero}; border-bottom-left-radius: ${zero}; border-bottom-right-radius: ${zero}; `), c('&:last-child:not(:first-child)', ` margin-top: ${zero}; margin-left: ${zero}; margin-right: ${zero}; border-top-left-radius: ${zero}; border-top-right-radius: ${zero}; `), c('&:not(:first-child):not(:last-child)', ` margin: ${zero}; border-radius: ${zero}; `), createTopBorderStyle('default'), cM('ghost', [ createTopBorderStyle('primary'), createTopBorderStyle('info'), createTopBorderStyle('success'), createTopBorderStyle('warning'), createTopBorderStyle('error') ]) ]) ]) ]) ================================================ FILE: src/button-group/src/styles/rtl.cssr.ts ================================================ import type { CNode } from 'css-render' import type { ButtonType } from '../../../button/src/public-types' import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr' import { n1, zero } from './index.cssr' function createRightBorderStyle(type: ButtonType): CNode { return cM(`${type}-type`, [ c('& +', [ cB('button', {}, [ cM(`${type}-type`, [ cE('border', { borderRightWidth: zero }), cE('state-border', { left: n1 }) ]) ]) ]) ]) } export default cB('button-group', [ cNotM('vertical', [ cM('rtl', ` direction: rtl; `, [ cB('button', [ c('&:last-child:not(:first-child)', ` margin-right: ${zero}; border-top-right-radius: ${zero}; border-bottom-right-radius: ${zero}; `), c('&:first-child:not(:last-child)', ` margin-left: ${zero}; border-top-left-radius: ${zero}; border-bottom-left-radius: ${zero}; `), c('&:not(:last-child):not(:first-child)', ` margin-left: ${zero}; margin-right: ${zero}; border-radius: ${zero}; `), createRightBorderStyle('default'), cM('ghost', [ createRightBorderStyle('primary'), createRightBorderStyle('info'), createRightBorderStyle('success'), createRightBorderStyle('warning'), createRightBorderStyle('error') ]) ]) ]) ]) ]) ================================================ FILE: src/button-group/styles/dark.ts ================================================ import type { ButtonGroupTheme } from './light' import { commonDark } from '../../_styles/common' const buttonGroupDark: ButtonGroupTheme = { name: 'ButtonGroup', common: commonDark } export default buttonGroupDark ================================================ FILE: src/button-group/styles/index.ts ================================================ export { default as buttonGroupDark } from './dark' export { default as buttonGroupLight } from './light' export { buttonGroupRtl } from './rtl' ================================================ FILE: src/button-group/styles/light.ts ================================================ import type { Theme } from '../../_mixins' import { commonLight } from '../../_styles/common' export interface ButtonGroupThemeVars {} const buttonGroupLight: Theme<'ButtonGroup', ButtonGroupThemeVars> = { name: 'ButtonGroup', common: commonLight } export default buttonGroupLight export type ButtonGroupTheme = typeof buttonGroupLight ================================================ FILE: src/button-group/styles/rtl.ts ================================================ import type { RtlItem } from '../../config-provider/src/internal-interface' import rtlStyle from '../src/styles/rtl.cssr' export const buttonGroupRtl: RtlItem = { name: 'ButtonGroup', style: rtlStyle } ================================================ FILE: src/button-group/tests/ButtonGroup.spec.tsx ================================================ import { mount } from '@vue/test-utils' import { h } from 'vue' import { NButton } from '../../button/index' import { NButtonGroup } from '../index' describe('n-button-group', () => { it('should work with import on demand', () => { mount(NButtonGroup) }) it('should work with `button group`', async () => { const wrapper = mount(NButtonGroup, { slots: { default: () => [ h(NButton, null, { default: () => 'test1' }), h(NButton, null, { default: () => 'test2' }), h(NButton, null, { default: () => 'test3' }) ] } }) expect(wrapper.find('[role="group"]').classes()).toContain('n-button-group') expect(wrapper.findAll('button').length).toBe(3) await wrapper.setProps({ vertical: true }) expect(wrapper.find('[role="group"]').classes()).toContain( 'n-button-group--vertical' ) wrapper.unmount() }) }) ================================================ FILE: src/button-group/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NButtonGroup } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/calendar/demos/enUS/basic.demo.vue ================================================ # Basic A basic calendar. ================================================ FILE: src/calendar/demos/enUS/index.demo-entry.md ================================================ # Calendar How time flies. ## Demos ```demo basic.vue ``` ## API ### Calendar Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | default-value | `number` | `null` | Default selected date's timestamp. | | | is-date-disabled | `(timestamp: number) => boolean` | `undefined` | Validator of the date. | | | value | `number \| null` | `undefined` | Selected date's timestamp. | | | on-panel-change | `(info: { year: number, month: number })` | `undefined` | Callback on panel content is changed. | 2.24.0 | | on-update:value | `(timestamp: number, info: { year: number, month: number, date: number }) => void` | `undefined` | Callback on date is selected. `month` starts from 1. | | ## Calendar Slots | Name | Parameters | Description | Version | | --- | --- | --- | --- | | default | `({ year: number, month: number, date: number })` | Content to be rendered in each date. | | | header | `(props: { year: number, month: number })` | Header of the calendar. `month` starts from 1. | 2.29.1 | ================================================ FILE: src/calendar/demos/zhCN/basic.demo.vue ================================================ # 基础用法 一个普通的日历。 ================================================ FILE: src/calendar/demos/zhCN/index.demo-entry.md ================================================ # 日历 Calendar 时间过的快。 ## 演示 ```demo basic.vue ``` ## API ### Calendar Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | default-value | `number` | `null` | 默认被选中的日期的时间戳 | | | is-date-disabled | `(timestamp: number) => boolean` | `undefined` | 日期禁用的校验函数 | | | value | `number \| null` | `undefined` | 被选中的日期的时间戳 | | | on-panel-change | `(info: { year: number, month: number })` | `undefined` | 面板内容切换的回调 | 2.24.0 | | on-update:value | `(timestamp: number, info: { year: number, month: number, date: number }) => void` | `undefined` | 选中日期的回调，`month` 从 1 开始 | | ### Calendar Slots | 名称 | 参数 | 说明 | 版本 | | --- | --- | --- | --- | | default | `(props: { year: number, month: number, date: number })` | 每个日期中渲染的内容 | | | header | `(props: { year: number, month: number })` | 日历的标题，`month` 从 1 开始 | 2.29.1 | ================================================ FILE: src/calendar/index.ts ================================================ export { calendarProps, default as NCalendar } from './src/Calendar' export type { CalendarProps } from './src/Calendar' ================================================ FILE: src/calendar/src/Calendar.tsx ================================================ import type { CSSProperties, PropType, SlotsType, VNode } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils' import type { CalendarTheme } from '../styles' import type { CalendarDefaultSlotProps, CalendarHeaderSlotProps, DateItem, OnPanelChange, OnUpdateValue } from './interface' import { addMonths, format, getMonth, getYear, startOfDay, startOfMonth } from 'date-fns' import { useMergedState } from 'vooks' import { computed, defineComponent, Fragment, h, ref, toRef } from 'vue' import { NBaseIcon } from '../../_internal' import { ChevronLeftIcon, ChevronRightIcon } from '../../_internal/icons' import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins' import { call, resolveSlotWithTypedProps } from '../../_utils' import { NButton } from '../../button' import { NButtonGroup } from '../../button-group' import { dateArray } from '../../date-picker/src/utils' import { calendarLight } from '../styles' import style from './styles/index.cssr' export const calendarProps = { ...(useTheme.props as ThemeProps), isDateDisabled: Function as PropType<(date: number) => boolean | undefined>, value: Number, defaultValue: { type: Number as PropType, default: null }, onPanelChange: Function as PropType, 'onUpdate:value': [Function, Array] as PropType>, onUpdateValue: [Function, Array] as PropType> } as const export type CalendarProps = ExtractPublicPropTypes export interface CalendarSlots { default?: (props: CalendarDefaultSlotProps) => VNode[] header?: (props: CalendarHeaderSlotProps) => VNode[] } export default defineComponent({ name: 'Calendar', props: calendarProps, slots: Object as SlotsType, setup(props) { const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props) const themeRef = useTheme( 'Calendar', '-calendar', style, calendarLight, props, mergedClsPrefixRef ) const { localeRef, dateLocaleRef } = useLocale('DatePicker') const now = Date.now() // ts => timestamp const monthTsRef = ref(startOfMonth(props.defaultValue ?? now).valueOf()) const uncontrolledValueRef = ref(props.defaultValue || null) const mergedValueRef = useMergedState( toRef(props, 'value'), uncontrolledValueRef ) function doUpdateValue(value: number, time: DateItem): void { const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props if (onUpdateValue) { call(onUpdateValue, value, time) } if (_onUpdateValue) { call(_onUpdateValue, value, time) } uncontrolledValueRef.value = value } function handlePrevClick(): void { const monthTs = addMonths(monthTsRef.value, -1).valueOf() monthTsRef.value = monthTs props.onPanelChange?.({ year: getYear(monthTs), month: getMonth(monthTs) + 1 }) } function handleNextClick(): void { const monthTs = addMonths(monthTsRef.value, 1).valueOf() monthTsRef.value = monthTs props.onPanelChange?.({ year: getYear(monthTs), month: getMonth(monthTs) + 1 }) } function handleTodayClick(): void { const { value: monthTs } = monthTsRef const oldYear = getYear(monthTs) const oldMonth = getMonth(monthTs) const newMonthTs = startOfMonth(now).valueOf() monthTsRef.value = newMonthTs const newYear = getYear(newMonthTs) const newMonth = getMonth(newMonthTs) if (oldYear !== newYear || oldMonth !== newMonth) { props.onPanelChange?.({ year: newYear, month: newMonth + 1 }) } } const cssVarsRef = computed(() => { const { common: { cubicBezierEaseInOut }, self: { borderColor, borderColorModal, borderColorPopover, borderRadius, titleFontSize, textColor, titleFontWeight, titleTextColor, dayTextColor, fontSize, lineHeight, dateColorCurrent, dateTextColorCurrent, cellColorHover, cellColor, cellColorModal, barColor, cellColorPopover, cellColorHoverModal, cellColorHoverPopover } } = themeRef.value return { '--n-bezier': cubicBezierEaseInOut, '--n-border-color': borderColor, '--n-border-color-modal': borderColorModal, '--n-border-color-popover': borderColorPopover, '--n-border-radius': borderRadius, '--n-text-color': textColor, '--n-title-font-weight': titleFontWeight, '--n-title-font-size': titleFontSize, '--n-title-text-color': titleTextColor, '--n-day-text-color': dayTextColor, '--n-font-size': fontSize, '--n-line-height': lineHeight, '--n-date-color-current': dateColorCurrent, '--n-date-text-color-current': dateTextColorCurrent, '--n-cell-color': cellColor, '--n-cell-color-modal': cellColorModal, '--n-cell-color-popover': cellColorPopover, '--n-cell-color-hover': cellColorHover, '--n-cell-color-hover-modal': cellColorHoverModal, '--n-cell-color-hover-popover': cellColorHoverPopover, '--n-bar-color': barColor } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass('calendar', undefined, cssVarsRef, props) : undefined return { mergedClsPrefix: mergedClsPrefixRef, locale: localeRef, dateLocale: dateLocaleRef, now, mergedValue: mergedValueRef, monthTs: monthTsRef, dateItems: computed(() => { return dateArray( monthTsRef.value, mergedValueRef.value, now, localeRef.value.firstDayOfWeek, true ) }), doUpdateValue, handleTodayClick, handlePrevClick, handleNextClick, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { const { isDateDisabled, mergedClsPrefix, monthTs, cssVars, mergedValue, mergedTheme, $slots, locale: { monthBeforeYear, today }, dateLocale: { locale }, handleTodayClick, handlePrevClick, handleNextClick, onRender } = this onRender?.() const normalizedValue = mergedValue && startOfDay(mergedValue).valueOf() const year = getYear(monthTs) const calendarMonth = getMonth(monthTs) + 1 return (
    {resolveSlotWithTypedProps( $slots.header, { year, month: calendarMonth }, () => { const localeMonth = format(monthTs, 'MMMM', { locale }) return [ monthBeforeYear ? `${localeMonth} ${year}` : `${year} ${localeMonth}` ] } )}
    {{ default: () => ( <> {{ icon: () => ( {{ default: () => }} ) }} {{ default: () => today }} {{ icon: () => ( {{ default: () => }} ) }} ) }}
    {this.dateItems.map( ({ dateObject, ts, inCurrentMonth, isCurrentDate }, index) => { const { year, month, date } = dateObject const fullDate = format(ts, 'yyyy-MM-dd') // 'notInCurrentMonth' and 'disabled' are both disabled styles, but 'disabled''s cursor are not-allowed const notInCurrentMonth = !inCurrentMonth const disabled = isDateDisabled?.(ts) === true const selected = normalizedValue === startOfDay(ts).valueOf() return (
    { if (disabled) return const monthTs = startOfMonth(ts).valueOf() this.monthTs = monthTs if (notInCurrentMonth) { this.onPanelChange?.({ year: getYear(monthTs), month: getMonth(monthTs) + 1 }) } this.doUpdateValue(ts, { year, month: month + 1, date }) }} >
    {date}
    {index < 7 && (
    {format(ts, 'EEE', { locale })}
    )}
    {$slots.default?.({ year, month: month + 1, date })}
    ) } )}
    ) } }) ================================================ FILE: src/calendar/src/interface.ts ================================================ export type OnUpdateValue = (value: number, time: DateItem) => void export interface DateItem { year: number month: number date: number } export type OnPanelChange = (info: { year: number, month: number }) => void export interface CalendarDefaultSlotProps { year: number month: number date: number } export interface CalendarHeaderSlotProps { year: number month: number } ================================================ FILE: src/calendar/src/styles/index.cssr.ts ================================================ import { c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr' // vars: // --n-bezier // --n-border-color // --n-border-color-modal // --n-border-color-popover // --n-border-radius // --n-text-color // --n-title-font-weight // --n-title-font-size // --n-title-text-color // --n-day-text-color // --n-font-size // --n-line-height // --n-date-color-current // --n-cell-color // --n-cell-color-hover // --n-cell-color-hover-modal // --n-cell-color-hover-popover // --n-bar-color export default c([ cB('calendar', ` line-height: var(--n-line-height); font-size: var(--n-font-size); color: var(--n-text-color); height: 720px; display: flex; flex-direction: column; `, [ cB('calendar-prev-btn', ` cursor: pointer; `), cB('calendar-next-btn', ` cursor: pointer; `), cB('calendar-header', ` display: flex; align-items: center; line-height: 1; font-size: var(--n-title-font-size); padding: 0 0 18px 0; justify-content: space-between; `, [ cE('title', ` color: var(--n-title-text-color); font-weight: var(--n-title-font-weight); transition: color .3s var(--n-bezier); `), cE('extra', ` display: flex; align-items: center; `) ]), cB('calendar-dates', ` display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; border-radius: var(--n-border-radius); flex: 1; border-top: 1px solid; border-left: 1px solid; border-color: var(--n-border-color); transition: border-color .3s var(--n-bezier); `), cB('calendar-cell', ` box-sizing: border-box; padding: 10px; border-right: 1px solid; border-bottom: 1px solid; border-color: var(--n-border-color); cursor: pointer; position: relative; transition: color .3s var(--n-bezier), border-color .3s var(--n-bezier), background-color .3s var(--n-bezier); `, [ c('&:nth-child(7)', ` border-top-right-radius: var(--n-border-radius); `), c('&:nth-last-child(7)', ` border-bottom-left-radius: var(--n-border-radius); `), c('&:last-child', ` border-bottom-right-radius: var(--n-border-radius); `), c('&:hover', ` background-color: var(--n-cell-color-hover); `), cE('bar', ` position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background-color: #0000; transition: background-color .3s var(--n-bezier); `), cM('selected', [ cE('bar', ` background-color: var(--n-bar-color); `) ]), cB('calendar-date', ` transition: color .3s var(--n-bezier), border-color .3s var(--n-bezier), background-color .3s var(--n-bezier); color: var(--n-text-color); `, [ cE('date', ` color: var(--n-text-color); `) ]), cM('disabled, other-month', ` color: var(--n-day-text-color); `, [ cB('calendar-date', [ cE('date', ` color: var(--n-day-text-color); `) ]) ]), cM('disabled', ` cursor: not-allowed; `), cM('current', [ cB('calendar-date', [ cE('date', ` color: var(--n-date-text-color-current); background-color: var(--n-date-color-current); `) ]) ]), cB('calendar-date', ` position: relative; line-height: 1; display: flex; align-items: center; height: 1em; justify-content: space-between; padding-bottom: .75em; `, [ cE('date', ` border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: -0.4em; width: 1.8em; height: 1.8em; transition: color .3s var(--n-bezier), background-color .3s var(--n-bezier); `), cE('day', ` color: var(--n-day-text-color); transition: color .3s var(--n-bezier); `) ]) ]) ]), insideModal(cB('calendar', [ cB('calendar-dates', ` border-color: var(--n-border-color-modal); `), cB('calendar-cell', ` border-color: var(--n-border-color-modal); `, [ c('&:hover', ` background-color: var(--n-cell-color-hover-modal); `) ]) ])), insidePopover(cB('calendar', [ cB('calendar-dates', ` border-color: var(--n-border-color-popover); `), cB('calendar-cell', ` border-color: var(--n-border-color-popover); `, [ c('&:hover', ` background-color: var(--n-cell-color-hover-popover); `) ]) ])) ]) ================================================ FILE: src/calendar/styles/_common.ts ================================================ export default { titleFontSize: '22px' } ================================================ FILE: src/calendar/styles/dark.ts ================================================ import type { CalendarTheme } from './light' import { commonDark } from '../../_styles/common' import { buttonDark } from '../../button/styles' import { self } from './light' const calendarDark: CalendarTheme = { name: 'Calendar', common: commonDark, peers: { Button: buttonDark }, self } export default calendarDark ================================================ FILE: src/calendar/styles/index.ts ================================================ export { default as calendarDark } from './dark' export { default as calendarLight } from './light' export type { CalendarTheme, CalendarThemeVars } from './light' ================================================ FILE: src/calendar/styles/light.ts ================================================ import type { ThemeCommonVars } from '../../_styles/common' import { composite } from 'seemly' import { createTheme } from '../../_mixins' import { commonLight } from '../../_styles/common' import { buttonLight } from '../../button/styles' import commonVariables from './_common' export function self(vars: ThemeCommonVars) { const { borderRadius, fontSize, lineHeight, textColor2, textColor1, textColorDisabled, dividerColor, fontWeightStrong, primaryColor, baseColor, hoverColor, cardColor, modalColor, popoverColor } = vars return { ...commonVariables, borderRadius, borderColor: composite(cardColor, dividerColor), borderColorModal: composite(modalColor, dividerColor), borderColorPopover: composite(popoverColor, dividerColor), textColor: textColor2, titleFontWeight: fontWeightStrong, titleTextColor: textColor1, dayTextColor: textColorDisabled, fontSize, lineHeight, dateColorCurrent: primaryColor, dateTextColorCurrent: baseColor, cellColorHover: composite(cardColor, hoverColor), cellColorHoverModal: composite(modalColor, hoverColor), cellColorHoverPopover: composite(popoverColor, hoverColor), cellColor: cardColor, cellColorModal: modalColor, cellColorPopover: popoverColor, barColor: primaryColor } } export type CalendarThemeVars = ReturnType const calendarLight = createTheme({ name: 'Calendar', common: commonLight, peers: { Button: buttonLight }, self }) export default calendarLight export type CalendarTheme = typeof calendarLight ================================================ FILE: src/calendar/tests/Calendar.spec.tsx ================================================ import { mount } from '@vue/test-utils' import { addMonths, format, getYear, isYesterday } from 'date-fns' /* eslint-disable unused-imports/no-unused-vars */ import { h } from 'vue' import { NButton } from '../../button' import { NCalendar } from '../index' describe('n-calendar', () => { const now = Date.now() it('should work with import on demand', () => { mount(NCalendar) }) it('props.onUpdate has correct type', () => { ;(() => ( {}} /> ))() }) it('should follow `default-value` to display month', () => { // May 19 2022 const wrapper = mount(NCalendar, { props: { defaultValue: 1652956953562 } }) expect(wrapper.find('.n-calendar-header__title').text()).toContain('May') wrapper.unmount() }) it('should work with `default-value` prop', async () => { const wrapper = mount(NCalendar, { props: { defaultValue: now } }) expect(wrapper.find('.n-calendar-cell--selected').exists()).toBe(true) wrapper.unmount() }) it('should work with `value` prop', async () => { const wrapper = mount(NCalendar, { props: { value: now } }) expect(wrapper.find('.n-calendar-cell--selected').exists()).toBe(true) wrapper.unmount() }) it('should work with `is-date-disabled` prop', async () => { function disableFunction(timestamp: number): boolean { return isYesterday(timestamp) } const wrapper = mount(NCalendar, { props: { 'is-date-disabled': disableFunction } }) expect(wrapper.find('.n-calendar-cell--disabled').exists()).toBe(true) wrapper.unmount() }) it('should work with `on-update:value` prop', async () => { const onUpdate = vi.fn() const wrapper = mount(NCalendar, { props: { 'on-update:value': onUpdate } }) await wrapper.findAll('.n-calendar-date')[1].trigger('click') expect(onUpdate).toHaveBeenCalled() wrapper.unmount() }) it('should work with clicked `prev` and `next`', async () => { const wrapper = mount(NCalendar, { props: { defaultValue: now } }) const nowDate = wrapper.find('.n-calendar-header__title').text() const buttons = wrapper.findAllComponents(NButton) await buttons[0].trigger('click') const prevDate = addMonths(now, -1) expect(wrapper.find('.n-calendar-header__title').text()).toBe( `${format(prevDate, 'MMMM')} ${getYear(prevDate)}` ) await buttons[1].trigger('click') expect(wrapper.find('.n-calendar-header__title').text()).toBe(nowDate) expect( wrapper .find('.n-calendar-cell--current') .find('.n-calendar-date__date') .attributes('title') ).toBe(format(now, 'yyyy-MM-dd')) await buttons[2].trigger('click') const nextDate = addMonths(now, 1) expect(wrapper.find('.n-calendar-header__title').text()).toBe( `${format(nextDate, 'MMMM')} ${getYear(nextDate)}` ) wrapper.unmount() }) }) ================================================ FILE: src/calendar/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NCalendar } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/card/demos/enUS/basic.demo.vue ================================================ # Basic A basic card. ================================================ FILE: src/card/demos/enUS/border.demo.vue ================================================ # Border Card can be used without border. ================================================ FILE: src/card/demos/enUS/closable.demo.vue ================================================ # Closable You may need this when using it in a modal. ================================================ FILE: src/card/demos/enUS/content-scrollable.demo.vue ================================================ # Content Scroll Enable `content-scrollable` to keep scrolling inside the content area only. Header and footer stay fixed. It is usually used with a fixed card height. ================================================ FILE: src/card/demos/enUS/cover.demo.vue ================================================ # Cover Card can have a cover. ================================================ FILE: src/card/demos/enUS/custom-style.demo.vue ================================================ # Custom Card provides `content-style`, `header-style`, `footer-style` to help you customize style. For example you want an card with no padding to put whatever you want. ================================================ FILE: src/card/demos/enUS/embedded.demo.vue ================================================ # Embedded effect In light mode, sometimes you may need to make background a bit darker to distinguish card from white background. ================================================ FILE: src/card/demos/enUS/hoverable.demo.vue ================================================ # Hoverable ================================================ FILE: src/card/demos/enUS/index.demo-entry.md ================================================ # Card Just put something in it. ## Demos ```demo basic.vue size.vue cover.vue hoverable.vue slots.vue border.vue segment.vue closable.vue no-title.vue content-scrollable.vue loading.vue custom-style.vue embedded.vue ``` ## Card ### Card Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | action | `() => VNodeChild` | `undefined` | Operating area content, must be a render function. | 2.38.2 | | bordered | `boolean` | `true` | Whether to show the card border. | | | closable | `boolean` | `false` | Is it allowed to close. | | | close-focusable | `boolean` | `false` | Whether the close button can be focused. | 2.43.0 | | content | `string \| (() => VNodeChild)` | `undefined` | Card content, can be a render function. | 2.38.2 | | content-class | `string` | `undefined` | The class of the card content area. | 2.36.0 | | content-scrollable | `boolean` | `false` | Whether only the card content area is scrollable (recommended with fixed height). | 2.44.0 | | content-style | `Object \| string` | `undefined` | The style of the card content area. | | | cover | `() => VNodeChild` | `undefined` | Cover content, must be a render function. | 2.38.2 | | embedded | `boolean` | `false` | Use a darker background color to show the embedding effect (only for bright themes) | | | footer | `() => VNodeChild` | `undefined` | Footer content, must be a render function. | 2.38.2 | | footer-class | `string` | `undefined` | The class of the bottom area of the card. | 2.36.0 | | footer-style | `Object \| string` | `undefined` | The style of the bottom area of the card. | | | header-class | `string` | `undefined` | The class of the card head area. | 2.36.0 | | header-style | `Object \| string` | `undefined` | The style of the card head area. | | | header-extra | `() => VNodeChild` | `undefined` | Header extra content, must be a render function. | 2.38.2 | | header-extra-class | `string` | `undefined` | The class of the card head extra area. | 2.36.0 | | header-extra-style | `Object \| string` | `undefined` | The style of the card head extra area. | 2.25.0 | | hoverable | `boolean` | `false` | Whether to show shadow when hovering on the card. | | | segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' }` | `false` | Segment divider settings of the card. | | | size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | Card size. | | | tag | `string` | `'div'` | What tag need the card be rendered as. | 2.34.3 | | title | `string \| (() => VNodeChild)` | `undefined` | Card title. | Render function since 2.38.2 | | on-close | `() => void` | `undefined` | Callback function triggered upon closing the card. | | ### Card Slots | Name | Parameters | Description | | ------------ | ---------- | ----------------------- | | cover | `()` | Cover content. | | header | `()` | Header content. | | header-extra | `()` | Header extra content. | | default | `()` | Card content. | | footer | `()` | Footer content. | | action | `()` | Operating area content. | ================================================ FILE: src/card/demos/enUS/loading.demo.vue ================================================ # Loading Use `n-skeleton` to simulate loading effect. ================================================ FILE: src/card/demos/enUS/no-title.demo.vue ================================================ # No title Nobody said a card must have a title. ================================================ FILE: src/card/demos/enUS/segment.demo.vue ================================================ # Segmented `content`, `footer` can be segmented or `soft` segmented. `action` can be segmented. Segment border will appear at the top of segmented parts. ================================================ FILE: src/card/demos/enUS/size.demo.vue ================================================ # Size Card has `small`, `medium`, `large`, `huge` sizes. ================================================ FILE: src/card/demos/enUS/slots.demo.vue ================================================ # Slots Card has many slots to help you write less code. ================================================ FILE: src/card/demos/zhCN/basic.demo.vue ================================================ # 基础用法 基础卡片 ================================================ FILE: src/card/demos/zhCN/border.demo.vue ================================================ # 边框 卡片可以没有边框。 ================================================ FILE: src/card/demos/zhCN/closable.demo.vue ================================================ # 可关闭 用于 Modal 的时候，你可能需要这个属性。 ================================================ FILE: src/card/demos/zhCN/content-scrollable.demo.vue ================================================ # 内容滚动 开启 `content-scrollable` 后，卡片会把滚动限制在内容区，头部和底部不会跟着滚动。通常配合固定高度使用。 ================================================ FILE: src/card/demos/zhCN/cover.demo.vue ================================================ # 封面 卡片可以有封面。 ================================================ FILE: src/card/demos/zhCN/custom-style.demo.vue ================================================ # 自定义样式 卡片提供 `content-style`、`header-style`、`footer-style` 来帮助你自定义样式，比如你想要一个没有 padding 的卡片来往里面放一些乱七八糟的东西。 ================================================ FILE: src/card/demos/zhCN/embedded-debug.demo.vue ================================================ # embedded debug ================================================ FILE: src/card/demos/zhCN/embedded.demo.vue ================================================ # 嵌入效果 在亮色模式下，有的时候你希望背景色暗一点，来和纯色背景分割。 ================================================ FILE: src/card/demos/zhCN/hoverable.demo.vue ================================================ # 可悬浮 ================================================ FILE: src/card/demos/zhCN/index.demo-entry.md ================================================ # 卡片 Card 放点东西进去。 ## 演示 ```demo basic.vue size.vue cover.vue hoverable.vue slots.vue border.vue segment.vue closable.vue no-title.vue content-scrollable.vue loading.vue custom-style.vue embedded.vue rtl-debug.vue embedded-debug.vue ``` ## API ### Card Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | action | `() => VNodeChild` | `undefined` | 操作区域内容，需要是 render 函数 | 2.38.2 | | bordered | `boolean` | `true` | 是否显示卡片边框 | | | closable | `boolean` | `false` | 是否允许关闭 | | | close-focusable | `boolean` | `false` | 关闭按钮是否可以聚焦 | 2.43.0 | | content | `string \| (() => VNodeChild)` | `undefined` | 卡片内容，可以是 render 函数 | 2.38.2 | | content-class | `string` | `undefined` | 卡片内容区域的类名 | 2.36.0 | | content-scrollable | `boolean` | `false` | 是否仅让卡片内容区域可滚动（建议配合固定高度） | 2.44.0 | | content-style | `Object \| string` | `undefined` | 卡片内容区域的样式 | | | cover | `() => VNodeChild` | `undefined` | 覆盖内容，需要是 render 函数 | 2.38.2 | | embedded | `boolean` | `false` | 使用更深的背景色展现嵌入效果，只对亮色主题生效 | | | footer | `() => VNodeChild` | `undefined` | 底部内容 | 2.38.2 | | footer-class | `string` | `undefined` | 卡片底部区域的类名 | 2.36.0 | | footer-style | `Object \| string` | `undefined` | 卡片底部区域的样式 | | | header-class | `string` | `undefined` | 卡片头部区域的类名 | 2.36.0 | | header-style | `Object \| string` | `undefined` | 卡片头部区域的样式 | | | header-extra | `() => VNodeChild` | `undefined` | 头部额外内容，需要是 render 函数 | 2.38.2 | | header-extra-class | `string` | `undefined` | 卡片头部额外内容的类名 | 2.36.0 | | header-extra-style | `Object \| string` | `undefined` | 卡片头部额外内容的样式 | 2.25.0 | | hoverable | `boolean` | `false` | 卡片是否可悬浮 | | | segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' }` | `false` | 卡片的分段区域设置 | | | size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | 卡片的尺寸 | | | tag | `string` | `'div'` | 卡片组件要渲染为什么标签 | 2.34.3 | | title | `string \| (() => VNodeChild)` | `undefined` | 卡片的标题，可以是 render 函数 | 2.38.2 支持 render 函数 | | on-close | `() => void` | `undefined` | 点击卡片关闭图标时的回调 | | ### Card Slots | 名称 | 参数 | 说明 | | ------------ | ---- | ------------ | | cover | `()` | 覆盖内容 | | header | `()` | 头部内容 | | header-extra | `()` | 头部额外内容 | | default | `()` | 卡片内容 | | footer | `()` | 底部内容 | | action | `()` | 操作区域内容 | ================================================ FILE: src/card/demos/zhCN/loading.demo.vue ================================================ # 加载中 使用 `n-skeleton` 模拟加载效果。 ================================================ FILE: src/card/demos/zhCN/no-title.demo.vue ================================================ # 没有标题 谁说卡片一定要有标题呢。 ================================================ FILE: src/card/demos/zhCN/rtl-debug.demo.vue ================================================ # Rtl Debug ================================================ FILE: src/card/demos/zhCN/segment.demo.vue ================================================ # 分段 `content` 和 `footer` 可以被分段或 `soft` 分段，`action` 可以被分段。分段分割线会在区域的上方出现。 ================================================ FILE: src/card/demos/zhCN/size.demo.vue ================================================ # 尺寸 卡片有 `small`、`medium`、`large`、`huge` 尺寸。 ================================================ FILE: src/card/demos/zhCN/slots.demo.vue ================================================ # 插槽 卡片有很多插槽，希望能帮你少写点代码。 ================================================ FILE: src/card/index.ts ================================================ export { cardProps, default as NCard } from './src/Card' export type { CardProps, CardSegmented, CardSlots } from './src/Card' export type * from './src/public-types' ================================================ FILE: src/card/src/Card.tsx ================================================ import type { CSSProperties, PropType, SlotsType, VNode, VNodeChild } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils' import type { CardTheme } from '../styles' import type { CardSize } from './public-types' import { getPadding } from 'seemly' import { computed, defineComponent, h } from 'vue' import { NBaseClose, NScrollbar } from '../../_internal' import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { useRtl } from '../../_mixins/use-rtl' import { call, createKey, keysOf, resolveWrappedSlot } from '../../_utils' import { ensureValidVNode } from '../../_utils/vue/resolve-slot' import { cardLight } from '../styles' import style from './styles/index.cssr' export interface CardSegmented { content?: boolean | 'soft' footer?: boolean | 'soft' action?: boolean | 'soft' } export const cardBaseProps = { title: [String, Function] as PropType VNodeChild)>, contentClass: String, contentStyle: [Object, String] as PropType, contentScrollable: Boolean, headerClass: String, headerStyle: [Object, String] as PropType, headerExtraClass: String, headerExtraStyle: [Object, String] as PropType, footerClass: String, footerStyle: [Object, String] as PropType, embedded: Boolean, segmented: { type: [Boolean, Object] as PropType, default: false }, size: String as PropType, bordered: { type: Boolean, default: true }, closable: Boolean, hoverable: Boolean, role: String, onClose: [Function, Array] as PropType void>>, tag: { type: String as PropType, default: 'div' }, cover: Function as PropType<() => VNodeChild>, content: [String, Function] as PropType VNodeChild)>, footer: Function as PropType<() => VNodeChild>, action: Function as PropType<() => VNodeChild>, headerExtra: Function as PropType<() => VNodeChild>, closeFocusable: Boolean } as const export const cardBasePropKeys = keysOf(cardBaseProps) export const cardProps = { ...(useTheme.props as ThemeProps), ...cardBaseProps } export type CardProps = ExtractPublicPropTypes export interface CardSlots { default?: () => VNode[] cover?: () => VNode[] header?: () => VNode[] 'header-extra'?: () => VNode[] footer?: () => VNode[] action?: () => VNode[] } export default defineComponent({ name: 'Card', props: cardProps, slots: Object as SlotsType, setup(props) { const handleCloseClick = (): void => { const { onClose } = props if (onClose) { call(onClose) } } const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef, mergedComponentPropsRef } = useConfig(props) const themeRef = useTheme( 'Card', '-card', style, cardLight, props, mergedClsPrefixRef ) const rtlEnabledRef = useRtl('Card', mergedRtlRef, mergedClsPrefixRef) const mergedSizeRef = computed(() => { return ( props.size || mergedComponentPropsRef?.value?.Card?.size || 'medium' ) }) const cssVarsRef = computed(() => { const mergedSize = mergedSizeRef.value const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, lineHeight, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeBorderRadius, closeIconSize, closeSize, boxShadow, colorPopover, colorEmbedded, colorEmbeddedModal, colorEmbeddedPopover, [createKey('padding', mergedSize)]: padding, [createKey('fontSize', mergedSize)]: fontSize, [createKey('titleFontSize', mergedSize)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = getPadding(padding) return { '--n-bezier': cubicBezierEaseInOut, '--n-border-radius': borderRadius, '--n-color': color, '--n-color-modal': colorModal, '--n-color-popover': colorPopover, '--n-color-embedded': colorEmbedded, '--n-color-embedded-modal': colorEmbeddedModal, '--n-color-embedded-popover': colorEmbeddedPopover, '--n-color-target': colorTarget, '--n-text-color': textColor, '--n-line-height': lineHeight, '--n-action-color': actionColor, '--n-title-text-color': titleTextColor, '--n-title-font-weight': titleFontWeight, '--n-close-icon-color': closeIconColor, '--n-close-icon-color-hover': closeIconColorHover, '--n-close-icon-color-pressed': closeIconColorPressed, '--n-close-color-hover': closeColorHover, '--n-close-color-pressed': closeColorPressed, '--n-border-color': borderColor, '--n-box-shadow': boxShadow, // size '--n-padding-top': paddingTop, '--n-padding-bottom': paddingBottom, '--n-padding-left': paddingLeft, '--n-font-size': fontSize, '--n-title-font-size': titleFontSize, '--n-close-size': closeSize, '--n-close-icon-size': closeIconSize, '--n-close-border-radius': closeBorderRadius } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( 'card', computed(() => { return mergedSizeRef.value[0] }), cssVarsRef, props ) : undefined return { rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, handleCloseClick, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, embedded, tag: Component, $slots } = this onRender?.() return ( {resolveWrappedSlot($slots.cover, (children) => { const mergedChildren = this.cover ? ensureValidVNode([this.cover()]) : children return ( mergedChildren && (
    {mergedChildren}
    ) ) })} {resolveWrappedSlot($slots.header, (children) => { const { title } = this const mergedChildren = title ? ensureValidVNode( typeof title === 'function' ? [title()] : [title] ) : children return mergedChildren || this.closable ? (
    {mergedChildren}
    {resolveWrappedSlot($slots['header-extra'], (children) => { const mergedChildren = this.headerExtra ? ensureValidVNode([this.headerExtra()]) : children return ( mergedChildren && (
    {mergedChildren}
    ) ) })} {this.closable && ( )}
    ) : null })} {resolveWrappedSlot($slots.default, (children) => { const { content } = this const mergedChildren = content ? ensureValidVNode( typeof content === 'function' ? [content()] : [content] ) : children return mergedChildren ? ( this.contentScrollable ? ( {mergedChildren} ) : (
    {mergedChildren}
    ) ) : null })} {resolveWrappedSlot($slots.footer, (children) => { const mergedChildren = this.footer ? ensureValidVNode([this.footer()]) : children return ( mergedChildren && (
    {mergedChildren}
    ) ) })} {resolveWrappedSlot($slots.action, (children) => { const mergedChildren = this.action ? ensureValidVNode([this.action()]) : children return ( mergedChildren && (
    {mergedChildren}
    ) ) })}     ) } }) ================================================ FILE: src/card/src/public-types.ts ================================================ export type CardSize = 'small' | 'medium' | 'large' | 'huge' ================================================ FILE: src/card/src/styles/index.cssr.ts ================================================ import { asModal, c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr' const contentBaseStyle = cB('card-content', ` flex: 1; min-width: 0; box-sizing: border-box; padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left); font-size: var(--n-font-size); `) // vars: // --n-bezier // --n-border-radius // --n-color // --n-color-modal // --n-color-popover // --n-text-color // --n-line-height // --n-padding-top // --n-padding-bottom // --n-padding-left // --n-font-size // --n-action-color // --n-title-font-weight // --n-title-font-size // --n-title-text-color // --n-close-size // --n-close-icon-size // --n-close-color-hover // --n-close-color-pressed // --n-close-icon-color // --n-close-icon-color-hover // --n-close-icon-color-pressed // --n-border-color // --n-box-shadow // --n-color-embedded // --n-color-embedded-modal // --n-color-embedded-popover export default c([ cB('card', ` font-size: var(--n-font-size); line-height: var(--n-line-height); display: flex; flex-direction: column; width: 100%; box-sizing: border-box; position: relative; border-radius: var(--n-border-radius); background-color: var(--n-color); color: var(--n-text-color); word-break: break-word; transition: color .3s var(--n-bezier), background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier), border-color .3s var(--n-bezier); `, [ asModal({ background: 'var(--n-color-modal)' }), cM('hoverable', [ c('&:hover', 'box-shadow: var(--n-box-shadow);') ]), cM('content-segmented', [ c('>', [ cB('card-content', ` padding-top: var(--n-padding-bottom); `), cE('content-scrollbar', [ c('>', [ cB('scrollbar-container', [ c('>', [ cB('card-content', ` padding-top: var(--n-padding-bottom); `) ]) ]) ]) ]) ]) ]), cM('content-soft-segmented', [ c('>', [ cB('card-content', ` margin: 0 var(--n-padding-left); padding: var(--n-padding-bottom) 0; `), cE('content-scrollbar', [ c('>', [ cB('scrollbar-container', [ c('>', [ cB('card-content', ` margin: 0 var(--n-padding-left); padding: var(--n-padding-bottom) 0; `) ]) ]) ]) ]) ]) ]), cM('footer-segmented', [ c('>', [ cE('footer', ` padding-top: var(--n-padding-bottom); `) ]) ]), cM('footer-soft-segmented', [ c('>', [ cE('footer', ` padding: var(--n-padding-bottom) 0; margin: 0 var(--n-padding-left); `) ]) ]), c('>', [ cB('card-header', ` box-sizing: border-box; display: flex; align-items: center; font-size: var(--n-title-font-size); padding: var(--n-padding-top) var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left); `, [ cE('main', ` font-weight: var(--n-title-font-weight); transition: color .3s var(--n-bezier); flex: 1; min-width: 0; color: var(--n-title-text-color); `), cE('extra', ` display: flex; align-items: center; font-size: var(--n-font-size); font-weight: 400; transition: color .3s var(--n-bezier); color: var(--n-text-color); `), cE('close', ` margin: 0 0 0 8px; transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); `) ]), cE('action', ` box-sizing: border-box; transition: background-color .3s var(--n-bezier), border-color .3s var(--n-bezier); background-clip: padding-box; background-color: var(--n-action-color); `), contentBaseStyle, cB('card-content', [ c('&:first-child', ` padding-top: var(--n-padding-bottom); `) ]), cE('content-scrollbar', ` display: flex; flex-direction: column; `, [ c('>', [ cB('scrollbar-container', [ c('>', [ contentBaseStyle ]) ]) ]), c('&:first-child >', [ cB('scrollbar-container', [ c('>', [ cB('card-content', ` padding-top: var(--n-padding-bottom); `) ]) ]) ]) ]), cE('footer', ` box-sizing: border-box; padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left); font-size: var(--n-font-size); `, [ c('&:first-child', ` padding-top: var(--n-padding-bottom); `) ]), cE('action', ` background-color: var(--n-action-color); padding: var(--n-padding-bottom) var(--n-padding-left); border-bottom-left-radius: var(--n-border-radius); border-bottom-right-radius: var(--n-border-radius); `) ]), cB('card-cover', ` overflow: hidden; width: 100%; border-radius: var(--n-border-radius) var(--n-border-radius) 0 0; `, [ c('img', ` display: block; width: 100%; `) ]), cM('bordered', ` border: 1px solid var(--n-border-color); `, [ c('&:target', 'border-color: var(--n-color-target);') ]), cM('action-segmented', [ c('>', [ cE('action', [ c('&:not(:first-child)', ` border-top: 1px solid var(--n-border-color); `) ]) ]) ]), cM('content-segmented, content-soft-segmented', [ c('>', [ cB('card-content', ` transition: border-color 0.3s var(--n-bezier); `, [ c('&:not(:first-child)', ` border-top: 1px solid var(--n-border-color); `) ]), cE('content-scrollbar', ` transition: border-color 0.3s var(--n-bezier); `, [ c('&:not(:first-child)', ` border-top: 1px solid var(--n-border-color); `) ]) ]) ]), cM('footer-segmented, footer-soft-segmented', [ c('>', [ cE('footer', ` transition: border-color 0.3s var(--n-bezier); `, [ c('&:not(:first-child)', ` border-top: 1px solid var(--n-border-color); `) ]) ]) ]), cM('embedded', ` background-color: var(--n-color-embedded); `) ]), insideModal(cB('card', ` background: var(--n-color-modal); `, [ cM('embedded', ` background-color: var(--n-color-embedded-modal); `) ])), insidePopover(cB('card', ` background: var(--n-color-popover); `, [ cM('embedded', ` background-color: var(--n-color-embedded-popover); `) ])) ]) ================================================ FILE: src/card/src/styles/rtl.cssr.ts ================================================ import { c, cB, cE, cM } from '../../../_utils/cssr' export default cB('card', [ cM('rtl', ` direction: rtl; `), c('>', [ cB('card-header', [ c('>', [ cE('close', ` margin: 0 8px 0 0; `) ]) ]) ]) ]) ================================================ FILE: src/card/styles/_common.ts ================================================ export default { paddingSmall: '12px 16px 12px', paddingMedium: '19px 24px 20px', paddingLarge: '23px 32px 24px', paddingHuge: '27px 40px 28px', titleFontSizeSmall: '16px', titleFontSizeMedium: '18px', titleFontSizeLarge: '18px', titleFontSizeHuge: '18px', closeIconSize: '18px', closeSize: '22px' } ================================================ FILE: src/card/styles/dark.ts ================================================ import type { CardTheme } from './light' import { commonDark } from '../../_styles/common' import { self } from './light' const cardDark: CardTheme = { name: 'Card', common: commonDark, self(vars) { const commonSelf = self(vars) const { cardColor, modalColor, popoverColor } = vars commonSelf.colorEmbedded = cardColor commonSelf.colorEmbeddedModal = modalColor commonSelf.colorEmbeddedPopover = popoverColor return commonSelf } } export default cardDark ================================================ FILE: src/card/styles/index.ts ================================================ export { default as cardDark } from './dark' export { default as cardLight } from './light' export type { CardTheme, CardThemeVars } from './light' export { cardRtl } from './rtl' ================================================ FILE: src/card/styles/light.ts ================================================ import type { Theme } from '../../_mixins' import type { ThemeCommonVars } from '../../_styles/common' import { commonLight } from '../../_styles/common' import commonVariables from './_common' export function self(vars: ThemeCommonVars) { const { primaryColor, borderRadius, lineHeight, fontSize, cardColor, textColor2, textColor1, dividerColor, fontWeightStrong, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, modalColor, boxShadow1, popoverColor, actionColor } = vars return { ...commonVariables, lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, colorEmbeddedModal: actionColor, colorEmbeddedPopover: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor, titleFontWeight: fontWeightStrong, closeColorHover, closeColorPressed, closeBorderRadius: borderRadius, closeIconColor, closeIconColorHover, closeIconColorPressed, fontSizeSmall: fontSize, fontSizeMedium: fontSize, fontSizeLarge: fontSize, fontSizeHuge: fontSize, boxShadow: boxShadow1, borderRadius } } export type CardThemeVars = ReturnType const cardLight: Theme<'Card', CardThemeVars> = { name: 'Card', common: commonLight, self } export default cardLight export type CardTheme = typeof cardLight ================================================ FILE: src/card/styles/rtl.ts ================================================ import type { RtlItem } from '../../config-provider/src/internal-interface' import rtlStyle from '../src/styles/rtl.cssr' export const cardRtl: RtlItem = { name: 'Card', style: rtlStyle } ================================================ FILE: src/card/tests/Card.spec.ts ================================================ import { mount } from '@vue/test-utils' import { NCard } from '../index' describe('n-card', () => { it('should work with import on demand', () => { mount(NCard) }) it('should work with `title` prop', async () => { const wrapper = mount(NCard) expect(wrapper.find('.n-card-header').exists()).toBe(false) await wrapper.setProps({ title: 'test' }) expect(wrapper.find('.n-card-header').exists()).toBe(true) expect(wrapper.find('.n-card-header__main').text()).toBe('test') wrapper.unmount() }) it('should work with `size` prop', async () => { const wrapper = mount(NCard) await wrapper.setProps({ size: 'small' }) expect(wrapper.find('.n-card').attributes('style')).toMatchSnapshot() wrapper.unmount() }) it('should work with `hoverable` prop', async () => { const wrapper = mount(NCard, { props: { hoverable: true } }) expect(wrapper.find('.n-card').classes()).toContain('n-card--hoverable') wrapper.unmount() }) it('should work with `embedded` prop', async () => { const wrapper = mount(NCard) expect(wrapper.find('.n-card').attributes('style')).toContain( '--n-color: #fff' ) await wrapper.setProps({ embedded: true }) expect(wrapper.find('.n-card').attributes('style')).toContain( '--n-color-embedded: rgb(250, 250, 252)' ) wrapper.unmount() }) it('should work with `segmented` prop', async () => { const wrapper = mount(NCard) expect(wrapper.find('.n-card').classes()).not.toContain( 'n-card--content-segmented' ) await wrapper.setProps({ segmented: { content: true, footer: 'soft' } }) expect(wrapper.find('.n-card').classes()).toContain( 'n-card--content-segmented' ) wrapper.unmount() }) it('should work with `slots` ', async () => { const wrapper = mount(NCard, { slots: { cover: () => 'cover', header: () => 'header', 'header-extra': () => 'header-extra', default: () => 'content', footer: () => 'footer', action: () => 'action' } }) expect(wrapper.find('.n-card-cover').exists()).toBe(true) expect(wrapper.find('.n-card-cover').text()).toBe('cover') expect(wrapper.find('.n-card-header').exists()).toBe(true) expect(wrapper.find('.n-card-header__main').text()).toBe('header') expect(wrapper.find('.n-card-header__extra').exists()).toBe(true) expect(wrapper.find('.n-card-header__extra').text()).toBe('header-extra') expect(wrapper.find('.n-card-content').exists()).toBe(true) expect(wrapper.find('.n-card-content').text()).toBe('content') expect(wrapper.find('.n-card__footer').exists()).toBe(true) expect(wrapper.find('.n-card__footer').text()).toBe('footer') expect(wrapper.find('.n-card__action').exists()).toBe(true) expect(wrapper.find('.n-card__action').text()).toBe('action') wrapper.unmount() }) it('should work with `bordered` prop', async () => { const wrapper = mount(NCard, { props: { bordered: false } }) expect(wrapper.find('.n-card--bordered').exists()).toBe(false) wrapper.unmount() }) it('should work with `closable` and `on-close` prop', async () => { const onClose = vi.fn() const wrapper = mount(NCard, { props: { closable: true, onClose } }) expect(wrapper.find('.n-card-header__close').exists()).toBe(true) await wrapper.find('.n-card-header__close').trigger('click') expect(onClose).toHaveBeenCalled() wrapper.unmount() }) it('should work with `header-style` prop', async () => { const testStyle = 'padding: 0px;' const wrapper = mount(NCard, { props: { title: 'test', headerStyle: testStyle }, slots: { default: () => 'test' } }) expect(wrapper.find('.n-card-header').attributes('style')).toContain( testStyle ) wrapper.unmount() }) it('should work with `content-style` prop', async () => { const testStyle = 'padding: 0px;' const wrapper = mount(NCard, { props: { contentStyle: testStyle }, slots: { default: () => 'test' } }) expect(wrapper.find('.n-card-content').attributes('style')).toContain( testStyle ) wrapper.unmount() }) it('should work with `footer-style` prop', async () => { const testStyle = 'padding: 0px;' const wrapper = mount(NCard, { props: { footerStyle: testStyle }, slots: { footer: () => 'test' } }) expect(wrapper.find('.n-card__footer').attributes('style')).toContain( testStyle ) wrapper.unmount() }) it('should work with `header-extra-style` prop', async () => { const testStyle = 'padding: 0px;' const wrapper = mount(NCard, { props: { headerExtraStyle: testStyle }, slots: { header: () => 'test-header', 'header-extra': () => 'test-header-extra' } }) expect(wrapper.find('.n-card-header__extra').attributes('style')).toContain( testStyle ) wrapper.unmount() }) }) ================================================ FILE: src/card/tests/__snapshots__/Card.spec.ts.snap ================================================ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`n-card > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-color: #fff; --n-color-modal: #fff; --n-color-popover: #fff; --n-color-embedded: rgb(250, 250, 252); --n-color-embedded-modal: rgb(250, 250, 252); --n-color-embedded-popover: rgb(250, 250, 252); --n-color-target: #18a058; --n-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-action-color: rgb(250, 250, 252); --n-title-text-color: rgb(31, 34, 37); --n-title-font-weight: 500; --n-close-icon-color: rgba(102, 102, 102, 1); --n-close-icon-color-hover: rgba(102, 102, 102, 1); --n-close-icon-color-pressed: rgba(102, 102, 102, 1); --n-close-color-hover: rgba(0, 0, 0, .09); --n-close-color-pressed: rgba(0, 0, 0, .13); --n-border-color: rgb(239, 239, 245); --n-box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04); --n-padding-top: 12px; --n-padding-bottom: 12px; --n-padding-left: 16px; --n-font-size: 14px; --n-title-font-size: 16px; --n-close-size: 22px; --n-close-icon-size: 18px; --n-close-border-radius: 3px;"`; ================================================ FILE: src/card/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NCard } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/carousel/demos/enUS/arrow.demo.vue ================================================ # Arrow Set `show-arrow` to show the arrow。 ================================================ FILE: src/carousel/demos/enUS/autoplay.demo.vue ================================================ # Autoplay Set `autoplay`, it can autoplay。 ================================================ FILE: src/carousel/demos/enUS/basic.demo.vue ================================================ # Basic ================================================ FILE: src/carousel/demos/enUS/centered.demo.vue ================================================ # Centered Set `centered-slides` to center all `slides`, this is only useful when `effect` is `slide` and `card`. ================================================ FILE: src/carousel/demos/enUS/custom-arrow-and-dots.demo.vue ================================================ # Customzing arrow and dots ================================================ FILE: src/carousel/demos/enUS/custom-card.demo.vue ================================================ # Customize card You can use `next-slide-style` and `prev-slide-style` to adjust the ratio of front & back cards size ratio. ================================================ FILE: src/carousel/demos/enUS/custom-dots.demo.vue ================================================ # Custom Dots ================================================ FILE: src/carousel/demos/enUS/dots.demo.vue ================================================ # Dots Set `dot-type` to change the style of the dots. You can use `:show-dots="false"` to hide the dots. Set `dot-placement` to change the position of the dots. ================================================ FILE: src/carousel/demos/enUS/effect.demo.vue ================================================ # Effect If you want to customize the transition effect, you can use `transition-props` and set `effect` to `custom`. ================================================ FILE: src/carousel/demos/enUS/hover.demo.vue ================================================ # Hover Set the `trigger` to `hover` to trigger the switch when the mouse passes over the dots. ================================================ FILE: src/carousel/demos/enUS/index.demo-entry.md ================================================ # Carousel It's usually used to display good news. ## Demos ```demo basic.vue arrow.vue autoplay.vue dots.vue vertical.vue space-between.vue slides-per-view.vue slides-per-view-auto.vue centered.vue effect.vue transition-name.vue hover.vue keyboard.vue mousewheel.vue simulate-drag.vue custom-arrow-and-dots.vue custom-card.vue custom-dots.vue ``` ## API ### Carousel Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | autoplay | `boolean` | `false` | Whether to scroll automatically. | | | centered-slides | `boolean` | `false` | Whether to center the current view carousel. | 2.24.0 | | current-index | `number` | `undefined` | current index. | 2.24.0 | | default-index | `number` | `0` | default index. | 2.24.0 | | direction | `'horizontal' \| 'vertical'` | `'horizontal'` | Carousel shows the direction. | | | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Dot placement in the panel. | 2.24.0 | | dot-type | `'dot' \| 'line'` | `'dot'` | Dot style. | 2.24.0 | | draggable | `boolean` | `false` | Whether to switch the carousel by dragging the mouse. | 2.24.0 | | effect | `'slide' \| 'fade' \| 'card' \| 'custom'` | `'slide'` | Transition effect when switching between carousel. | 2.24.0, `'card'` 2.24.2 | | interval | `number` | `5000` | Auto play interval (ms). | | | keyboard | `boolean` | `false` | Whether to switch the carousel by pressing the key, it only works when the focus is on Dots. | 2.24.0 | | loop | `boolean` | `true` | Whether to loop. | 2.24.0 | | mousewheel | `boolean` | `false` | Whether to switch the carousel through the mouse wheel. | 2.24.0 | | next-slide-style | `object \| string` | `undefined` | Next slide's style. | 2.27.0 | | prev-slide-style | `object \| string` | `undefined` | Previous slide's style. | 2.27.0 | | show-arrow | `boolean` | `false` | Whether to show arrow buttons. | 2.24.0 | | show-dots | `boolean` | `true` | Whether to show dots. | 2.24.0 | | slides-per-view | `'auto' \| number` | `1` | Number of carousels displayed on per view. | 2.24.0 | | space-between | `number` | `0` | The spacing between the carousels. | 2.24.0 | | touchable | `boolean` | `true` | Whether to switch the carousel by touch. | 2.24.0 | | transition-style | `{ transitionDuration?: string, transitionTimingFunction?: string }` | `{ transitionDuration: '300ms' }` | The style of the transition effect. | 2.24.0 | | transition-props | `TransitionProps` | `undefined` | Custom transition effect properties, [reference](https://v3.vuejs.org/api/built-in-components.html#transition). | 2.24.0 | | trigger | `'click' \| 'hover'` | `'click'` | The method of manual switching. | | | on-update:current-index | `(currentIndex: number, lastIndex: number) => void` | `undefined` | Callback function when the current index changes. | 2.24.0 | ### Carousel Slots | Name | Parameters | Description | Version | | --- | --- | --- | --- | | default | `()` | Carousel content. | | arrow | `(info: { total: number, currentIndex: number, to: (index: number) => void, prev: () => void, next: () => void })` | Arrow. | 2.24.0 | | dots | `(info: { total: number, currentIndex: number, to: (index: number) => void })` | Dots. | 2.24.0 | ### Carousel Methods | Name | Type | Description | Version | | --- | --- | --- | --- | | to | `(index: number) => void` | Slide to index. | 2.24.0 | | prev | `() => void` | Slide to previous page. | 2.24.0 | | next | `() => void` | Slide to next page. | 2.24.0 | | getCurrentIndex | `() => number` | Get current index. | 2.24.0 | ================================================ FILE: src/carousel/demos/enUS/keyboard.demo.vue ================================================ # Keyboard Whether to switch the carousel by pressing the key, it is only valid when the focus is on Dots. ================================================ FILE: src/carousel/demos/enUS/mousewheel.demo.vue ================================================ # Mousewheel ================================================ FILE: src/carousel/demos/enUS/simulate-drag.demo.vue ================================================ # Simulate drag Carousel enable the `Touch` event simulation by default. If you need the carousel chart to respond to mouse drag, you can use `draggable` prop. ================================================ FILE: src/carousel/demos/enUS/slides-per-view-auto.demo.vue ================================================ # Auto slides per view ================================================ FILE: src/carousel/demos/enUS/slides-per-view.demo.vue ================================================ # Slides per view Please note that this prop will conflict with `loop`. If you need to customize the number of displays per view, then the `loop` prop will be disabled. ================================================ FILE: src/carousel/demos/enUS/space-between.demo.vue ================================================ # Space between ================================================ FILE: src/carousel/demos/enUS/transition-name.demo.vue ================================================ # Customizing transition If you want to customize the transition effect, you can use `transition-props` and set `effect` to `'custom'`. For transition props, see [reference](https://v3.vuejs.org/api/built-in-components.html#transition). ================================================ FILE: src/carousel/demos/enUS/vertical.demo.vue ================================================ # Vertical ================================================ FILE: src/carousel/demos/zhCN/arrow.demo.vue ================================================ # 箭头 设定 `show-arrow` 来显示箭头。 ================================================ FILE: src/carousel/demos/zhCN/autoplay.demo.vue ================================================ # 自动播放 设定 `autoplay` 然后它就能自己动了。 ================================================ FILE: src/carousel/demos/zhCN/basic.demo.vue ================================================ # 基础 ================================================ FILE: src/carousel/demos/zhCN/centered.demo.vue ================================================ # 居中 设定 `centered-slides` 来将所有的 `slide` 居中显示，这仅在 `effect` 为 `slide` 以及 `card` 的时候有用。 ================================================ FILE: src/carousel/demos/zhCN/custom-arrow-and-dots.demo.vue ================================================ # 自定义箭头以及控制点 ================================================ FILE: src/carousel/demos/zhCN/custom-card.demo.vue ================================================ # 自定义卡片效果 你可以使用 `next-slide-style` 和 `prev-slide-style` 来调整前后卡片的比例。 ================================================ FILE: src/carousel/demos/zhCN/custom-dots.demo.vue ================================================ # 自定义指示点 ================================================ FILE: src/carousel/demos/zhCN/dots.demo.vue ================================================ # 指示点 设定 `dot-type` 来更改指示器的样式，可以使用 `:show-dots="false"` 来隐藏指示点。 设定 `dot-placement` 来更改指示点的位置。 ================================================ FILE: src/carousel/demos/zhCN/effect.demo.vue ================================================ # 过渡效果 如果你想要自定义过渡效果，可以使用 `transition-props`，并把 `effect` 设置为 `custom`。 ================================================ FILE: src/carousel/demos/zhCN/hover.demo.vue ================================================ # 鼠标经过指示点切换轮播图 设定 `trigger` 为 `hover` 鼠标经过指示点时触发切换。 ================================================ FILE: src/carousel/demos/zhCN/index.demo-entry.md ================================================ # 轮播图 Carousel 一般用来播放一些好消息。 ## 演示 ```demo basic.vue arrow.vue autoplay.vue dots.vue vertical.vue space-between.vue slides-per-view.vue slides-per-view-auto.vue centered.vue effect.vue transition-name.vue hover.vue keyboard.vue mousewheel.vue simulate-drag.vue custom-arrow-and-dots.vue custom-card.vue custom-dots.vue ``` ## API ### Carousel Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | autoplay | `boolean` | `false` | 是否自动播放 | | | centered-slides | `boolean` | `false` | 是否居中显示当前页轮播图 | 2.24.0 | | current-index | `number` | `undefined` | 当前显示页 | 2.24.0 | | default-index | `number` | `0` | 默认显示页 | 2.24.0 | | direction | `'horizontal' \| 'vertical'` | `'horizontal'` | 轮播图显示的方向 | | | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | 轮播指示点位置 | 2.24.0 | | dot-type | `'dot' \| 'line'` | `'dot'` | 轮播指示点样式 | 2.24.0 | | draggable | `boolean` | `false` | 是否通过鼠标拖拽切换轮播图 | 2.24.0 | | effect | `'slide' \| 'fade' \| 'card' \| 'custom'` | `'slide'` | 轮播图切换时的过渡效果 | 2.24.0, `'card'` 2.24.2 | | interval | `number` | `5000` | 自动播放的间隔（ms） | | | keyboard | `boolean` | `false` | 是否通过按键切换轮播图，只有焦点在 Dots 上时才起作用 | 2.24.0 | | loop | `boolean` | `true` | 是否循环播放 | 2.24.0 | | mousewheel | `boolean` | `false` | 是否通过鼠标滚轮切换轮播图 | 2.24.0 | | next-slide-style | `object \| string` | `undefined` | 下一张轮播图的样式 | 2.27.0 | | prev-slide-style | `object \| string` | `undefined` | 上一张轮播图的样式 | 2.27.0 | | slides-per-view | `'auto' \| number` | `1` | 每一页显示的轮播图数量 | 2.24.0 | | space-between | `number` | `0` | 轮播图之间的间距 | 2.24.0 | | show-arrow | `boolean` | `false` | 是否显示箭头按钮 | 2.24.0 | | show-dots | `boolean` | `true` | 是否展示指示点 | 2.24.0 | | touchable | `boolean` | `true` | 是否通过触摸拖拽切换轮播图 | 2.24.0 | | transition-style | `{ transitionDuration?: string, transitionTimingFunction?: string }` | `{ transitionDuration: '300ms' }` | 过渡效果的样式 | 2.24.0 | | transition-props | `TransitionProps` | `undefined` | 自定义过渡效果属性，[参考 Vue 文档](https://v3.cn.vuejs.org/api/built-in-components.html#transition) | 2.24.0 | | trigger | `'click' \| 'hover'` | `'click'` | 触发切换的方式 | | | on-update:current-index | `(currentIndex: number, lastIndex: number) => void` | `undefined` | 当前页变化时的回调函数 | 2.24.0 | ### Carousel Slots | 名称 | 参数 | 说明 | 版本 | | --- | --- | --- | --- | | default | `()` | 轮播的内容 | | arrow | `(info: { total: number, currentIndex: number, to: (index: number) => void, prev: () => void, next: () => void })` | 箭头 | 2.24.0 | | dots | `(info: { total: number, currentIndex: number, to: (index: number) => void })` | 指示点 | 2.24.0 | ### Carousel Methods | 名称 | 类型 | 说明 | 版本 | | --------------- | ------------------------- | ------------ | ------ | | to | `(index: number) => void` | 滑动至某一页 | 2.24.0 | | prev | `() => void` | 滑动至前一页 | 2.24.0 | | next | `() => void` | 滑动至后一页 | 2.24.0 | | getCurrentIndex | `() => number` | 获取当前页 | 2.24.0 | ================================================ FILE: src/carousel/demos/zhCN/keyboard.demo.vue ================================================ # 按键控制 是否通过按键切换轮播图，只有焦点在 Dots 上时才有效。 ================================================ FILE: src/carousel/demos/zhCN/mousewheel.demo.vue ================================================ # 鼠标滚轮控制 ================================================ FILE: src/carousel/demos/zhCN/simulate-drag.demo.vue ================================================ # 模拟拖拽 轮播图会默认启用 `Touch` 事件模拟，如果你需要轮播图响应鼠标拖拽，可以使用 `draggable` 属性。 ================================================ FILE: src/carousel/demos/zhCN/slides-per-view-auto.demo.vue ================================================ # 自动每屏显示数量 ================================================ FILE: src/carousel/demos/zhCN/slides-per-view.demo.vue ================================================ # 每屏显示数量 需要注意，`slides-per-view` 属性会与 `loop` 冲突，如果你需要自定义每屏显示数量，那么 `loop` 功能将被禁用。 ================================================ FILE: src/carousel/demos/zhCN/space-between.demo.vue ================================================ # 相邻间距 ================================================ FILE: src/carousel/demos/zhCN/transition-name.demo.vue ================================================ # 自定义过渡效果 如果你想要自定义过渡效果，可以使用 `transition-props`，并把 `effect` 设置为 `'custom'`，具体配置见[官方文档](https://v3.cn.vuejs.org/api/built-in-components.html#transition)。 ================================================ FILE: src/carousel/demos/zhCN/vertical.demo.vue ================================================ # 垂直 ================================================ FILE: src/carousel/index.ts ================================================ export { carouselProps, default as NCarousel } from './src/Carousel' export type { CarouselProps, CarouselSlots } from './src/Carousel' export { default as NCarouselItem } from './src/CarouselItem' export type { CarouselArrowSlotProps, CarouselDotSlotProps, CarouselInst } from './src/interface' ================================================ FILE: src/carousel/src/Carousel.tsx ================================================ import type { CSSProperties, PropType, Ref, SlotsType, TransitionProps, VNode } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes } from '../../_utils' import type { CarouselTheme } from '../styles' import type { CarouselContextValue } from './CarouselContext' import type { ArrowScopedSlotProps, CarouselArrowSlotProps, CarouselDotSlotProps, CarouselInst, DotScopedSlotProps, Size } from './interface' import { off, on } from 'evtd' import { getPreciseEventTarget } from 'seemly' import { useMergedState } from 'vooks' import { cloneVNode, computed, defineComponent, h, nextTick, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, ref, toRef, Transition, vShow, watch, watchEffect, withDirectives } from 'vue' import { VResizeObserver } from 'vueuc' import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { flatten, keep, resolveSlotWithTypedProps } from '../../_utils' import { carouselLight } from '../styles' import NCarouselArrow from './CarouselArrow' import { provideCarouselContext } from './CarouselContext' import NCarouselDots from './CarouselDots' import NCarouselItem, { isCarouselItem } from './CarouselItem' import style from './styles/index.cssr' import { addDuplicateSlides, calculateSize, clampValue, getDisplayIndex, getDisplayTotalView, getNextIndex, getPrevIndex, getRealIndex, isTouchEvent, resolveSpeed } from './utils' const transitionProperties = [ 'transitionDuration', 'transitionTimingFunction' ] as const type TransitionStyle = Partial< Pick > export const carouselProps = { ...(useTheme.props as ThemeProps), defaultIndex: { type: Number, default: 0 }, currentIndex: Number, showArrow: Boolean, dotType: { type: String as PropType<'dot' | 'line'>, default: 'dot' }, dotPlacement: { type: String as PropType<'top' | 'bottom' | 'left' | 'right'>, default: 'bottom' }, slidesPerView: { type: [Number, String] as PropType, default: 1 }, spaceBetween: { type: Number, default: 0 }, centeredSlides: Boolean, direction: { type: String as PropType<'horizontal' | 'vertical'>, default: 'horizontal' }, autoplay: Boolean, interval: { type: Number, default: 5000 }, loop: { type: Boolean, default: true }, effect: { type: String as PropType<'slide' | 'fade' | 'card' | 'custom'>, default: 'slide' }, showDots: { type: Boolean, default: true }, trigger: { type: String as PropType<'click' | 'hover'>, default: 'click' }, transitionStyle: { type: Object as PropType, default: (): TransitionStyle => ({ transitionDuration: '300ms' }) }, transitionProps: Object as PropType, draggable: Boolean, prevSlideStyle: [Object, String] as PropType, nextSlideStyle: [Object, String] as PropType, touchable: { type: Boolean, default: true }, mousewheel: Boolean, keyboard: Boolean, 'onUpdate:currentIndex': Function as PropType< (currentIndex: number, lastIndex: number) => void >, onUpdateCurrentIndex: Function as PropType< (currentIndex: number, lastIndex: number) => void > } export type CarouselProps = ExtractPublicPropTypes export interface CarouselSlots { default?: () => VNode[] arrow?: (props: CarouselArrowSlotProps) => VNode[] dots?: (props: CarouselDotSlotProps) => VNode[] } // only one carousel is allowed to trigger touch globally let globalDragging = false export default defineComponent({ name: 'Carousel', props: carouselProps, slots: Object as SlotsType, setup(props) { const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props) // Dom const selfElRef = ref(null) const slidesElRef = ref(null) const slideElsRef = ref([]) const slideVNodesRef = { value: [] as VNode[] } // Computed states const verticalRef = computed(() => props.direction === 'vertical') const sizeAxisRef = computed(() => (verticalRef.value ? 'height' : 'width')) const spaceAxisRef = computed(() => verticalRef.value ? 'bottom' : 'right' ) const sequenceLayoutRef = computed(() => props.effect === 'slide') const duplicatedableRef = computed( // duplicate the copy operation in `slide` mode, // because only its DOM is sequence layout () => props.loop && props.slidesPerView === 1 && sequenceLayoutRef.value ) // user wants to control the transition animation const userWantsControlRef = computed(() => props.effect === 'custom') // used to calculate total views const displaySlidesPerViewRef = computed(() => !sequenceLayoutRef.value || props.centeredSlides ? 1 : props.slidesPerView ) // used to calculate the size of each slide const realSlidesPerViewRef = computed(() => userWantsControlRef.value ? 1 : props.slidesPerView ) // we automatically calculate total view for special slides per view const autoSlideSizeRef = computed( () => displaySlidesPerViewRef.value === 'auto' || (props.slidesPerView === 'auto' && props.centeredSlides) ) // Carousel size const perViewSizeRef = ref({ width: 0, height: 0 }) const slideSizesTrigger = ref(0) const slideSizesRef = computed(() => { const { value: slidesEls } = slideElsRef if (!slidesEls.length) return [] // eslint-disable-next-line ts/no-unused-expressions slideSizesTrigger.value const { value: autoSlideSize } = autoSlideSizeRef if (autoSlideSize) { return slidesEls.map(slide => calculateSize(slide)) } const { value: slidesPerView } = realSlidesPerViewRef const { value: perViewSize } = perViewSizeRef const { value: axis } = sizeAxisRef let axisSize = perViewSize[axis] if (slidesPerView !== 'auto') { const { spaceBetween } = props const remaining = axisSize - (slidesPerView - 1) * spaceBetween const percentage = 1 / Math.max(1, slidesPerView) axisSize = remaining * percentage } const slideSize = { ...perViewSize, [axis]: axisSize } return slidesEls.map(() => slideSize) }) // The translate required to reach each slide const slideTranlatesRef = computed(() => { const { value: slideSizes } = slideSizesRef if (!slideSizes.length) return [] const { centeredSlides, spaceBetween } = props const { value: axis } = sizeAxisRef const { [axis]: perViewSize } = perViewSizeRef.value let previousTranslate = 0 return slideSizes.map(({ [axis]: slideSize }) => { let translate = previousTranslate if (centeredSlides) { translate += (slideSize - perViewSize) / 2 } previousTranslate += slideSize + spaceBetween return translate }) }) // Styles const isMountedRef = ref(false) const transitionStyleRef = computed(() => { const { transitionStyle } = props return transitionStyle ? keep(transitionStyle, transitionProperties as any) : {} }) const speedRef = computed(() => userWantsControlRef.value ? 0 : resolveSpeed(transitionStyleRef.value.transitionDuration) ) const slideStylesRef = computed(() => { const { value: slidesEls } = slideElsRef if (!slidesEls.length) return [] const useComputedSize = !( autoSlideSizeRef.value || realSlidesPerViewRef.value === 1 ) const getSlideSize = (index: number): Partial | undefined => { if (useComputedSize) { const { value: axis } = sizeAxisRef return { [axis]: `${slideSizesRef.value[index][axis]}px` } } } if (userWantsControlRef.value) { // We center each slide when user wants to control the transition animation, // so there is no need to calculate the offset return slidesEls.map((_, i) => getSlideSize(i)) } const { effect, spaceBetween } = props const { value: spaceAxis } = spaceAxisRef return slidesEls.reduce((styles, _, i) => { const style = { ...getSlideSize(i), [`margin-${spaceAxis}`]: `${spaceBetween}px` } styles.push(style) if (isMountedRef.value && (effect === 'fade' || effect === 'card')) { Object.assign(style, transitionStyleRef.value) } return styles }, []) }) // Total const totalViewRef = computed(() => { const { value: slidesPerView } = displaySlidesPerViewRef const { length: totalSlides } = slideElsRef.value if (slidesPerView !== 'auto') { return Math.max(totalSlides - slidesPerView, 0) + 1 } else { const { value: slideSizes } = slideSizesRef const { length } = slideSizes if (!length) return totalSlides const { value: translates } = slideTranlatesRef const { value: axis } = sizeAxisRef const perViewSize = perViewSizeRef.value[axis] let lastViewSize = slideSizes[slideSizes.length - 1][axis] let i = length while (i > 1 && lastViewSize < perViewSize) { i-- lastViewSize += translates[i] - translates[i - 1] } return clampValue(i + 1, 1, length) } }) const displayTotalViewRef = computed(() => getDisplayTotalView(totalViewRef.value, duplicatedableRef.value) ) // Index const defaultRealIndex = getRealIndex( props.defaultIndex, duplicatedableRef.value ) const uncontrolledDisplayIndexRef = ref( getDisplayIndex( defaultRealIndex, totalViewRef.value, duplicatedableRef.value ) ) const mergedDisplayIndexRef = useMergedState( toRef(props, 'currentIndex'), uncontrolledDisplayIndexRef ) const realIndexRef = computed(() => getRealIndex(mergedDisplayIndexRef.value, duplicatedableRef.value) ) // Reality methods function toRealIndex(index: number): void { index = clampValue(index, 0, totalViewRef.value - 1) const displayIndex = getDisplayIndex( index, totalViewRef.value, duplicatedableRef.value ) const { value: lastDisplayIndex } = mergedDisplayIndexRef if (displayIndex !== mergedDisplayIndexRef.value) { uncontrolledDisplayIndexRef.value = displayIndex props['onUpdate:currentIndex']?.(displayIndex, lastDisplayIndex) props.onUpdateCurrentIndex?.(displayIndex, lastDisplayIndex) } } function getRealPrevIndex( index: number = realIndexRef.value ): number | null { return getPrevIndex(index, totalViewRef.value, props.loop) } function getRealNextIndex( index: number = realIndexRef.value ): number | null { return getNextIndex(index, totalViewRef.value, props.loop) } function isRealPrev(slideOrIndex: HTMLElement | number): boolean { const index = getSlideIndex(slideOrIndex) return ( index !== null && getRealPrevIndex() === index && totalViewRef.value > 1 ) } function isRealNext(slideOrIndex: HTMLElement | number): boolean { const index = getSlideIndex(slideOrIndex) return ( index !== null && getRealNextIndex() === index && totalViewRef.value > 1 ) } function isRealActive(slideOrIndex: HTMLElement | number): boolean { return realIndexRef.value === getSlideIndex(slideOrIndex) } // Display methods // They are used to deal with the actual values displayed on the UI function isDisplayActive(index: number): boolean { return mergedDisplayIndexRef.value === index } function isPrevDisabled(): boolean { return getRealPrevIndex() === null } function isNextDisabled(): boolean { return getRealNextIndex() === null } // To let expectedTransitionDirection = 0 function to(index: number): void { const realIndex = clampValue( getRealIndex(index, duplicatedableRef.value), 0, totalViewRef.value ) if ( index !== mergedDisplayIndexRef.value || realIndex !== realIndexRef.value ) { toRealIndex(realIndex) } } function prev(): void { const prevIndex = getRealPrevIndex() if (prevIndex !== null) { expectedTransitionDirection = -1 toRealIndex(prevIndex) } } function next(): void { const nextIndex = getRealNextIndex() if (nextIndex !== null) { expectedTransitionDirection = 1 toRealIndex(nextIndex) } } // Translate to let inTransition = false function prevIfSlideTransitionEnd(): void { if (!inTransition || !duplicatedableRef.value) prev() } function nextIfSlideTransitionEnd(): void { if (!inTransition || !duplicatedableRef.value) next() } // record the translate of each slide, so that it can be restored at touch let previousTranslate = 0 const translateStyleRef = ref({}) as Ref function updateTranslate(translate: number, speed = 0): void { translateStyleRef.value = Object.assign({}, transitionStyleRef.value, { transform: verticalRef.value ? `translateY(${-translate}px)` : `translateX(${-translate}px)`, transitionDuration: `${speed}ms` }) } function fixTranslate(speed = 0): void { if (sequenceLayoutRef.value) { translateTo(realIndexRef.value, speed) } else if (previousTranslate !== 0) { if (!inTransition && speed > 0) { inTransition = true } updateTranslate((previousTranslate = 0), speed) } } function translateTo(index: number, speed: number): void { const translate = getTranslate(index) if (translate !== previousTranslate && speed > 0) { inTransition = true } previousTranslate = getTranslate(realIndexRef.value) updateTranslate(translate, speed) } function getTranslate(index: number): number { let translate // Deal with auto slides pre view if (index >= totalViewRef.value - 1) { translate = getLastViewTranslate() } else { translate = slideTranlatesRef.value[index] || 0 } return translate } function getLastViewTranslate(): number { if (displaySlidesPerViewRef.value === 'auto') { const { value: axis } = sizeAxisRef const { [axis]: perViewSize } = perViewSizeRef.value const { value: translates } = slideTranlatesRef const lastTranslate = translates[translates.length - 1] let overallSize if (lastTranslate === undefined) { overallSize = perViewSize } else { const { value: slideSizes } = slideSizesRef overallSize = lastTranslate + slideSizes[slideSizes.length - 1][axis] } // Bring the last slide to the edge return overallSize - perViewSize } else { const { value: translates } = slideTranlatesRef return translates[totalViewRef.value - 1] || 0 } } // Provide const carouselContext: CarouselContextValue = { currentIndexRef: mergedDisplayIndexRef, to, prev: prevIfSlideTransitionEnd, next: nextIfSlideTransitionEnd, isVertical: () => verticalRef.value, isHorizontal: () => !verticalRef.value, isPrev: isRealPrev, isNext: isRealNext, isActive: isRealActive, isPrevDisabled, isNextDisabled, getSlideIndex, getSlideStyle, addSlide, removeSlide, onCarouselItemClick } provideCarouselContext(carouselContext) function addSlide(slide?: HTMLElement): void { if (!slide) return slideElsRef.value.push(slide) } function removeSlide(slide?: HTMLElement): void { if (!slide) return const index = getSlideIndex(slide) if (index !== -1) { slideElsRef.value.splice(index, 1) } } function getSlideIndex(slideOrIndex?: HTMLElement | number): number { return typeof slideOrIndex === 'number' ? slideOrIndex : slideOrIndex ? slideElsRef.value.indexOf(slideOrIndex) : -1 } function getSlideStyle( slide: HTMLElement | number ): string | Record | undefined { const index = getSlideIndex(slide) if (index !== -1) { const styles: any[] = [slideStylesRef.value[index]] const isPrev = carouselContext.isPrev(index) const isNext = carouselContext.isNext(index) if (isPrev) { styles.push(props.prevSlideStyle || '') } if (isNext) { styles.push(props.nextSlideStyle || '') } return normalizeStyle(styles) } } // Drag let dragStartX = 0 let dragStartY = 0 let dragOffset = 0 let dragStartTime = 0 let dragging = false let isEffectiveDrag = false function onCarouselItemClick(index: number, event: MouseEvent): void { let allowClick = !inTransition && !dragging && !isEffectiveDrag if (props.effect === 'card' && allowClick && !isRealActive(index)) { to(index) allowClick = false } if (!allowClick) { event.preventDefault() event.stopPropagation() } } // Autoplay let autoplayTimer: number | null = null function stopAutoplay(): void { if (autoplayTimer) { clearInterval(autoplayTimer) autoplayTimer = null } } function resetAutoplay(): void { stopAutoplay() const disabled = !props.autoplay || displayTotalViewRef.value < 2 if (!disabled) { autoplayTimer = window.setInterval(next, props.interval) } } function handleTouchstart(event: MouseEvent | TouchEvent): void { if (globalDragging) return if ( !slidesElRef.value?.contains( getPreciseEventTarget(event) as Node | null ) ) { return } globalDragging = true dragging = true isEffectiveDrag = false dragStartTime = Date.now() stopAutoplay() if ( event.type !== 'touchstart' && !(event.target as HTMLElement).isContentEditable ) { event.preventDefault() } const touchEvent = isTouchEvent(event) ? event.touches[0] : event if (verticalRef.value) { dragStartY = touchEvent.clientY } else { dragStartX = touchEvent.clientX } if (props.touchable) { on('touchmove', document, handleTouchmove) on('touchend', document, handleTouchend) on('touchcancel', document, handleTouchend) } if (props.draggable) { on('mousemove', document, handleTouchmove) on('mouseup', document, handleTouchend) } } function handleTouchmove(event: MouseEvent | TouchEvent): void { const { value: vertical } = verticalRef const { value: axis } = sizeAxisRef const touchEvent = isTouchEvent(event) ? event.touches[0] : event const offset = vertical ? touchEvent.clientY - dragStartY : touchEvent.clientX - dragStartX const perViewSize = perViewSizeRef.value[axis] dragOffset = clampValue(offset, -perViewSize, perViewSize) if (event.cancelable) { event.preventDefault() } if (sequenceLayoutRef.value) { updateTranslate(previousTranslate - dragOffset, 0) } } function handleTouchend(): void { const { value: realIndex } = realIndexRef let currentIndex: number | null = realIndex if (!inTransition && dragOffset !== 0 && sequenceLayoutRef.value) { const currentTranslate = previousTranslate - dragOffset const translates = [ ...slideTranlatesRef.value.slice(0, totalViewRef.value - 1), getLastViewTranslate() ] let prevOffset: number | null = null for (let i = 0; i < translates.length; i++) { const offset = Math.abs(translates[i] - currentTranslate) if (prevOffset !== null && prevOffset < offset) { break } prevOffset = offset currentIndex = i } } if (currentIndex === realIndex) { const timeElapsed = Date.now() - dragStartTime const { value: axis } = sizeAxisRef const perViewSize = perViewSizeRef.value[axis] // more than 50% width or faster than 0.4px per ms if (dragOffset > perViewSize / 2 || dragOffset / timeElapsed > 0.4) { prev() } else if ( dragOffset < -perViewSize / 2 || dragOffset / timeElapsed < -0.4 ) { next() } } if (currentIndex !== null && currentIndex !== realIndex) { isEffectiveDrag = true toRealIndex(currentIndex) void nextTick(() => { if ( !duplicatedableRef.value || uncontrolledDisplayIndexRef.value !== mergedDisplayIndexRef.value ) { fixTranslate(speedRef.value) } }) } else { fixTranslate(speedRef.value) } resetDragStatus() resetAutoplay() } function resetDragStatus(): void { if (dragging) { globalDragging = false } dragging = false dragStartX = 0 dragStartY = 0 dragOffset = 0 dragStartTime = 0 off('touchmove', document, handleTouchmove) off('touchend', document, handleTouchend) off('touchcancel', document, handleTouchend) off('mousemove', document, handleTouchmove) off('mouseup', document, handleTouchend) } function handleTransitionEnd(): void { if (sequenceLayoutRef.value && inTransition) { const { value: realIndex } = realIndexRef translateTo(realIndex, 0) } else { resetAutoplay() } if (sequenceLayoutRef.value) { translateStyleRef.value.transitionDuration = '0ms' } inTransition = false } function handleMousewheel(event: WheelEvent): void { event.preventDefault() if (inTransition) return let { deltaX, deltaY } = event if (event.shiftKey && !deltaX) { deltaX = deltaY } const prevMultiplier = -1 const nextMultiplier = 1 const m = (deltaX || deltaY) > 0 ? nextMultiplier : prevMultiplier let rx = 0 let ry = 0 if (verticalRef.value) { ry = m } else { rx = m } const responseStep = 10 if (ry * deltaY >= responseStep || rx * deltaX >= responseStep) { if (m === nextMultiplier && !isNextDisabled()) { next() } else if (m === prevMultiplier && !isPrevDisabled()) { prev() } } } function handleResize(): void { perViewSizeRef.value = calculateSize(selfElRef.value as HTMLElement, true) resetAutoplay() } function handleSlideResize(): void { if (autoSlideSizeRef.value) { slideSizesTrigger.value++ } } function handleMouseenter(): void { if (props.autoplay) { stopAutoplay() } } function handleMouseleave(): void { if (props.autoplay) { resetAutoplay() } } onMounted(() => { watchEffect(resetAutoplay) requestAnimationFrame(() => (isMountedRef.value = true)) }) onBeforeUnmount(() => { resetDragStatus() stopAutoplay() }) // Fix index when remounting onUpdated(() => { const { value: slidesEls } = slideElsRef const { value: slideVNodes } = slideVNodesRef const indexMap = new Map() const getDisplayIndex = (el: HTMLElement): number => indexMap.has(el) ? indexMap.get(el)! : -1 let isChanged = false for (let i = 0; i < slidesEls.length; i++) { const index = slideVNodes.findIndex(v => v.el === slidesEls[i]) if (index !== i) { isChanged = true } indexMap.set(slidesEls[i], index) } if (isChanged) { slidesEls.sort((a, b) => getDisplayIndex(a) - getDisplayIndex(b)) } }) watch( realIndexRef, (nextRealIndex, lastRealIndex) => { if (nextRealIndex === lastRealIndex) { expectedTransitionDirection = 0 return } resetAutoplay() if (sequenceLayoutRef.value) { if (duplicatedableRef.value) { const { value: length } = totalViewRef if ( expectedTransitionDirection === -1 && lastRealIndex === 1 && nextRealIndex === length - 2 ) { nextRealIndex = 0 } else if ( expectedTransitionDirection === 1 && lastRealIndex === length - 2 && nextRealIndex === 1 ) { nextRealIndex = length - 1 } } translateTo(nextRealIndex, speedRef.value) } else { fixTranslate() } expectedTransitionDirection = 0 }, { immediate: true } ) watch( [duplicatedableRef, displaySlidesPerViewRef], () => void nextTick(() => { toRealIndex(realIndexRef.value) }) ) watch( slideTranlatesRef, () => { if (sequenceLayoutRef.value) { fixTranslate() } }, { deep: true } ) watch(sequenceLayoutRef, (value) => { if (!value) { inTransition = false // if the current mode does not support translate, reset the position of the wrapper updateTranslate((previousTranslate = 0)) } else { fixTranslate() } }) const slidesControlListenersRef = computed(() => { return { onTouchstartPassive: props.touchable ? handleTouchstart : undefined, onMousedown: props.draggable ? handleTouchstart : undefined, onWheel: props.mousewheel ? handleMousewheel : undefined } }) const arrowSlotPropsRef = computed(() => ({ ...keep(carouselContext, [ 'to', 'prev', 'next', 'isPrevDisabled', 'isNextDisabled' ]), total: displayTotalViewRef.value, currentIndex: mergedDisplayIndexRef.value })) const dotSlotPropsRef = computed(() => ({ total: displayTotalViewRef.value, currentIndex: mergedDisplayIndexRef.value, to: carouselContext.to })) const caroulseExposedMethod: CarouselInst = { getCurrentIndex: () => mergedDisplayIndexRef.value, to, prev, next } const themeRef = useTheme( 'Carousel', '-carousel', style, carouselLight, props, mergedClsPrefixRef ) const cssVarsRef = computed(() => { const { common: { cubicBezierEaseInOut }, self: { dotSize, dotColor, dotColorActive, dotColorFocus, dotLineWidth, dotLineWidthActive, arrowColor } } = themeRef.value return { '--n-bezier': cubicBezierEaseInOut, '--n-dot-color': dotColor, '--n-dot-color-focus': dotColorFocus, '--n-dot-color-active': dotColorActive, '--n-dot-size': dotSize, '--n-dot-line-width': dotLineWidth, '--n-dot-line-width-active': dotLineWidthActive, '--n-arrow-color': arrowColor } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass('carousel', undefined, cssVarsRef, props) : undefined return { mergedClsPrefix: mergedClsPrefixRef, selfElRef, slidesElRef, slideVNodes: slideVNodesRef, duplicatedable: duplicatedableRef, userWantsControl: userWantsControlRef, autoSlideSize: autoSlideSizeRef, realIndex: realIndexRef, slideStyles: slideStylesRef, translateStyle: translateStyleRef, slidesControlListeners: slidesControlListenersRef, handleTransitionEnd, handleResize, handleSlideResize, handleMouseenter, handleMouseleave, isActive: isDisplayActive, arrowSlotProps: arrowSlotPropsRef, dotSlotProps: dotSlotPropsRef, ...caroulseExposedMethod, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { const { mergedClsPrefix, showArrow, userWantsControl, slideStyles, dotType, dotPlacement, slidesControlListeners, transitionProps = {}, arrowSlotProps, dotSlotProps, $slots: { default: defaultSlot, dots: dotsSlot, arrow: arrowSlot } } = this const children = (defaultSlot && flatten(defaultSlot())) || [] let slides = filterCarouselItem(children) if (!slides.length) { slides = children.map(ch => ( {{ default: () => cloneVNode(ch) }} )) } if (this.duplicatedable) { slides = addDuplicateSlides(slides) } this.slideVNodes.value = slides // When users need to customize the size of the slide, // we listen to them to fix the current translate if (this.autoSlideSize) { slides = slides.map(slide => ( {{ default: () => slide }} )) } this.onRender?.() return (
    {{ default: () => (
    {userWantsControl ? slides.map((slide, i) => (
    {withDirectives( {{ default: () => slide }} , [[vShow, this.isActive(i)]] )}
    )) : slides}
    ) }}     {this.showDots && dotSlotProps.total > 1 && resolveSlotWithTypedProps(dotsSlot, dotSlotProps, () => [ ])} {showArrow && resolveSlotWithTypedProps(arrowSlot, arrowSlotProps, () => [ ])}
    ) } }) function filterCarouselItem(vnodes: VNode[]): VNode[] { return vnodes.reduce((carouselItems, vnode) => { if (isCarouselItem(vnode)) { carouselItems.push(vnode) } return carouselItems }, []) } ================================================ FILE: src/carousel/src/CarouselArrow.tsx ================================================ import { defineComponent, h } from 'vue' import { useConfig } from '../../_mixins' import { useCarouselContext } from './CarouselContext' function renderBackwardIcon() { return ( ) } function renderForwardIcon() { return ( ) } export default defineComponent({ name: 'CarouselArrow', setup(props) { const { mergedClsPrefixRef } = useConfig(props) const { isVertical, isPrevDisabled, isNextDisabled, prev, next } = useCarouselContext() return { mergedClsPrefix: mergedClsPrefixRef, isVertical, isPrevDisabled, isNextDisabled, prev, next } }, render() { const { mergedClsPrefix } = this return (
    {renderBackwardIcon()}
    {renderForwardIcon()}
    ) } }) ================================================ FILE: src/carousel/src/CarouselContext.ts ================================================ import type { ComputedRef } from 'vue' import { inject, provide } from 'vue' import { createInjectionKey, throwError } from '../../_utils' export interface CarouselContextValue { currentIndexRef: ComputedRef to: (index: number) => void prev: () => void next: () => void isVertical: () => boolean isHorizontal: () => boolean isPrev: (slideOrIndex: HTMLElement | number) => boolean isNext: (slideOrIndex: HTMLElement | number) => boolean isActive: (slideOrIndex: HTMLElement | number) => boolean isPrevDisabled: () => boolean isNextDisabled: () => boolean getSlideIndex: (slideOrIndex?: HTMLElement | number) => number getSlideStyle: ( slideOrIndex: HTMLElement | number ) => string | Record | undefined addSlide: (slide?: HTMLElement) => void removeSlide: (slide?: HTMLElement) => void onCarouselItemClick: (index: number, event: MouseEvent) => void } const carouselMethodsInjectionKey = createInjectionKey('n-carousel-methods') export function provideCarouselContext( contextValue: CarouselContextValue ): void { provide(carouselMethodsInjectionKey, contextValue) } export function useCarouselContext( location: string = 'unknown', component: string = 'component' ): CarouselContextValue { const CarouselContext = inject(carouselMethodsInjectionKey) if (!CarouselContext) { throwError( location, `\`${component}\` must be placed inside \`n-carousel\`.` ) } return CarouselContext } ================================================ FILE: src/carousel/src/CarouselDots.tsx ================================================ import type { PropType } from 'vue' import type { ExtractPublicPropTypes } from '../../_utils' import { indexMap } from 'seemly' import { defineComponent, h, onBeforeUpdate, ref } from 'vue' import { useConfig } from '../../_mixins' import { useCarouselContext } from './CarouselContext' const carouselDotsProps = { total: { type: Number, default: 0 }, currentIndex: { type: Number, default: 0 }, dotType: { type: String as PropType<'dot' | 'line' | 'never'>, default: 'dot' }, trigger: { type: String as PropType<'click' | 'hover'>, default: 'click' }, keyboard: Boolean } export type CarouselDotsProps = ExtractPublicPropTypes export default defineComponent({ name: 'CarouselDots', props: carouselDotsProps, setup(props) { const { mergedClsPrefixRef } = useConfig(props) const dotElsRef = ref([]) const NCarousel = useCarouselContext() function handleKeydown(e: KeyboardEvent, current: number): void { switch (e.key) { case 'Enter': case ' ': e.preventDefault() NCarousel.to(current) return } if (props.keyboard) { handleKeyboard(e) } } function handleMouseenter(current: number): void { if (props.trigger === 'hover') { NCarousel.to(current) } } function handleClick(current: number): void { if (props.trigger === 'click') { NCarousel.to(current) } } function handleKeyboard(e: KeyboardEvent): void { if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) { return } const nodeName = document.activeElement?.nodeName.toLowerCase() if (nodeName === 'input' || nodeName === 'textarea') { return } const { code: keycode } = e const isVerticalNext = keycode === 'PageUp' || keycode === 'ArrowUp' const isVerticalPrev = keycode === 'PageDown' || keycode === 'ArrowDown' const isHorizontalNext = keycode === 'PageUp' || keycode === 'ArrowRight' const isHorizontalPrev = keycode === 'PageDown' || keycode === 'ArrowLeft' const vertical = NCarousel.isVertical() const wantToNext = vertical ? isVerticalNext : isHorizontalNext const wantToPrev = vertical ? isVerticalPrev : isHorizontalPrev if (!wantToNext && !wantToPrev) { return } e.preventDefault() if (wantToNext && !NCarousel.isNextDisabled()) { NCarousel.next() focusDot(NCarousel.currentIndexRef.value) } else if (wantToPrev && !NCarousel.isPrevDisabled()) { NCarousel.prev() focusDot(NCarousel.currentIndexRef.value) } } function focusDot(index: number): void { dotElsRef.value[index]?.focus() } onBeforeUpdate(() => (dotElsRef.value.length = 0)) return { mergedClsPrefix: mergedClsPrefixRef, dotEls: dotElsRef, handleKeydown, handleMouseenter, handleClick } }, render() { const { mergedClsPrefix, dotEls } = this return (
    {indexMap(this.total, (i) => { const selected = i === this.currentIndex return (
    dotEls.push(el as HTMLElement)} role="button" tabindex="0" class={[ `${mergedClsPrefix}-carousel__dot`, selected && `${mergedClsPrefix}-carousel__dot--active` ]} key={i} onClick={() => { this.handleClick(i) }} onMouseenter={() => { this.handleMouseenter(i) }} onKeydown={(e) => { this.handleKeydown(e, i) }} /> ) })}
    ) } }) ================================================ FILE: src/carousel/src/CarouselItem.tsx ================================================ import type { VNode } from 'vue' import { camelCase } from 'lodash-es' import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue' import { useConfig } from '../../_mixins' import { useCarouselContext } from './CarouselContext' const CarouselItemName = 'CarouselItem' export function isCarouselItem(child: VNode): boolean { return (child.type as any)?.name === CarouselItemName } export default defineComponent({ name: CarouselItemName, setup(props) { const { mergedClsPrefixRef } = useConfig(props) const NCarousel = useCarouselContext( camelCase(CarouselItemName), `n-${camelCase(CarouselItemName)}` ) const selfElRef = ref() const indexRef = computed(() => { const { value: selfEl } = selfElRef return selfEl ? NCarousel.getSlideIndex(selfEl) : -1 }) const isPrevRef = computed(() => NCarousel.isPrev(indexRef.value)) const isNextRef = computed(() => NCarousel.isNext(indexRef.value)) const isActiveRef = computed(() => NCarousel.isActive(indexRef.value)) const styleRef = computed(() => NCarousel.getSlideStyle(indexRef.value)) onMounted(() => { NCarousel.addSlide(selfElRef.value) }) onBeforeUnmount(() => { NCarousel.removeSlide(selfElRef.value) }) function handleClick(event: MouseEvent): void { const { value: index } = indexRef if (index !== undefined) { NCarousel?.onCarouselItemClick(index, event) } } return { mergedClsPrefix: mergedClsPrefixRef, selfElRef, isPrev: isPrevRef, isNext: isNextRef, isActive: isActiveRef, index: indexRef, style: styleRef, handleClick } }, render() { const { $slots: slots, mergedClsPrefix, isPrev, isNext, isActive, index, style } = this const className = [ `${mergedClsPrefix}-carousel__slide`, { [`${mergedClsPrefix}-carousel__slide--current`]: isActive, [`${mergedClsPrefix}-carousel__slide--prev`]: isPrev, [`${mergedClsPrefix}-carousel__slide--next`]: isNext } ] return (
    {slots.default?.({ isPrev, isNext, isActive, index })}
    ) } }) ================================================ FILE: src/carousel/src/interface.ts ================================================ import type { CarouselContextValue } from './CarouselContext' export interface CarouselInst { getCurrentIndex: () => number to: (index: number) => void prev: () => void next: () => void } export interface ArrowScopedSlotProps extends Pick< CarouselContextValue, 'to' | 'prev' | 'next' | 'isPrevDisabled' | 'isNextDisabled' > { total: number currentIndex: number } export interface DotScopedSlotProps extends Pick { total: number currentIndex: number } export interface Size { width: number height: number } export interface CarouselArrowSlotProps { total: number currentIndex: number to: (index: number) => void prev: () => void next: () => void } export interface CarouselDotSlotProps { total: number currentIndex: number to: (index: number) => void } ================================================ FILE: src/carousel/src/styles/index.cssr.ts ================================================ import { c, cB, cE, cM } from '../../../_utils/cssr' // vars: // --n-bezier // --n-dot-color // --n-dot-color-focus // --n-dot-color-active // --n-dot-size // --n-dot-line-width // --n-dot-line-width-active // --n-arrow-color export default cB('carousel', ` position: relative; width: 100%; height: 100%; touch-action: pan-y; overflow: hidden; `, [ cE('slides', ` display: flex; width: 100%; height: 100%; transition-timing-function: var(--n-bezier); transition-property: transform; `, [ cE('slide', ` flex-shrink: 0; position: relative; width: 100%; height: 100%; outline: none; overflow: hidden; `, [ c('> img', ` display: block; `) ]) ]), cE('dots', ` position: absolute; display: flex; flex-wrap: nowrap; `, [ cM('dot', [ cE('dot', ` height: var(--n-dot-size); width: var(--n-dot-size); background-color: var(--n-dot-color); border-radius: 50%; cursor: pointer; transition: box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier); outline: none; `, [ c('&:focus', ` background-color: var(--n-dot-color-focus); `), cM('active', ` background-color: var(--n-dot-color-active); `) ]) ]), cM('line', [ cE('dot', ` border-radius: 9999px; width: var(--n-dot-line-width); height: 4px; background-color: var(--n-dot-color); cursor: pointer; transition: width .3s var(--n-bezier), box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier); outline: none; `, [ c('&:focus', ` background-color: var(--n-dot-color-focus); `), cM('active', ` width: var(--n-dot-line-width-active); background-color: var(--n-dot-color-active); `) ]) ]) ]), cE('arrow', ` transition: background-color .3s var(--n-bezier); cursor: pointer; height: 28px; width: 28px; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, .2); color: var(--n-arrow-color); border-radius: 8px; user-select: none; -webkit-user-select: none; font-size: 18px; `, [ c('svg', ` height: 1em; width: 1em; `), c('&:hover', ` background-color: rgba(255, 255, 255, .3); `) ]), cM('vertical', ` touch-action: pan-x; `, [ cE('slides', ` flex-direction: column; `), cM('fade', [ cE('slide', ` top: 50%; left: unset; transform: translateY(-50%); `) ]), cM('card', [ cE('slide', ` top: 50%; left: unset; transform: translateY(-50%) translateZ(-400px); `, [ cM('current', ` transform: translateY(-50%) translateZ(0); `), cM('prev', ` transform: translateY(-100%) translateZ(-200px); `), cM('next', ` transform: translateY(0%) translateZ(-200px); `) ]) ]) ]), cM('usercontrol', [ cE('slides', [ c('>', [ c('div', ` position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); `) ]) ]) ]), cM('left', [ cE('dots', ` transform: translateY(-50%); top: 50%; left: 12px; flex-direction: column; `, [ cM('line', [ cE('dot', ` width: 4px; height: var(--n-dot-line-width); margin: 4px 0; transition: height .3s var(--n-bezier), box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier); outline: none; `, [ cM('active', ` height: var(--n-dot-line-width-active); `) ]) ]) ]), cE('dot', ` margin: 4px 0; `) ]), cE('arrow-group', ` position: absolute; display: flex; flex-wrap: nowrap; `), cM('vertical', [ cE('arrow', ` transform: rotate(90deg); `) ]), cM('show-arrow', [ cM('bottom', [ cE('dots', ` transform: translateX(0); bottom: 18px; left: 18px; `) ]), cM('top', [ cE('dots', ` transform: translateX(0); top: 18px; left: 18px; `) ]), cM('left', [ cE('dots', ` transform: translateX(0); top: 18px; left: 18px; `) ]), cM('right', [ cE('dots', ` transform: translateX(0); top: 18px; right: 18px; `) ]) ]), cM('left', [ cE('arrow-group', ` bottom: 12px; left: 12px; flex-direction: column; `, [ c('> *:first-child', ` margin-bottom: 12px; `) ]) ]), cM('right', [ cE('dots', ` transform: translateY(-50%); top: 50%; right: 12px; flex-direction: column; `, [ cM('line', [ cE('dot', ` width: 4px; height: var(--n-dot-line-width); margin: 4px 0; transition: height .3s var(--n-bezier), box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier); outline: none; `, [ cM('active', ` height: var(--n-dot-line-width-active); `) ]) ]) ]), cE('dot', ` margin: 4px 0; `), cE('arrow-group', ` bottom: 12px; right: 12px; flex-direction: column; `, [ c('> *:first-child', ` margin-bottom: 12px; `) ]) ]), cM('top', [ cE('dots', ` transform: translateX(-50%); top: 12px; left: 50%; `, [ cM('line', [ cE('dot', ` margin: 0 4px; `) ]) ]), cE('dot', ` margin: 0 4px; `), cE('arrow-group', ` top: 12px; right: 12px; `, [ c('> *:first-child', ` margin-right: 12px; `) ]) ]), cM('bottom', [ cE('dots', ` transform: translateX(-50%); bottom: 12px; left: 50%; `, [ cM('line', [ cE('dot', ` margin: 0 4px; `) ]) ]), cE('dot', ` margin: 0 4px; `), cE('arrow-group', ` bottom: 12px; right: 12px; `, [ c('> *:first-child', ` margin-right: 12px; `) ]) ]), cM('fade', [ cE('slide', ` position: absolute; opacity: 0; transition-property: opacity; pointer-events: none; `, [ cM('current', ` opacity: 1; pointer-events: auto; `) ]) ]), cM('card', [ cE('slides', ` perspective: 1000px; `), cE('slide', ` position: absolute; left: 50%; opacity: 0; transform: translateX(-50%) translateZ(-400px); transition-property: opacity, transform; `, [ cM('current', ` opacity: 1; transform: translateX(-50%) translateZ(0); z-index: 1; `), cM('prev', ` opacity: 0.4; transform: translateX(-100%) translateZ(-200px); `), cM('next', ` opacity: 0.4; transform: translateX(0%) translateZ(-200px); `) ]) ]) ]) ================================================ FILE: src/carousel/src/utils/duplicatedLogic.ts ================================================ // Because of the nature of the loop slide work, // we need to add duplicates to the left and right of the carousel // slot [ 0 1 2 ] // display 2 0 1 2 0 // real 0 1 2 3 4 import type { VNode } from 'vue' import { cloneVNode } from 'vue' export function addDuplicateSlides(slides: VNode[]): VNode[] { const { length } = slides if (length > 1) { slides.push(duplicateSlide(slides[0], 0, 'append')) slides.unshift(duplicateSlide(slides[length - 1], length - 1, 'prepend')) return slides } return slides } function duplicateSlide( child: VNode, index: number, position: 'prepend' | 'append' ): VNode { return cloneVNode(child, { // for patch key: `carousel-item-duplicate-${index}-${position}` }) } export function getDisplayIndex( current: number, length: number, duplicatedable: boolean ): number { if (length === 1) return 0 return !duplicatedable ? current : current === 0 ? length - 3 : current === length - 1 ? 0 : current - 1 } export function getRealIndex( current: number, duplicatedable?: boolean ): number { return !duplicatedable ? current : current + 1 } export function getPrevIndex( current: number, length: number, duplicatedable?: boolean ): number | null { if (current < 0) return null return current === 0 ? (duplicatedable ? length - 1 : null) : current - 1 } export function getNextIndex( current: number, length: number, duplicatedable?: boolean ): number | null { if (current > length - 1) return null return current === length - 1 ? (duplicatedable ? 0 : null) : current + 1 } export function getDisplayTotalView( total: number, duplicatedable?: boolean ): number { return duplicatedable && total > 3 ? total - 2 : total } ================================================ FILE: src/carousel/src/utils/event.ts ================================================ export function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent { return window.TouchEvent && e instanceof window.TouchEvent } ================================================ FILE: src/carousel/src/utils/index.ts ================================================ import type { Size } from '../interface' export * from './duplicatedLogic' export * from './event' export function calculateSize(element: HTMLElement, innerOnly?: boolean): Size { let { offsetWidth: width, offsetHeight: height } = element if (innerOnly) { const style = getComputedStyle(element) width = width - Number.parseFloat(style.getPropertyValue('padding-left')) - Number.parseFloat(style.getPropertyValue('padding-right')) height = height - Number.parseFloat(style.getPropertyValue('padding-top')) - Number.parseFloat(style.getPropertyValue('padding-bottom')) } return { width, height } } export function clampValue(value: number, min: number, max: number): number { return value < min ? min : value > max ? max : value } export function resolveSpeed(value?: string | number): number { if (value === undefined) return 0 if (typeof value === 'number') return value const timeRE = /^((\d+)?\.?\d+?)(ms|s)?$/ const match = value.match(timeRE) if (match) { const [, number, , unit = 'ms'] = match return Number(number) * (unit === 'ms' ? 1 : 1000) } return 0 } ================================================ FILE: src/carousel/styles/dark.ts ================================================ import type { CarouselTheme } from './light' import { commonDark } from '../../_styles/common' import { self } from './light' const carouselDark: CarouselTheme = { name: 'Carousel', common: commonDark, self } export default carouselDark ================================================ FILE: src/carousel/styles/index.ts ================================================ export { default as carouselDark } from './dark' export { default as carouselLight } from './light' export type { CarouselTheme, CarouselThemeVars } from './light' ================================================ FILE: src/carousel/styles/light.ts ================================================ import type { Theme } from '../../_mixins' import { commonLight } from '../../_styles/common' export function self() { return { dotSize: '8px', dotColor: 'rgba(255, 255, 255, .3)', dotColorActive: 'rgba(255, 255, 255, 1)', dotColorFocus: 'rgba(255, 255, 255, .5)', dotLineWidth: '16px', dotLineWidthActive: '24px', arrowColor: '#eee' } } export type CarouselThemeVars = ReturnType const carouselLight: Theme<'Carousel', CarouselThemeVars> = { name: 'Carousel', common: commonLight, self } export default carouselLight export type CarouselTheme = typeof carouselLight ================================================ FILE: src/carousel/tests/Carousel.spec.tsx ================================================ import { mount } from '@vue/test-utils' import { sleep } from 'seemly' import { h, nextTick } from 'vue' import { NCarousel, NCarouselItem } from '../index' describe('n-carousel', () => { afterEach(() => { vi.useRealTimers() }) it('should work with import on demand', () => { const wrapper = mount(NCarousel) wrapper.unmount() }) it('should work with `autoplay` and `interval` prop', async () => { const wrapper = mount(NCarousel, { slots: { default: () => { return [...Array.from({ length: 3 }).keys()].map((i) => { return h('div', {}, i.toString()) }) } } }) await wrapper.setProps({ autoplay: true, interval: 50 }) await sleep(25) // Because `autoplay` is `true`, `[data-index="${0}"]` `aria-hidden` must not be `false` at the moment expect(wrapper.find(`[data-index="${0}"]`).attributes('aria-hidden')).toBe( 'true' ) await sleep(25) // Because `autoplay` is `true` and `interval` is `50`, both `[data-index="${0}"]` and `[data-index="${0}"]` `aria-hidden` must not be `false` at the moment ;([0, 1] as const).forEach((i) => { expect( wrapper.find(`[data-index="${i}"]`).attributes('aria-hidden') ).toBe('true') }) wrapper.unmount() }) it('should work with `dot-placement` prop', async () => { const wrapper = mount(NCarousel) for (const placement of ['top', 'bottom', 'left', 'right'] as const) { await wrapper.setProps({ dotPlacement: placement }) expect(wrapper.find('.n-carousel').classes()).toContain( `n-carousel--${placement}` ) } wrapper.unmount() }) it('should work with `interval` prop', async () => { const wrapper = mount(NCarousel, { props: { interval: 100, autoplay: true }, slots: { default: () => { return [...Array.from({ length: 3 }).keys()].map((i) => { return h('div', {}, i.toString()) }) } } }) await sleep(100) expect( wrapper .find('.n-carousel__slides') .find('[data-index="2"]') .attributes('aria-hidden') ).toBe('false') expect( wrapper .find('.n-carousel__dots') .findAll('.n-carousel__dot')[1] .attributes('aria-selected') ).toBe('true') wrapper.unmount() }) it('should work with `show-arrow` prop', async () => { const wrapper = mount(NCarousel) await wrapper.setProps({ showArrow: true }) expect(wrapper.find('.n-carousel__arrow-group').exists()).toBe(true) expect(wrapper.find('.n-carousel__arrow').exists()).toBe(true) wrapper.unmount() }) it('arrow button should work', async () => { const wrapper = mount(NCarousel, { props: { loop: false }, slots: { default: () => { return [ h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg' }), h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg' }) ] } } }) await wrapper.setProps({ showArrow: true }) const slidesDOMArray = wrapper.findAll('.n-carousel__slide') expect(slidesDOMArray[0].attributes('aria-hidden')).toBe('false') await wrapper.findAll('.n-carousel__arrow')[1].trigger('click') expect(slidesDOMArray[1].attributes('aria-hidden')).toBe('false') await wrapper.findAll('.n-carousel__arrow')[0].trigger('click') expect(slidesDOMArray[0].attributes('aria-hidden')).toBe('false') wrapper.unmount() }) it('should work with `centered-slides` prop', async () => { const wrapper = mount(NCarousel, { props: { slidesPerView: 'auto', loop: false }, attrs: { style: 'width: 240px;height: 300px;' }, slots: { default: () => { return [...Array.from({ length: 5 }).keys()].map((i) => { return h(NCarouselItem, { style: `width: ${(i + 1) * 10}%;`, slots: { default: () => h('div', {}, i.toString()) } }) }) } } }) const wrapperRect = wrapper.element.getBoundingClientRect() const slidesDOMArray = wrapper.findAll('.n-carousel__slide') for (let i = 0; i < slidesDOMArray.length; i++) { const slideDOM = slidesDOMArray[i] const rect = slideDOM.element.getBoundingClientRect() expect(rect.left - wrapperRect.left).toBe( (wrapperRect.width - rect.width) / 2 ) wrapper.vm.next() await nextTick() } wrapper.unmount() }) it('should work with `trigger` prop', async () => { const wrapper = mount(NCarousel, { props: { loop: false }, slots: { default: () => { return [...Array.from({ length: 3 }).keys()].map((i) => { return h('div', {}, i.toString()) }) } } }) const dotsDOMArray = wrapper.findAll('.n-carousel__dot') const slidesDOMArray = wrapper.findAll('.n-carousel__slide') const triggerEvent = { click: 'click', hover: 'mouseenter' } const triggers = Object.keys(triggerEvent) as Array< keyof typeof triggerEvent > for (let i = 0; i < triggers.length; i++) { const trigger = triggers[i] const event = triggerEvent[triggers[i]] await wrapper.setProps({ trigger }) for (let j = 0; j < dotsDOMArray.length; j++) { const dotsDOM = dotsDOMArray[j] await dotsDOM.trigger(event) expect(slidesDOMArray[j].attributes('aria-hidden')).toBe('false') } } wrapper.unmount() }) it('should work with `current-index` prop', async () => { vi.useFakeTimers() const wrapper = mount(NCarousel, { props: { currentIndex: 0, transitionStyle: { transitionDuration: '0ms' }, loop: false }, slots: { default: () => { return [ h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg' }), h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg' }) ] } } }) await nextTick() expect( wrapper .find('.n-carousel__slide--current') .element.children[0].getAttribute('src') ).toBe( 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg' ) await wrapper.setProps({ currentIndex: 1 }) expect(wrapper.vm.getCurrentIndex()).toBe(1) const actives = wrapper .findAll('.n-carousel__slide') .filter(s => s.attributes('aria-hidden') === 'false') expect(actives.length).toBe(1) const currentSlide = actives[0] expect(currentSlide.attributes('data-index')).toBe('1') expect(currentSlide.classes()).toContain('n-carousel__slide--current') expect(currentSlide.element.children[0].getAttribute('src')).toBe( 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg' ) wrapper.unmount() }) it('should work with `dot-type` prop', async () => { const wrapper = mount(NCarousel, { props: { currentIndex: 0 }, slots: { default: () => { return [ h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg' }), h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg' }) ] } } }) await sleep(100) expect(wrapper.find('.n-carousel__dots').classes()).toContain( 'n-carousel__dots--dot' ) await wrapper.setProps({ dotType: 'line' }) await sleep(100) expect(wrapper.find('.n-carousel__dots').classes()).toContain( 'n-carousel__dots--line' ) wrapper.unmount() }) it('should work with `effect` prop', async () => { const wrapper = mount(NCarousel) for (const effect of ['slide', 'fade', 'card', 'custom'] as const) { await wrapper.setProps({ effect }) await sleep(100) expect(wrapper.find('.n-carousel').classes()).toContain( `n-carousel--${effect}` ) } wrapper.unmount() }) it('should work with `keyboard` prop', async () => { const wrapper = mount(NCarousel, { props: { keyboard: true }, slots: { default: () => { return [ h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg' }), h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg' }) ] } } }) await sleep(100) await wrapper.find('.n-carousel__dot').trigger('click') await wrapper.find('.n-carousel__dot').trigger('keydown', { code: 'ArrowRight' }) await sleep(100) expect( wrapper.findAll('.n-carousel__dot')[1].attributes('aria-selected') ).toBe('true') await wrapper.find('.n-carousel__dot').trigger('keydown', { code: 'ArrowLeft' }) await sleep(100) expect( wrapper.findAll('.n-carousel__dot')[0].attributes('aria-selected') ).toBe('true') wrapper.unmount() }) it('should work with `space-between` prop', async () => { const wrapper = mount(NCarousel, { slots: { default: () => { return [ h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg' }), h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg' }) ] } } }) await sleep(100) expect( wrapper.find('.n-carousel__slide').attributes('style') ).not.toContain('margin-right: 25px;') await wrapper.setProps({ spaceBetween: 25 }) expect(wrapper.find('.n-carousel__slide').attributes('style')).toContain( 'margin-right: 25px;' ) wrapper.unmount() }) it('should work with `show-dots` prop', async () => { const wrapper = mount(NCarousel, { slots: { default: () => { return [ h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg' }), h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg' }) ] } } }) await sleep(100) expect(wrapper.find('.n-carousel__dots').exists()).toBe(true) await wrapper.setProps({ showDots: false }) await sleep(100) expect(wrapper.find('.n-carousel__dots').exists()).not.toBe(true) wrapper.unmount() }) it('should work with `on-update:current-index` prop', async () => { const onUpdate = vi.fn() const wrapper = mount(NCarousel, { props: { onUpdateCurrentIndex: onUpdate }, slots: { default: () => { return [ h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg' }), h('img', { style: 'width: 100%; height: 240px; object-fit: cover;', src: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg' }) ] } } }) await sleep(100) await wrapper.findAll('.n-carousel__dot')[1].trigger('click') expect(onUpdate).toHaveBeenCalled() wrapper.unmount() }) }) ================================================ FILE: src/carousel/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NCarousel } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/cascader/demos/enUS/action.demo.vue ================================================ # Slots Is there anybody who needs slots on a cascader menu? ================================================ FILE: src/cascader/demos/enUS/check-strategy.demo.vue ================================================ # Setting check strategy Set the way to show checked options. `all` means showing all checked nodes. `parent` means showing all checked parent nodes when all child node are checked. `child` means showing all child nodes. ================================================ FILE: src/cascader/demos/enUS/custom-field.demo.vue ================================================ # Customizing Fields Various data would come from backend. ================================================ FILE: src/cascader/demos/enUS/custom-render.demo.vue ================================================ # Customized rendering The `render-label` can be used to batch render cascader menu options. ================================================ FILE: src/cascader/demos/enUS/focus.demo.vue ================================================ # Focus & blur manually ================================================ FILE: src/cascader/demos/enUS/index.demo-entry.md ================================================ # Cascader Cascader can be used to display and select tree structured data. ## Demos ```demo single.vue multiple.vue size.vue single-lazy.vue multiple-lazy.vue action.vue virtual.vue check-strategy.vue custom-field.vue custom-render.vue focus.vue status.vue ``` ## API ### Cascader Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | allow-checking-not-loaded | `boolean` | `false` | Whether to allow cascade checking on not loaded nodes. If you want to use this, you should know the `value` may be incomplete. Also, you should aware about the consistency bewteen naive's checking logic and your backend's checking logic, especially when there are disabled nodes. | 2.28.1 | | cascade | `boolean` | `true` | Whether to cascade the checkbox selection onto children. | | | check-strategy | `string` | `'all'` | The way to show checked options. `all` means showing all checked node. `parent` means showing all checked parent node when all child node are checked (not working in single select mode). `child` means showing all child node. | | | children-field | `string` | `'children'` | The children field in `CascaderOption`. | | | clearable | `boolean` | `false` | Whether the cascader is clearable. | | | clear-filter-after-select | `boolean` | `true` | When multiple and filter is true, whether to clear filter keyword after select an option. | 2.25.3 | | default-value | `string \| number \| Array \| null` | `null` | Data selected by default if no value is set. | | | disabled | `boolean` | `false` | Whether to disable the cascader. | | | disabled-field | `string` | `'disabled'` | The disabled field in `CascaderOption`. | 2.32.2 | | ellipsis-tag-popover-props | `PopoverProps` | `undefined` | `popover` props of the preview ellipsis tag. | 2.37.0 | | expand-trigger | `'click' \| 'hover'` | `'click'` | If `remote` is set, `'hover'` won't work. | | | filterable | `boolean` | `false` | Note: If `remote` is set, this won't have any effect. | | | filter | `(pattern: string, option: CascaderOption, path: CascaderOption[]) => boolean` | A string based filter algorithm. | Filter function of the cascader. | | | filter-menu-props | `HTMLAttributes` | `undefined` | The filter menu's dom props. | 2.27.0 | | get-column-style | `(detail: { level: number }) => string \| object` | `undefined` | Function that resolves column style. `level` starts from `0`. | 2.38.2 | | value-field | `string` | `'value'` | The value field in `CascaderOption`. | | | label-field | `string` | `'label'` | The label field in `CascaderOption`. | | | max-tag-count | `number \| 'responsive'` | `undefined` | Max tag count in multiple select mode. `responsive` will keep all the tags in single line. | | | menu-props | `HTMLAttributes` | `undefined` | The menu's dom props. | 2.27.0 | | multiple | `boolean` | `false` | Whether to allow multiple options being selected. | | | options | `CascaderOption[]` | `[]` | Options of the cascader. | | | placeholder | `string` | `'Please Select'` | Placeholder text. | | | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end'` | `'bottom-start'` | Cascader placement. | 2.25.0 | | remote | `boolean` | `false` | Whether to obtain data remotely. | | | render-prefix | `(info: { option: CascaderOption, node: VNode \| null, checked: boolean }) => VNodeChild` | `undefined` | Render function of all the options' prefix. | 2.38.2 | | render-label | `(option: CascaderOption, checked: boolean) => VNodeChild` | `undefined` | Render function for cascader menu option label. | 2.24.0 | | render-suffix | `(info: { option: CascaderOption, node: VNode \| null, checked: boolean }) => VNodeChild` | `undefined` | Render function of all the options' suffix. | 2.38.2 | | scrollbar-props | `ScrollbarProps` | `undefined` | See [Scrollbar props](scrollbar#Scrollbar-Props) | 2.44.0 | | separator | `string` | `' / '` | Selected option path value separator (used with `show-path`). | | | show | `boolean` | `undefined` | Whether to show the menu. | | | show-path | `boolean` | `true` | Whether to show the selected options as a path. | | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Cascader size. | | | spin-props | `{ strokeWidth?: number, stroke?: string, scale?: number, radius?: number }` | `undefined` | Loading icon properties. | 2.44.0 | | status | `'success' \| 'warning' \| 'error'` | `undefined` | Validation status. | 2.27.0 | | to | `string \| HTMLElement \| false` | `body` | Container node of the menu. `false` will keep it not detached. | | | value | `string \| number \| Array \| null` | `undefined` | Value of the cascader (if being set manually). | | | virtual-scroll | `boolean` | `true` | Whether to enable virtual scrolling. | | | on-blur | `() => void` | `undefined` | Callback on blurred. | | | on-focus | `() => void` | `undefined` | Callback on focused. | | | on-load | `(option: CascaderOption) => Promise` | `undefined` | Callback when a node is loaded. Set `option.children` in the returned promise. Loading will stop after the promise is resolved or rejected. | | | on-update:show | `(value: boolean) => void` | `undefined` | Callback executed when menu is opened & closed. | | | on-update:value | `(value: string \| number \| Array \| null, option: CascaderOption \| Array \| null, pathValues: Array \| Array \| null) => void` | `undefined` | Callback executed when the value changes. | | #### CascaderOption Properties | Name | Type | Description | Version | | --- | --- | --- | --- | | label | `string` | Label of the option. | | | value | `string \| number` | Value of the option. | | | disabled? | `boolean` | Whether this option is disabled. | | | children? | `CascaderOption` | The children options of this option. | | ### Cascader Slots | Name | Parameters | Description | Version | | --- | --- | --- | --- | | action | `()` | Action content displayed in the cascading menu. | | | arrow | `()` | Arrow content displayed in the cascading menu. | 2.32.2 | | empty | `()` | Empty state slot for the options cascading menu. | 2.22.0 | | not-found | `()` | Data not found slot when searching. | 2.34.0 | ### Cascader Methods | Name | Type | Description | Version | | --- | --- | --- | --- | | blur | `() => void` | Blur. | 2.24.2 | | focus | `() => void` | Focus. | 2.24.2 | | getCheckedData | `() => { keys: Array, options: Array }` | Get checked data. | 2.34.0 | | getIndeterminateData | `() => { keys: Array, options: Array }` | Get indeterminate data. | 2.34.0 | ================================================ FILE: src/cascader/demos/enUS/multiple-lazy.demo.vue ================================================ # Multiple (async) ================================================ FILE: src/cascader/demos/enUS/multiple.demo.vue ================================================ # Multiple ================================================ FILE: src/cascader/demos/enUS/single-lazy.demo.vue ================================================ # Single (async) ================================================ FILE: src/cascader/demos/enUS/single.demo.vue ================================================ # Single ================================================ FILE: src/cascader/demos/enUS/size.demo.vue ================================================ # Size Cascader has `small`, `medium` and `large` sizes. ================================================ FILE: src/cascader/demos/enUS/status.demo.vue ================================================ # Validation status Validation status can be applied outside form. ================================================ FILE: src/cascader/demos/enUS/virtual.demo.vue ================================================ # Large data In this example there are 5000 \* 2 \* 2 = 20000 entries. ================================================ FILE: src/cascader/demos/zhCN/action.demo.vue ================================================ # 插槽 有人要在级联菜单里用这些插槽吗？ ================================================ FILE: src/cascader/demos/zhCN/check-strategy.demo.vue ================================================ # 指定勾选策略 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点。 ================================================ FILE: src/cascader/demos/zhCN/custom-field.demo.vue ================================================ # 自定义字段 后端会传来各种各样的数据。 ================================================ FILE: src/cascader/demos/zhCN/custom-render.demo.vue ================================================ # 自定义渲染 使用 `render-label` 可以批量控制 cascader 菜单的选项渲染。 ================================================ FILE: src/cascader/demos/zhCN/default-value-debug.demo.vue ================================================ # Default value debug ================================================ FILE: src/cascader/demos/zhCN/focus.demo.vue ================================================ # 手动 focus & blur ================================================ FILE: src/cascader/demos/zhCN/index.demo-entry.md ================================================ # 级联选择 Cascader 用来选一些树型信息。 ## 演示 ```demo single.vue multiple.vue size.vue single-lazy.vue multiple-lazy.vue action.vue virtual.vue check-strategy.vue custom-field.vue custom-render.vue focus.vue status.vue default-value-debug.vue ``` ## API ### Cascader Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | allow-checking-not-loaded | `boolean` | `false` | 是否允许级联勾选还没有完全加载的节点。如果你要用这个属性，请记住 `value` 可能是不完整的，并且请注意勾选行为和后端计算逻辑的一致性，尤其是有禁用节点的情况下 | 2.28.1 | | bordered | `boolean` | `undefined` | 是否显示输入框边框 | | | cascade | `boolean` | `true` | 在多选时是否关联选项 | | | check-strategy | `string` | `'all'` | 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时，对于单选无效）；`child` 表示只显示子节点 | | | children-field | `string` | `'children'` | 替代 `CascaderOption` 中的 children 字段名 | | | clearable | `boolean` | `false` | 值是否可清除 | | | clear-filter-after-select | `boolean` | `true` | 是否在可过滤和多选的情况下选中一个选项后保留当前的搜索关键词 | 2.25.3 | | default-value | `string \| number \| Array \| null` | `null` | 级联菜单默认选中的数据 | | | disabled | `boolean` | `false` | 是否禁用 | | | disabled-field | `string` | `'disabled'` | 替代 `CascaderOption` 中的 disabled 字段名 | 2.32.2 | | ellipsis-tag-popover-props | `PopoverProps` | `undefined` | 选中选项过多省略显示时，预览弹出 `popover` 的属性 | 2.37.0 | | expand-trigger | `'click' \| 'hover'` | `'click'` | 在 `remote` 被设定时 `'hover'` 不生效 | | | filterable | `boolean` | `false` | `remote` 被设定时不生效 | | | filter | `(pattern: string, option: CascaderOption, path: CascaderOption[]) => boolean` | 一个基于字符串的过滤算法 | 过滤选项的函数 | | | filter-menu-props | `HTMLAttributes` | `undefined` | 可过滤菜单的 DOM 属性 | 2.27.0 | | get-column-style | `(detail: { level: number }) => string \| object` | `undefined` | 获取列样式的函数，`level` 从 `0` 开始 | 2.38.2 | | value-field | `string` | `'value'` | 替代 `CascaderOption` 中的 value 字段名 | | | label-field | `string` | `'label'` | 替代 `CascaderOption` 中的 label 字段名 | | | max-tag-count | `number \| 'responsive'` | `undefined` | 多选标签的最大显示数量，`responsive` 会将所有标签保持在一行 | | | menu-props | `HTMLAttributes` | `undefined` | 菜单的 DOM 属性 | 2.27.0 | | multiple | `boolean` | `false` | 是否支持多选 | | | options | `CascaderOption[]` | `[]` | 填充的 options 数据 | | | placeholder | `string` | `'请选择'` | 提示信息 | | | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end'` | `'bottom-start'` | 弹出位置 | 2.25.0 | | remote | `boolean` | `false` | 是否远程获取数据 | | | render-prefix | `(info: { option: CascaderOption, node: VNode \| null, checked: boolean }) => VNodeChild` | `undefined` | 节点前缀的渲染函数 | 2.38.2 | | render-label | `(option: CascaderOption, checked: boolean) => VNodeChild` | `undefined` | Cascader 菜单选项标签渲染函数 | 2.24.0 | | render-suffix | `(info: { option: CascaderOption, checked: boolean }) => VNodeChild` | `undefined` | 节点后缀的渲染函数 | 2.38.2 | | scrollbar-props | `ScrollbarProps` | `undefined` | See [Scrollbar props](scrollbar#Scrollbar-Props) | 2.44.0 | | separator | `string` | `' / '` | 数据分隔符 | | | show | `boolean` | `undefined` | 是否打开菜单 | | | show-path | `boolean` | `true` | 是否在选择器中显示选项路径 | | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 | | | spin-props | `{ strokeWidth?: number, stroke?: string, scale?: number, radius?: number }` | `undefined` | 加载图标的属性 | 2.44.0 | | status | `'success' \| 'warning' \| 'error'` | `undefined` | 验证状态 | 2.27.0 | | to | `string \| HTMLElement \| false` | `body` | 菜单的容器节点，`false` 会待在原地 | | | value | `string \| number \| Array \| null` | `undefined` | 级联选择的数据受控 | | | virtual-scroll | `boolean` | `true` | 是否支持虚拟滚动 | | | on-blur | `() => void` | `undefined` | 用户 blur 时执行的回调 | | | on-focus | `() => void` | `undefined` | 用户 focus 时执行的回调 | | | on-load | `(option: CascaderOption) => Promise` | `undefined` | 在点击未加载完成节点时的回调，在返回的 promise 中设定 `option.children`，在返回的 promise resolve 或 reject 之后完成加载 | | | on-update:show | `(value: boolean) => void` | `undefined` | 菜单打开关闭的回调 | | | on-update:value | `(value: string \| number \| Array \| null, option: CascaderOption \| Array \| null, pathValues: Array \| Array \| null) => void` | `undefined` | 值改变时执行的回调 | | #### CascaderOption Properties | 名称 | 类型 | 描述 | 版本 | | --------- | ------------------ | ------------------------ | ---- | | label | `string` | label 标签，用于展示信息 | | | value | `string \| number` | 对应 label 的 value 值 | | | disabled? | `boolean` | 该项是否禁用 | | | children? | `CascaderOption` | 该项的子项数据 | | ### Cascader Slots | 名称 | 参数 | 描述 | 版本 | | --------- | ---- | -------------------------------- | ------ | | action | `()` | 级联菜单中显示的 action 填充内容 | | | arrow | `()` | 箭头的 slot | 2.32.2 | | empty | `()` | 级联菜单无数据时的 slot | 2.22.0 | | not-found | `()` | 搜索不到数据时候的 slot | 2.34.0 | ### Cascader Methods | 名称 | 类型 | 说明 | 版本 | | --- | --- | --- | --- | | blur | `() => void` | 失焦 | 2.24.2 | | focus | `() => void` | 聚焦 | 2.24.2 | | getCheckedData | `() => { keys: Array, options: Array }` | 获取选中的数据 | 2.34.0 | | getIndeterminateData | `() => { keys: Array, options: Array }` | 获取半选的数据 | 2.34.0 | ================================================ FILE: src/cascader/demos/zhCN/multiple-lazy.demo.vue ================================================ # 多项（异步） ================================================ FILE: src/cascader/demos/zhCN/multiple.demo.vue ================================================ # 多项 ================================================ FILE: src/cascader/demos/zhCN/single-lazy.demo.vue ================================================ # 单项（异步） ================================================ FILE: src/cascader/demos/zhCN/single.demo.vue ================================================ # 单选 ================================================ FILE: src/cascader/demos/zhCN/size.demo.vue ================================================ # 尺寸 级联选择有 `small`、`medium` 和 `large` 尺寸。 ================================================ FILE: src/cascader/demos/zhCN/status.demo.vue ================================================ # 验证状态 输入的验证状态可以脱离表单使用。 ================================================ FILE: src/cascader/demos/zhCN/virtual.demo.vue ================================================ # 大量数据 下面这个例子有 5000 \* 2 \* 2 = 20000 条数据。 ================================================ FILE: src/cascader/index.ts ================================================ export { cascaderProps, default as NCascader } from './src/Cascader' export type { CascaderProps, CascaderSlots } from './src/Cascader' export type { CascaderInst, CascaderOption } from './src/interface' export type * from './src/public-types' ================================================ FILE: src/cascader/src/Cascader.tsx ================================================ import type { CheckStrategy } from 'treemate' import type { CSSProperties, HTMLAttributes, PropType, SlotsType, VNode, VNodeChild } from 'vue' import type { FollowerInst, FollowerPlacement } from 'vueuc' import type { InternalSelectionInst, ScrollbarProps } from '../../_internal' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils' import type { FormValidationStatus } from '../../form/src/public-types' import type { PopoverProps } from '../../popover' import type { SelectBaseOption } from '../../select/src/interface' import type { CascaderTheme } from '../styles' import type { CascaderInst, CascaderMenuInstance, CascaderOption, ExpandTrigger, Filter, Key, OnLoad, OnUpdateValue, OnUpdateValueImpl, SelectMenuInstance, Value } from './interface' import type { CascaderSize, CascaderSpinProps } from './public-types' import { changeColor, depx, getPreciseEventTarget, happensIn } from 'seemly' import { createTreeMate, SubtreeNotLoadedError } from 'treemate' import { useIsMounted, useMergedState } from 'vooks' import { computed, defineComponent, h, isReactive, nextTick, provide, ref, toRef, watch, watchEffect } from 'vue' import { VBinder, VFollower, VTarget } from 'vueuc' import { NInternalSelection } from '../../_internal' import { useConfig, useFormItem, useLocale, useTheme, useThemeClass } from '../../_mixins' import { call, markEventEffectPerformed, useAdjustedTo, warnOnce } from '../../_utils' import { cascaderLight } from '../styles' import CascaderMenu from './CascaderMenu' import CascaderSelectMenu from './CascaderSelectMenu' import { cascaderInjectionKey } from './interface' import style from './styles/index.cssr' import { getPathLabel, getRawNodePath } from './utils' export const cascaderProps = { ...(useTheme.props as ThemeProps), allowCheckingNotLoaded: Boolean, to: useAdjustedTo.propTo, bordered: { type: Boolean as PropType, default: undefined }, options: { type: Array as PropType, default: () => [] }, value: [String, Number, Array] as PropType, defaultValue: { type: [String, Number, Array] as PropType, default: null }, placeholder: String, multiple: Boolean, size: String as PropType, filterable: Boolean, disabled: { type: Boolean as PropType, default: undefined }, disabledField: { type: String, default: 'disabled' }, expandTrigger: { type: String as PropType, default: 'click' }, clearable: Boolean, clearFilterAfterSelect: { type: Boolean, default: true }, remote: Boolean, onLoad: Function as PropType, separator: { type: String, default: ' / ' }, filter: Function as PropType, placement: { type: String as PropType, default: 'bottom-start' }, cascade: { type: Boolean, default: true }, leafOnly: Boolean, showPath: { type: Boolean, default: true }, show: { type: Boolean as PropType, default: undefined }, maxTagCount: [String, Number] as PropType, ellipsisTagPopoverProps: Object as PropType, menuProps: Object as PropType, filterMenuProps: Object as PropType, virtualScroll: { type: Boolean, default: true }, checkStrategy: { type: String as PropType, default: 'all' }, valueField: { type: String, default: 'value' }, labelField: { type: String, default: 'label' }, childrenField: { type: String, default: 'children' }, renderLabel: Function as PropType< (option: CascaderOption, checked: boolean) => VNodeChild >, status: String as PropType, 'onUpdate:value': [Function, Array] as PropType>, onUpdateValue: [Function, Array] as PropType>, 'onUpdate:show': [Function, Array] as PropType< MaybeArray<(show: boolean) => void> >, onUpdateShow: [Function, Array] as PropType< MaybeArray<(show: boolean) => void> >, onBlur: Function as PropType<(e: FocusEvent) => void>, onFocus: Function as PropType<(e: FocusEvent) => void>, getColumnStyle: Function as PropType< (detail: { level: number }) => string | CSSProperties >, spinProps: Object as PropType, renderPrefix: Function as PropType< (props: { option: CascaderOption checked: boolean node: VNode | null }) => VNodeChild >, renderSuffix: Function as PropType< (props: { option: CascaderOption checked: boolean node: VNode | null }) => VNodeChild >, scrollbarProps: Object as PropType, // deprecated onChange: [Function, Array] as PropType | undefined> } as const export type CascaderProps = ExtractPublicPropTypes export interface CascaderSlots { action?: () => VNode[] arrow?: () => VNode[] empty?: () => VNode[] 'not-found'?: () => VNode[] } export default defineComponent({ name: 'Cascader', props: cascaderProps, slots: Object as SlotsType, setup(props, { slots }) { if (__DEV__) { watchEffect(() => { if (props.leafOnly) { warnOnce( 'cascader', '`leaf-only` is deprecated, please use `check-strategy="child"` instead' ) } if (props.onChange !== undefined) { warnOnce( 'cascader', '`on-change` is deprecated, please use `on-update:value` instead.' ) } }) } const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef, inlineThemeDisabled, mergedComponentPropsRef } = useConfig(props) const themeRef = useTheme( 'Cascader', '-cascader', style, cascaderLight, props, mergedClsPrefixRef ) const { localeRef } = useLocale('Cascader') const uncontrolledValueRef = ref(props.defaultValue) const controlledValueRef = computed(() => props.value) const mergedValueRef = useMergedState( controlledValueRef, uncontrolledValueRef ) const mergedCheckStrategyRef = computed(() => { return props.leafOnly ? 'child' : props.checkStrategy }) const patternRef = ref('') const formItem = useFormItem(props, { mergedSize: (NFormItem) => { const { size } = props if (size) return size const { mergedSize: formItemSize } = NFormItem || {} if (formItemSize?.value) return formItemSize.value as CascaderSize const configSize = mergedComponentPropsRef?.value?.Cascader?.size if (configSize) return configSize return 'medium' } }) const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem const cascaderMenuInstRef = ref(null) const selectMenuInstRef = ref(null) const triggerInstRef = ref(null) const keyboardKeyRef = ref(null) const hoverKeyRef = ref(null) const loadingKeySetRef = ref>(new Set()) const selectMenuFollowerRef = ref(null) const cascaderMenuFollowerRef = ref(null) const adjustedToRef = useAdjustedTo(props) const focusedRef = ref(false) const addLoadingKey = (key: Key): void => { loadingKeySetRef.value.add(key) } const deleteLoadingKey = (key: Key): void => { loadingKeySetRef.value.delete(key) } const treeMateRef = computed(() => { const { valueField, childrenField, disabledField } = props return createTreeMate(props.options, { getDisabled(node) { return (node as any)[disabledField] }, getKey(node) { return (node as any)[valueField] }, getChildren(node) { return (node as any)[childrenField] } }) }) const mergedKeysRef = computed(() => { const { cascade, multiple } = props if (multiple && Array.isArray(mergedValueRef.value)) { return treeMateRef.value.getCheckedKeys(mergedValueRef.value, { cascade, allowNotLoaded: props.allowCheckingNotLoaded }) } else { return { checkedKeys: [], indeterminateKeys: [] } } }) const checkedKeysRef = computed(() => mergedKeysRef.value.checkedKeys) const indeterminateKeysRef = computed( () => mergedKeysRef.value.indeterminateKeys ) const menuModelRef = computed(() => { const { treeNodePath, treeNode } = treeMateRef.value.getPath( hoverKeyRef.value ) let ret if (treeNode === null) { ret = [treeMateRef.value.treeNodes] } else { ret = treeNodePath.map(treeNode => treeNode.siblings) if ( !treeNode.isLeaf && !loadingKeySetRef.value.has(treeNode.key) && treeNode.children ) { ret.push(treeNode.children) } } return ret }) const hoverKeyPathRef = computed(() => { const { keyPath } = treeMateRef.value.getPath(hoverKeyRef.value) return keyPath }) const optionHeightRef = computed(() => { return themeRef.value.self.optionHeight }) if (isReactive(props.options)) { watch(props.options, (value, oldValue) => { if (!(value === oldValue)) { hoverKeyRef.value = null keyboardKeyRef.value = null } }) } const uncontrolledShowRef = ref(false) function doUpdateShow(value: boolean): void { const { onUpdateShow, 'onUpdate:show': _onUpdateShow } = props if (onUpdateShow) { call(onUpdateShow, value) } if (_onUpdateShow) { call(_onUpdateShow, value) } uncontrolledShowRef.value = value } function doUpdateValue( value: Value | null, option: CascaderOption | null | Array, optionPath: null | CascaderOption[] | Array ): void { const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props const { nTriggerFormInput, nTriggerFormChange } = formItem if (onUpdateValue) { call(onUpdateValue as OnUpdateValueImpl, value, option, optionPath) } if (_onUpdateValue) { call(_onUpdateValue as OnUpdateValueImpl, value, option, optionPath) } if (onChange) { call(onChange as OnUpdateValueImpl, value, option, optionPath) } uncontrolledValueRef.value = value nTriggerFormInput() nTriggerFormChange() } function updateKeyboardKey(key: Key | null): void { keyboardKeyRef.value = key } function updateHoverKey(key: Key | null): void { hoverKeyRef.value = key } function getOptionsByKeys(keys: Key[]): Array { const { value: { getNode } } = treeMateRef return keys.map(keys => getNode(keys)?.rawNode || null) } function doCheck(key: Key): boolean { const { cascade, multiple, filterable } = props const { value: { check, getNode, getPath } } = treeMateRef if (multiple) { try { const { checkedKeys } = check(key, mergedKeysRef.value.checkedKeys, { cascade, checkStrategy: mergedCheckStrategyRef.value, allowNotLoaded: props.allowCheckingNotLoaded }) doUpdateValue( checkedKeys, getOptionsByKeys(checkedKeys), checkedKeys.map(checkedKey => getRawNodePath(getPath(checkedKey)?.treeNodePath) ) ) if (filterable) focusSelectionInput() keyboardKeyRef.value = key hoverKeyRef.value = key } catch (err) { if (err instanceof SubtreeNotLoadedError) { if (cascaderMenuInstRef.value) { const tmNode = getNode(key) if (tmNode !== null) { cascaderMenuInstRef.value.showErrorMessage( (tmNode.rawNode as any)[props.labelField] as string ) } } } else { throw err } } } else { if (mergedCheckStrategyRef.value === 'child') { const tmNode = getNode(key) if (tmNode?.isLeaf) { doUpdateValue( key, tmNode.rawNode, getRawNodePath(getPath(key).treeNodePath) ) } else { return false } } else { const tmNode = getNode(key) doUpdateValue( key, tmNode?.rawNode || null, getRawNodePath(getPath(key)?.treeNodePath) ) } } return true } function doUncheck(key: Key): void { const { cascade, multiple } = props if (multiple) { const { value: { uncheck, getNode, getPath } } = treeMateRef const { checkedKeys } = uncheck(key, mergedKeysRef.value.checkedKeys, { cascade, checkStrategy: mergedCheckStrategyRef.value, allowNotLoaded: props.allowCheckingNotLoaded }) doUpdateValue( checkedKeys, checkedKeys.map(checkedKey => getNode(checkedKey)?.rawNode || null), checkedKeys.map(checkedKey => getRawNodePath(getPath(checkedKey)?.treeNodePath) ) ) keyboardKeyRef.value = key hoverKeyRef.value = key } } const selectedOptionsRef = computed(() => { if (props.multiple) { const { showPath, separator, labelField, cascade } = props const { getCheckedKeys, getNode } = treeMateRef.value const value = getCheckedKeys(checkedKeysRef.value, { cascade, checkStrategy: mergedCheckStrategyRef.value, allowNotLoaded: props.allowCheckingNotLoaded }).checkedKeys return value.map((key) => { const node = getNode(key) if (node === null) { return { label: String(key), value: key } } else { return { label: showPath ? getPathLabel(node, separator, labelField) : (node.rawNode as any)[labelField], value: node.key } } }) } else { return [] } }) const selectedOptionRef = computed(() => { const { multiple, showPath, separator, labelField } = props const { value } = mergedValueRef if (!multiple && !Array.isArray(value)) { const { getNode } = treeMateRef.value if (value === null) { return null } const node = getNode(value) if (node === null) { return { label: String(value), value } } else { return { label: showPath ? getPathLabel(node, separator, labelField) : (node.rawNode as any)[labelField], value: node.key } } } else { return null } }) const controlledShowRef = toRef(props, 'show') const mergedShowRef = useMergedState(controlledShowRef, uncontrolledShowRef) const localizedPlaceholderRef = computed(() => { const { placeholder } = props if (placeholder !== undefined) return placeholder return localeRef.value.placeholder }) // select option related const showSelectMenuRef = computed(() => { return !!(props.filterable && patternRef.value) }) // init hover key watch( mergedShowRef, (show) => { if (!show) return if (props.multiple) return const { value } = mergedValueRef if (!Array.isArray(value) && value !== null) { keyboardKeyRef.value = value hoverKeyRef.value = value void nextTick(() => { if (!mergedShowRef.value) return const { value: hoverKey } = hoverKeyRef if (mergedValueRef.value !== null) { const node = treeMateRef.value.getNode(hoverKey) if (node) { cascaderMenuInstRef.value?.scroll( node.level, node.index, depx(optionHeightRef.value) ) } } }) } else { keyboardKeyRef.value = null hoverKeyRef.value = null } }, { immediate: true } ) // --- methods function doBlur(e: FocusEvent): void { const { onBlur } = props const { nTriggerFormBlur } = formItem if (onBlur) call(onBlur, e) nTriggerFormBlur() } function doFocus(e: FocusEvent): void { const { onFocus } = props const { nTriggerFormFocus } = formItem if (onFocus) call(onFocus, e) nTriggerFormFocus() } function focusSelectionInput(): void { triggerInstRef.value?.focusInput() } function focusSelection(): void { triggerInstRef.value?.focus() } function openMenu(): void { if (!mergedDisabledRef.value) { patternRef.value = '' doUpdateShow(true) if (props.filterable) { focusSelectionInput() } } } function closeMenu(returnFocus = false): void { if (returnFocus) { focusSelection() } doUpdateShow(false) patternRef.value = '' } function handleCascaderMenuClickOutside(e: MouseEvent): void { if (showSelectMenuRef.value) return if (mergedShowRef.value) { if ( !triggerInstRef.value?.$el.contains( getPreciseEventTarget(e) as Node | null ) ) { closeMenu() } } } function handleSelectMenuClickOutside(e: MouseEvent): void { if (!showSelectMenuRef.value) return handleCascaderMenuClickOutside(e) } function clearPattern(): void { if (props.clearFilterAfterSelect) patternRef.value = '' } // --- keyboard function move(direction: 'prev' | 'next' | 'child' | 'parent'): void { const { value: keyboardKey } = keyboardKeyRef const { value: treeMate } = treeMateRef switch (direction) { case 'prev': if (keyboardKey !== null) { const node = treeMate.getPrev(keyboardKey, { loop: true }) if (node !== null) { updateKeyboardKey(node.key) cascaderMenuInstRef.value?.scroll( node.level, node.index, depx(optionHeightRef.value) ) } } break case 'next': if (keyboardKey === null) { const node = treeMate.getFirstAvailableNode() if (node !== null) { updateKeyboardKey(node.key) cascaderMenuInstRef.value?.scroll( node.level, node.index, depx(optionHeightRef.value) ) } } else { const node = treeMate.getNext(keyboardKey, { loop: true }) if (node !== null) { updateKeyboardKey(node.key) cascaderMenuInstRef.value?.scroll( node.level, node.index, depx(optionHeightRef.value) ) } } break case 'child': if (keyboardKey !== null) { const currentNode = treeMate.getNode(keyboardKey) if (currentNode !== null) { if (currentNode.shallowLoaded) { const node = treeMate.getChild(keyboardKey) if (node !== null) { updateHoverKey(keyboardKey) updateKeyboardKey(node.key) } } else { const { value: loadingKeySet } = loadingKeySetRef if (!loadingKeySet.has(keyboardKey)) { addLoadingKey(keyboardKey) updateHoverKey(keyboardKey) const { onLoad } = props if (onLoad) { onLoad(currentNode.rawNode) .then(() => { deleteLoadingKey(keyboardKey) }) .catch(() => { deleteLoadingKey(keyboardKey) }) } } } } } break case 'parent': if (keyboardKey !== null) { const node = treeMate.getParent(keyboardKey) if (node !== null) { updateKeyboardKey(node.key) const parentNode = node.getParent() if (parentNode === null) { updateHoverKey(null) } else { updateHoverKey(parentNode.key) } } } break } } function handleKeydown(e: KeyboardEvent): void { switch (e.key) { case ' ': case 'ArrowDown': case 'ArrowUp': if (props.filterable && mergedShowRef.value) { break } e.preventDefault() break } if (happensIn(e, 'action')) return switch (e.key) { case ' ': if (props.filterable) return // eslint-disable-next-line no-fallthrough case 'Enter': if (!mergedShowRef.value) { openMenu() } else { const { value: showSelectMenu } = showSelectMenuRef const { value: keyboardKey } = keyboardKeyRef if (!showSelectMenu) { if (keyboardKey !== null) { if ( checkedKeysRef.value.includes(keyboardKey) || indeterminateKeysRef.value.includes(keyboardKey) ) { doUncheck(keyboardKey) } else { const checkIsValid = doCheck(keyboardKey) if (!props.multiple && checkIsValid) { closeMenu(true) } } } } else { if (selectMenuInstRef.value) { const hasCorrespondingOption = selectMenuInstRef.value.enter() if (hasCorrespondingOption) clearPattern() } } } break case 'ArrowUp': e.preventDefault() if (mergedShowRef.value) { if (showSelectMenuRef.value) { selectMenuInstRef.value?.prev() } else { move('prev') } } break case 'ArrowDown': e.preventDefault() if (mergedShowRef.value) { if (showSelectMenuRef.value) { selectMenuInstRef.value?.next() } else { move('next') } } else { openMenu() } break case 'ArrowLeft': e.preventDefault() if (mergedShowRef.value && !showSelectMenuRef.value) { move('parent') } break case 'ArrowRight': e.preventDefault() if (mergedShowRef.value && !showSelectMenuRef.value) { move('child') } break case 'Escape': if (mergedShowRef.value) { markEventEffectPerformed(e) closeMenu(true) } } } function handleMenuKeydown(e: KeyboardEvent): void { handleKeydown(e) } // --- search function handleClear(e: MouseEvent): void { e.stopPropagation() if (props.multiple) { doUpdateValue([], [], []) } else { doUpdateValue(null, null, null) } } function handleTriggerFocus(e: FocusEvent): void { if (!cascaderMenuInstRef.value?.$el.contains(e.relatedTarget as Node)) { focusedRef.value = true doFocus(e) } } function handleTriggerBlur(e: FocusEvent): void { if (!cascaderMenuInstRef.value?.$el.contains(e.relatedTarget as Node)) { focusedRef.value = false doBlur(e) closeMenu() } } function handleMenuFocus(e: FocusEvent): void { if (!triggerInstRef.value?.$el.contains(e.relatedTarget as Node)) { focusedRef.value = true doFocus(e) } } function handleMenuBlur(e: FocusEvent): void { if (!triggerInstRef.value?.$el.contains(e.relatedTarget as Node)) { focusedRef.value = false doBlur(e) } } function handleMenuMousedown(e: MouseEvent): void { if (!happensIn(e, 'action')) { if (props.multiple && props.filter) { e.preventDefault() focusSelectionInput() } } } function handleMenuTabout(): void { closeMenu(true) } function handleTriggerClick(): void { if (props.filterable) { openMenu() } else { if (mergedShowRef.value) { closeMenu(true) } else { openMenu() } } } function handlePatternInput(e: InputEvent): void { patternRef.value = (e.target as HTMLInputElement).value } function handleDeleteOption(option: SelectBaseOption): void { const { multiple } = props const { value: mergedValue } = mergedValueRef if ( multiple && Array.isArray(mergedValue) && option.value !== undefined ) { doUncheck(option.value) } else { doUpdateValue(null, null, null) } } // sync position function syncSelectMenuPosition(): void { selectMenuFollowerRef.value?.syncPosition() } function syncCascaderMenuPosition(): void { cascaderMenuFollowerRef.value?.syncPosition() } function handleTriggerResize(): void { if (mergedShowRef.value) { if (showSelectMenuRef.value) { syncSelectMenuPosition() } else { syncCascaderMenuPosition() } } } const showCheckboxRef = computed(() => { if (props.multiple && props.cascade) return true if (mergedCheckStrategyRef.value !== 'child') return true return false }) provide(cascaderInjectionKey, { slots, mergedClsPrefixRef, mergedThemeRef: themeRef, mergedValueRef, checkedKeysRef, indeterminateKeysRef, hoverKeyPathRef, mergedCheckStrategyRef, showCheckboxRef, cascadeRef: toRef(props, 'cascade'), multipleRef: toRef(props, 'multiple'), keyboardKeyRef, hoverKeyRef, remoteRef: toRef(props, 'remote'), loadingKeySetRef, expandTriggerRef: toRef(props, 'expandTrigger'), isMountedRef: useIsMounted(), onLoadRef: toRef(props, 'onLoad'), virtualScrollRef: toRef(props, 'virtualScroll'), optionHeightRef, localeRef, labelFieldRef: toRef(props, 'labelField'), renderLabelRef: toRef(props, 'renderLabel'), getColumnStyleRef: toRef(props, 'getColumnStyle'), renderPrefixRef: toRef(props, 'renderPrefix'), renderSuffixRef: toRef(props, 'renderSuffix'), spinPropsRef: toRef(props, 'spinProps'), syncCascaderMenuPosition, syncSelectMenuPosition, updateKeyboardKey, updateHoverKey, addLoadingKey, deleteLoadingKey, doCheck, doUncheck, closeMenu, handleSelectMenuClickOutside, handleCascaderMenuClickOutside, scrollbarPropsRef: toRef(props, 'scrollbarProps'), clearPattern }) const exposedMethods: CascaderInst = { focus: () => { triggerInstRef.value?.focus() }, blur: () => { triggerInstRef.value?.blur() }, getCheckedData: () => { if (showCheckboxRef.value) { const checkedKeys = checkedKeysRef.value return { keys: checkedKeys, options: getOptionsByKeys(checkedKeys) } } return { keys: [], options: [] } }, getIndeterminateData: () => { if (showCheckboxRef.value) { const indeterminateKeys = indeterminateKeysRef.value return { keys: indeterminateKeys, options: getOptionsByKeys(indeterminateKeys) } } return { keys: [], options: [] } } } const cssVarsRef = computed(() => { const { self: { optionArrowColor, optionTextColor, optionTextColorActive, optionTextColorDisabled, optionCheckMarkColor, menuColor, menuBoxShadow, menuDividerColor, menuBorderRadius, menuHeight, optionColorHover, optionHeight, optionFontSize, loadingColor, columnWidth }, common: { cubicBezierEaseInOut } } = themeRef.value return { '--n-bezier': cubicBezierEaseInOut, '--n-menu-border-radius': menuBorderRadius, '--n-menu-box-shadow': menuBoxShadow, '--n-menu-height': menuHeight, '--n-column-width': columnWidth, '--n-menu-color': menuColor, '--n-menu-divider-color': menuDividerColor, '--n-option-height': optionHeight, '--n-option-font-size': optionFontSize, '--n-option-text-color': optionTextColor, '--n-option-text-color-disabled': optionTextColorDisabled, '--n-option-text-color-active': optionTextColorActive, '--n-option-color-hover': optionColorHover, '--n-option-check-mark-color': optionCheckMarkColor, '--n-option-arrow-color': optionArrowColor, '--n-menu-mask-color': changeColor(menuColor, { alpha: 0.75 }), '--n-loading-color': loadingColor } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass('cascader', undefined, cssVarsRef, props) : undefined return { ...exposedMethods, handleTriggerResize, mergedStatus: mergedStatusRef, selectMenuFollowerRef, cascaderMenuFollowerRef, triggerInstRef, selectMenuInstRef, cascaderMenuInstRef, mergedBordered: mergedBorderedRef, mergedClsPrefix: mergedClsPrefixRef, namespace: namespaceRef, mergedValue: mergedValueRef, mergedShow: mergedShowRef, showSelectMenu: showSelectMenuRef, pattern: patternRef, treeMate: treeMateRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlaceholder: localizedPlaceholderRef, selectedOption: selectedOptionRef, selectedOptions: selectedOptionsRef, adjustedTo: adjustedToRef, menuModel: menuModelRef, handleMenuTabout, handleMenuFocus, handleMenuBlur, handleMenuKeydown, handleMenuMousedown, handleTriggerFocus, handleTriggerBlur, handleTriggerClick, handleClear, handleDeleteOption, handlePatternInput, handleKeydown, focused: focusedRef, optionHeight: optionHeightRef, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender } }, render() { const { mergedClsPrefix } = this return (
    {{ default: () => [ {{ default: () => ( {{ arrow: () => this.$slots.arrow?.() }} ) }} , {{ default: () => { this.onRender?.() const { menuProps } = this return ( {{ action: () => this.$slots.action?.(), empty: () => this.$slots.empty?.() }} ) } }} , {{ default: () => { this.onRender?.() const { filterMenuProps } = this return ( ) } }} ] }}
    ) } }) ================================================ FILE: src/cascader/src/CascaderMenu.tsx ================================================ import type { PropType } from 'vue' import type { FollowerPlacement } from 'vueuc' import type { MenuMaskRef } from '../../_internal/menu-mask' import type { CascaderMenuExposedMethods, CascaderSubmenuInstance, MenuModel, Value } from './interface' import { clickoutside } from 'vdirs' import { computed, defineComponent, h, inject, ref, Transition, withDirectives } from 'vue' import { NBaseMenuMask } from '../../_internal' import FocusDetector from '../../_internal/focus-detector' import { useConfig } from '../../_mixins' import { resolveSlot, resolveWrappedSlot, useOnResize } from '../../_utils' import { NEmpty } from '../../empty' import NCascaderSubmenu from './CascaderSubmenu' import { cascaderInjectionKey } from './interface' export default defineComponent({ name: 'NCascaderMenu', props: { value: [String, Number, Array] as PropType, placement: { type: String as PropType, default: 'bottom-start' }, show: Boolean, menuModel: { type: Array as PropType, required: true }, loading: Boolean, onFocus: { type: Function as PropType<(e: FocusEvent) => void>, required: true }, onBlur: { type: Function as PropType<(e: FocusEvent) => void>, required: true }, onKeydown: { type: Function as PropType<(e: KeyboardEvent) => void>, required: true }, onMousedown: { type: Function as PropType<(e: MouseEvent) => void>, required: true }, onTabout: { type: Function as PropType<() => void>, required: true } }, setup(props) { const { localeRef, isMountedRef, mergedClsPrefixRef, syncCascaderMenuPosition, handleCascaderMenuClickOutside, mergedThemeRef, getColumnStyleRef } = inject(cascaderInjectionKey)! const { mergedComponentPropsRef } = useConfig() const submenuInstRefs: CascaderSubmenuInstance[] = [] const maskInstRef = ref(null) const selfElRef = ref(null) function handleResize(): void { syncCascaderMenuPosition() } useOnResize(selfElRef, handleResize) function showErrorMessage(label: string): void { const { value: { loadingRequiredMessage } } = localeRef maskInstRef.value?.showOnce(loadingRequiredMessage(label)) } function handleClickOutside(e: MouseEvent): void { handleCascaderMenuClickOutside(e) } function handleFocusin(e: FocusEvent): void { const { value: selfEl } = selfElRef if (!selfEl) return if (!selfEl.contains(e.relatedTarget as Node)) { props.onFocus(e) } } function handleFocusout(e: FocusEvent): void { const { value: selfEl } = selfElRef if (!selfEl) return if (!selfEl.contains(e.relatedTarget as Node)) { props.onBlur(e) } } const exposedRef: CascaderMenuExposedMethods = { scroll(depth: number, index: number, elSize: number) { const submenuInst = submenuInstRefs[depth] if (submenuInst) { submenuInst.scroll(index, elSize) } }, showErrorMessage } return { isMounted: isMountedRef, mergedClsPrefix: mergedClsPrefixRef, selfElRef, submenuInstRefs, maskInstRef, mergedTheme: mergedThemeRef, mergedRenderEmpty: computed(() => { return mergedComponentPropsRef?.value?.Cascader?.renderEmpty }), getColumnStyle: getColumnStyleRef, handleFocusin, handleFocusout, handleClickOutside, ...exposedRef } }, render() { const { submenuInstRefs, mergedClsPrefix, mergedTheme } = this return ( {{ default: () => { if (!this.show) return null return withDirectives(
    {this.menuModel[0].length ? (
    {this.menuModel.map((submenuOptions, index) => ( { if (instance) { submenuInstRefs[index] = instance } }) as any } key={index} tmNodes={submenuOptions} depth={index + 1} /> ))}
    ) : (
    {resolveSlot(this.$slots.empty, () => { return [ this.mergedRenderEmpty?.() || ( ) ] })}
    )} {resolveWrappedSlot( this.$slots.action, children => children && (
    {children}
    ) )}
    , [ [ clickoutside, this.handleClickOutside, undefined as unknown as string, { capture: true } ] ] ) } }}     ) } }) ================================================ FILE: src/cascader/src/CascaderOption.tsx ================================================ import type { PropType, VNode } from 'vue' import type { TmNode } from './interface' import { happensIn } from 'seemly' import { useMemo } from 'vooks' import { computed, defineComponent, h, inject, Transition } from 'vue' import { NBaseIcon, NBaseLoading } from '../../_internal' import { CheckmarkIcon, ChevronRightIcon } from '../../_internal/icons' import { NCheckbox } from '../../checkbox' import { cascaderInjectionKey } from './interface' export default defineComponent({ name: 'NCascaderOption', props: { tmNode: { type: Object as PropType, required: true } }, setup(props) { const { expandTriggerRef, remoteRef, multipleRef, mergedValueRef, checkedKeysRef, indeterminateKeysRef, hoverKeyPathRef, keyboardKeyRef, loadingKeySetRef, cascadeRef, mergedCheckStrategyRef, onLoadRef, mergedClsPrefixRef, mergedThemeRef, labelFieldRef, showCheckboxRef, renderPrefixRef, renderSuffixRef, spinPropsRef, updateHoverKey, updateKeyboardKey, addLoadingKey, deleteLoadingKey, closeMenu, doCheck, doUncheck, renderLabelRef } = inject(cascaderInjectionKey)! const valueRef = computed(() => props.tmNode.key) const useHoverTriggerRef = computed(() => { const { value: expandTrigger } = expandTriggerRef const { value: remote } = remoteRef return !remote && expandTrigger === 'hover' }) const mergedHandleMouseEnterRef = computed(() => { if (useHoverTriggerRef.value) { return handleMouseEnter } return undefined }) const mergedHandleMouseMoveRef = computed(() => { if (useHoverTriggerRef.value) { return handleMouseMove } return undefined }) const checkedRef = useMemo(() => { const { value: multiple } = multipleRef if (!multiple) return mergedValueRef.value === valueRef.value return checkedKeysRef.value.includes(valueRef.value) }) const indeterminateRef = useMemo(() => { if (!multipleRef.value) return false return indeterminateKeysRef.value.includes(valueRef.value) }) const hoverPendingRef = useMemo(() => { return hoverKeyPathRef.value.includes(valueRef.value) }) const keyboardPendingRef = useMemo(() => { const { value: keyboardKey } = keyboardKeyRef if (keyboardKey === null) return false return keyboardKey === valueRef.value }) const isLoadingRef = useMemo(() => { if (remoteRef.value) { return loadingKeySetRef.value.has(valueRef.value) } return false }) const isLeafRef = computed(() => props.tmNode.isLeaf) const disabledRef = computed(() => props.tmNode.disabled) const labelRef = computed( () => (props.tmNode.rawNode as any)[labelFieldRef.value] ) const isShallowLoadedRef = computed(() => { return props.tmNode.shallowLoaded }) function handleClick(e: MouseEvent): void { if (disabledRef.value) return const { value: remote } = remoteRef const { value: loadingKeySet } = loadingKeySetRef const { value: onLoad } = onLoadRef const { value } = valueRef const { value: isLeaf } = isLeafRef const { value: isShallowLoaded } = isShallowLoadedRef if (!happensIn(e, 'checkbox')) { if (remote && !isShallowLoaded && !loadingKeySet.has(value) && onLoad) { addLoadingKey(value) onLoad(props.tmNode.rawNode) .then(() => { deleteLoadingKey(value) }) .catch(() => { deleteLoadingKey(value) }) } updateHoverKey(value) updateKeyboardKey(value) } if (isLeaf) { toggleCheckbox() } } function handleMouseEnter(): void { if (!useHoverTriggerRef.value || disabledRef.value) return const { value } = valueRef updateHoverKey(value) updateKeyboardKey(value) } function handleMouseMove(): void { if (!useHoverTriggerRef.value) return handleMouseEnter() } function handleCheckboxUpdateValue(): void { const { value: isLeaf } = isLeafRef if (!isLeaf) toggleCheckbox() } function toggleCheckbox(): void { const { value: multiple } = multipleRef const { value } = valueRef if (multiple) { if (indeterminateRef.value || checkedRef.value) { doUncheck(value) } else { doCheck(value) } } else { doCheck(value) closeMenu(true) } } return { checkStrategy: mergedCheckStrategyRef, multiple: multipleRef, cascade: cascadeRef, checked: checkedRef, indeterminate: indeterminateRef, hoverPending: hoverPendingRef, keyboardPending: keyboardPendingRef, isLoading: isLoadingRef, showCheckbox: showCheckboxRef, isLeaf: isLeafRef, disabled: disabledRef, label: labelRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, spinProps: spinPropsRef, handleClick, handleCheckboxUpdateValue, mergedHandleMouseEnter: mergedHandleMouseEnterRef, mergedHandleMouseMove: mergedHandleMouseMoveRef, renderLabel: renderLabelRef, renderPrefix: renderPrefixRef, renderSuffix: renderSuffixRef } }, render() { const { mergedClsPrefix, showCheckbox, renderLabel, renderPrefix, renderSuffix } = this let prefixNode: VNode | null = null if (showCheckbox || renderPrefix) { const originalNode = this.showCheckbox ? ( ) : null prefixNode = (
    {renderPrefix ? renderPrefix({ option: this.tmNode.rawNode, checked: this.checked, node: originalNode }) : originalNode}
    ) } let suffixNode: VNode | null = null const originalSuffixChild = (
    {!this.isLeaf ? ( {{ default: () => ( {{ default: () => }} ) }} ) : this.checkStrategy === 'child' && !(this.multiple && this.cascade) ? ( {{ default: () => this.checked ? ( {{ default: () => }} ) : null }} ) : null}
    ) suffixNode = (
    {renderSuffix ? renderSuffix({ option: this.tmNode.rawNode, checked: this.checked, node: originalSuffixChild }) : originalSuffixChild}
    ) return (
    {prefixNode} {renderLabel ? renderLabel(this.tmNode.rawNode, this.checked) : this.label} {suffixNode}
    ) } }) ================================================ FILE: src/cascader/src/CascaderSelectMenu.tsx ================================================ import type { TreeNode } from 'treemate' import type { PropType } from 'vue' import type { InternalSelectMenuRef } from '../../_internal' import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../select/src/interface' import type { CascaderOption, Filter, SelectMenuInstance, TmNode, Value } from './interface' import { createTreeMate } from 'treemate' import { clickoutside } from 'vdirs' import { computed, defineComponent, h, inject, ref, Transition, withDirectives } from 'vue' import { NInternalSelectMenu } from '../../_internal' import { resolveSlot } from '../../_utils' import { createTmOptions } from '../../select/src/utils' import { cascaderInjectionKey } from './interface' import { createSelectOptions } from './utils' export default defineComponent({ name: 'NCascaderSelectMenu', props: { value: { type: [String, Number, Array] as PropType, default: null }, show: Boolean, pattern: { type: String, default: '' }, multiple: Boolean, tmNodes: { type: Array as PropType, default: () => [] }, filter: Function as PropType, labelField: { type: String, required: true }, separator: { type: String, required: true } }, setup(props) { const { isMountedRef, mergedValueRef, mergedClsPrefixRef, mergedThemeRef, mergedCheckStrategyRef, slots: cascaderSlots, syncSelectMenuPosition, closeMenu, handleSelectMenuClickOutside, doUncheck: cascaderDoUncheck, doCheck: cascaderDoCheck, scrollbarPropsRef, clearPattern } = inject(cascaderInjectionKey)! const menuInstRef = ref(null) const selectOptionsRef = computed(() => { return createSelectOptions( props.tmNodes, mergedCheckStrategyRef.value === 'child', props.labelField, props.separator ) }) const mergedFilterRef = computed(() => { const { filter } = props if (filter) return filter const { labelField } = props return (pattern: string, _: CascaderOption, path: CascaderOption[]) => path.some( option => option[labelField] && ~(option[labelField] as any) .toLowerCase() .indexOf(pattern.toLowerCase()) ) }) const filteredSelectOptionsRef = computed(() => { const { pattern } = props const { value: mergedFilter } = mergedFilterRef return ( pattern ? selectOptionsRef.value.filter((option) => { return mergedFilter(pattern, option.rawNode, option.path) }) : selectOptionsRef.value ).map(option => ({ value: option.value, label: option.label })) }) const selectTreeMateRef = computed(() => { return createTreeMate< SelectBaseOption, SelectGroupOption, SelectIgnoredOption >(filteredSelectOptionsRef.value, createTmOptions('value', 'children')) }) function handleResize(): void { syncSelectMenuPosition() } function handleToggle(tmNode: TreeNode): void { doCheck(tmNode) } // We don't care what type the tmNode is, we only care about its key function doCheck(tmNode: TreeNode): void { if (props.multiple) { const { value: mergedValue } = mergedValueRef if (Array.isArray(mergedValue)) { if (!mergedValue.includes(tmNode.key)) { cascaderDoCheck(tmNode.key) } else { cascaderDoUncheck(tmNode.key) } } else if (mergedValue === null) { cascaderDoCheck(tmNode.key) } clearPattern() } else { cascaderDoCheck(tmNode.key) // currently the select menu is set to focusable // however just leave it here closeMenu(true) } } function prev(): void { menuInstRef.value?.prev() } function next(): void { menuInstRef.value?.next() } function enter(): boolean { if (menuInstRef) { const pendingOptionTmNode = menuInstRef.value?.getPendingTmNode() if (pendingOptionTmNode) { doCheck(pendingOptionTmNode) } return true } return false } function handleClickOutside(e: MouseEvent): void { handleSelectMenuClickOutside(e) } const exposedRef: SelectMenuInstance = { prev, next, enter } return { isMounted: isMountedRef, mergedTheme: mergedThemeRef, mergedClsPrefix: mergedClsPrefixRef, menuInstRef, selectTreeMate: selectTreeMateRef, handleResize, handleToggle, handleClickOutside, cascaderSlots, scrollbarProps: scrollbarPropsRef, ...exposedRef } }, render() { const { mergedClsPrefix, isMounted, mergedTheme, cascaderSlots } = this return ( {{ default: () => this.show ? withDirectives( {{ empty: () => resolveSlot(cascaderSlots['not-found'], () => []) }} , [ [ clickoutside, this.handleClickOutside, undefined as unknown as string, { capture: true } ] ] ) : null }} ) } }) ================================================ FILE: src/cascader/src/CascaderSubmenu.tsx ================================================ import type { PropType } from 'vue' import type { VirtualListInst } from 'vueuc' import type { ScrollbarInst } from '../../_internal' import type { CascaderSubmenuInstance, TmNode } from './interface' import { depx } from 'seemly' import { computed, defineComponent, h, inject, ref } from 'vue' import { VirtualList } from 'vueuc' import { NScrollbar } from '../../_internal' import NCascaderOption from './CascaderOption' import { cascaderInjectionKey } from './interface' export default defineComponent({ name: 'CascaderSubmenu', props: { depth: { type: Number, required: true }, tmNodes: { type: Array as PropType, required: true } }, setup() { const { virtualScrollRef, mergedClsPrefixRef, mergedThemeRef, optionHeightRef } = inject(cascaderInjectionKey)! const scrollbarInstRef = ref(null) const vlInstRef = ref(null) const inst: CascaderSubmenuInstance = { scroll(index: number, elSize: number) { if (virtualScrollRef.value) { vlInstRef.value?.scrollTo({ index }) } else { scrollbarInstRef.value?.scrollTo({ index, elSize }) } } } return { mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollbarInstRef, vlInstRef, virtualScroll: virtualScrollRef, itemSize: computed(() => depx(optionHeightRef.value)), handleVlScroll: () => { scrollbarInstRef.value?.sync() }, getVlContainer: () => { return vlInstRef.value?.listElRef }, getVlContent: () => { return vlInstRef.value?.itemsElRef }, ...inst } }, render() { const { mergedClsPrefix, mergedTheme, virtualScroll } = this return (
    {{ default: () => virtualScroll ? ( {{ default: ({ item: tmNode }: { item: TmNode }) => ( ) }} ) : ( this.tmNodes.map(tmNode => ( )) ) }}
    ) } }) ================================================ FILE: src/cascader/src/interface.ts ================================================ import type { CheckStrategy, TreeNode } from 'treemate' import type { CSSProperties, Ref, Slots, VNode, VNodeChild } from 'vue' import type { ScrollbarProps } from '../../_internal' import type { MergedTheme } from '../../_mixins' import type { NLocale } from '../../locales' import type { CascaderTheme } from '../styles' import type { CascaderSpinProps } from './public-types' import { createInjectionKey } from '../../_utils' export type ValueAtom = string | number export type Value = ValueAtom | ValueAtom[] export type Key = ValueAtom export interface CascaderOption { label?: string value?: ValueAtom disabled?: boolean children?: CascaderOption[] [key: string]: unknown } export type ExpandTrigger = 'hover' | 'click' export type TmNode = TreeNode export type Filter = ( pattern: string, option: CascaderOption, path: CascaderOption[] ) => boolean export type OnLoad = (option: CascaderOption) => Promise export type OnUpdateValue = ( value: string & number & string[] & number[] & Array & (string | null) & (number | null) & (string[] | null) & (number[] | null) & (Array | null), option: null & CascaderOption & CascaderOption[] & Array, path: null & CascaderOption[] & Array ) => void export type OnUpdateValueImpl = ( value: Value | null, option: CascaderOption | null | Array, path: Array | CascaderOption[] | null ) => void export type MenuModel = TmNode[][] export interface CascaderInjection { slots: Slots mergedClsPrefixRef: Ref mergedThemeRef: Ref> mergedValueRef: Ref checkedKeysRef: Ref indeterminateKeysRef: Ref hoverKeyPathRef: Ref mergedCheckStrategyRef: Ref multipleRef: Ref keyboardKeyRef: Ref hoverKeyRef: Ref remoteRef: Ref loadingKeySetRef: Ref> expandTriggerRef: Ref isMountedRef: Ref cascadeRef: Ref onLoadRef: Ref<((value: CascaderOption) => Promise) | undefined> localeRef: Ref virtualScrollRef: Ref optionHeightRef: Ref labelFieldRef: Ref showCheckboxRef: Ref getColumnStyleRef: Ref< ((detail: { level: number }) => string | CSSProperties) | undefined > renderPrefixRef: Ref< | ((info: { option: CascaderOption checked: boolean node: VNode | null }) => VNodeChild) | undefined > renderSuffixRef: Ref< | ((info: { option: CascaderOption checked: boolean node: VNode | null }) => VNodeChild) | undefined > syncCascaderMenuPosition: () => void syncSelectMenuPosition: () => void updateKeyboardKey: (value: Key | null) => void updateHoverKey: (value: Key | null) => void addLoadingKey: (value: Key) => void deleteLoadingKey: (value: Key) => void doCheck: (value: Key) => void doUncheck: (value: Key) => void closeMenu: (returnFocus?: boolean) => void handleSelectMenuClickOutside: (e: MouseEvent) => void handleCascaderMenuClickOutside: (e: MouseEvent) => void renderLabelRef: Ref< ((option: CascaderOption, checked: boolean) => VNodeChild) | undefined > spinPropsRef: Ref scrollbarPropsRef: Ref clearPattern: () => void } export interface CascaderSubmenuInstance { scroll: (index: number, elSize: number) => void } export interface CascaderMenuExposedMethods { scroll: (depth: number, index: number, elSize: number) => void showErrorMessage: (label: string) => void } export type CascaderMenuInstance = { $el: HTMLElement } & CascaderMenuExposedMethods export interface SelectMenuInstance { prev: () => void next: () => void enter: () => boolean } export const cascaderInjectionKey = createInjectionKey('n-cascader') export interface CascaderInst { focus: () => void blur: () => void getCheckedData: () => { keys: Key[], options: Array } getIndeterminateData: () => { keys: Key[] options: Array } } ================================================ FILE: src/cascader/src/public-types.ts ================================================ import type { SharedSpinProps } from '../../_internal' export type CascaderSize = 'small' | 'medium' | 'large' export type CascaderSpinProps = SharedSpinProps ================================================ FILE: src/cascader/src/styles/index.cssr.ts ================================================ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr' import { c, cB, cE, cM } from '../../../_utils/cssr' // vars: // --n-menu-border-radius // --n-menu-box-shadow // --n-menu-height // --n-menu-color // --n-menu-divider-color // --n-option-height // --n-option-font-size // --n-option-text-color // --n-option-text-color-disabled // --n-option-text-color-active // --n-option-color-hover // --n-option-check-mark-color // --n-option-arrow-color // --n-menu-mask-color // --n-loading-color export default c([ cB('cascader-menu', ` outline: none; position: relative; margin: 4px 0; display: flex; flex-flow: column nowrap; border-radius: var(--n-menu-border-radius); overflow: hidden; box-shadow: var(--n-menu-box-shadow); color: var(--n-option-text-color); background-color: var(--n-menu-color); `, [ fadeInScaleUpTransition({ transformOrigin: 'inherit', duration: '0.2s' }), cE('empty', ` display: flex; padding: 12px 32px; flex: 1; justify-content: center; `), // if width not set, cascader select menu's inner scroll area's width is // not correct, which won't change after select menu width is set cB('scrollbar', ` width: 100%; `), cB('base-menu-mask', ` background-color: var(--n-menu-mask-color); `), cB('base-loading', ` color: var(--n-loading-color); `), cB('cascader-submenu-wrapper', ` position: relative; display: flex; flex-wrap: nowrap; `), cB('cascader-submenu', ` height: var(--n-menu-height); min-width: var(--n-column-width); position: relative; `, [ cM('virtual', ` width: var(--n-column-width); `), cB('scrollbar-content', ` position: relative; `), c('&:first-child', ` border-top-left-radius: var(--n-menu-border-radius); border-bottom-left-radius: var(--n-menu-border-radius); `), c('&:last-child', ` border-top-right-radius: var(--n-menu-border-radius); border-bottom-right-radius: var(--n-menu-border-radius); `), c('&:not(:first-child)', ` border-left: 1px solid var(--n-menu-divider-color); `) ]), cB('cascader-menu-action', ` box-sizing: border-box; padding: 8px; border-top: 1px solid var(--n-menu-divider-color); `), cB('cascader-option', ` height: var(--n-option-height); line-height: var(--n-option-height); font-size: var(--n-option-font-size); padding: 0 0 0 18px; box-sizing: border-box; min-width: 182px; background-color: #0000; display: flex; align-items: center; white-space: nowrap; position: relative; cursor: pointer; transition: background-color .2s var(--n-bezier), color 0.2s var(--n-bezier); `, [ cM('show-prefix', ` padding-left: 0; `), cE('label', ` flex: 1 0 0; overflow: hidden; text-overflow: ellipsis; `), cE('prefix', ` min-width: 32px; display: flex; align-items: center; justify-content: center; `), cE('suffix', ` min-width: 32px; display: flex; align-items: center; justify-content: center; `), cB('cascader-option-icon-placeholder', ` line-height: 0; position: relative; width: 16px; height: 16px; font-size: 16px; `, [ cB('cascader-option-icon', [ cM('checkmark', ` color: var(--n-option-check-mark-color); `, [ fadeInScaleUpTransition({ originalTransition: 'background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier)' }) ]), cM('arrow', ` color: var(--n-option-arrow-color); `) ]) ]), cM('selected', ` color: var(--n-option-text-color-active); `), cM('active', ` color: var(--n-option-text-color-active); background-color: var(--n-option-color-hover); `), cM('pending', ` background-color: var(--n-option-color-hover); `), c('&:hover', ` background-color: var(--n-option-color-hover); `), cM('disabled', ` color: var(--n-option-text-color-disabled); background-color: #0000; cursor: not-allowed; `, [ cB('cascader-option-icon', [ cM('arrow', ` color: var(--n-option-text-color-disabled); `) ]) ]) ]) ]), cB('cascader', ` z-index: auto; position: relative; width: 100%; `) ]) ================================================ FILE: src/cascader/src/utils.ts ================================================ import type { SelectBaseOption } from '../../select/src/interface' import type { CascaderOption, TmNode } from './interface' function getRawNodePath(tmNodes: TmNode[]): CascaderOption[] function getRawNodePath(tmNodes: TmNode[] | undefined): CascaderOption[] | null function getRawNodePath( tmNodes: TmNode[] | undefined ): CascaderOption[] | null { if (!tmNodes) return null return tmNodes.map(tmNode => tmNode.rawNode) } export { getRawNodePath } function createSelectOptions( tmNodes: TmNode[], checkStrategyIsChild: boolean, labelField: string, separator: string ): Array< SelectBaseOption & { rawNode: CascaderOption, path: CascaderOption[] } > { const selectOptions: Array< SelectBaseOption & { rawNode: CascaderOption, path: CascaderOption[] } > = [] const path: CascaderOption[] = [] function traverse(_tmNodes: TmNode[]): void { for (const tmNode of _tmNodes) { if (tmNode.disabled) continue const { rawNode } = tmNode path.push(rawNode) if (tmNode.isLeaf || !checkStrategyIsChild) { selectOptions.push({ label: getPathLabel(tmNode, separator, labelField), value: tmNode.key, rawNode: tmNode.rawNode, path: Array.from(path) }) } if (!tmNode.isLeaf && tmNode.children) { traverse(tmNode.children) } path.pop() } } traverse(tmNodes) return selectOptions } function getPathLabel( node: TmNode | null, separator: string, labelField: string ): string { const path: string[] = [] while (node) { path.push((node.rawNode as any)[labelField] as string) node = node.parent } return path.reverse().join(separator) } export { createSelectOptions, getPathLabel } ================================================ FILE: src/cascader/styles/dark.ts ================================================ import type { CascaderTheme } from './light' import { scrollbarDark } from '../../_internal/scrollbar/styles' import { internalSelectMenuDark } from '../../_internal/select-menu/styles' import { internalSelectionDark } from '../../_internal/selection/styles' import { commonDark } from '../../_styles/common' import { checkboxDark } from '../../checkbox/styles' import { emptyLight } from '../../empty/styles' import { self } from './light' const cascaderDark: CascaderTheme = { name: 'Cascader', common: commonDark, peers: { InternalSelectMenu: internalSelectMenuDark, InternalSelection: internalSelectionDark, Scrollbar: scrollbarDark, Checkbox: checkboxDark, Empty: emptyLight }, self } export default cascaderDark ================================================ FILE: src/cascader/styles/index.ts ================================================ export { default as cascaderDark } from './dark' export { default as cascaderLight } from './light' export type { CascaderTheme, CascaderThemeVars } from './light' ================================================ FILE: src/cascader/styles/light.ts ================================================ import type { ThemeCommonVars } from '../../_styles/common' import { scrollbarLight } from '../../_internal/scrollbar/styles' import { internalSelectMenuLight } from '../../_internal/select-menu/styles' import { internalSelectionLight } from '../../_internal/selection/styles' import { createTheme } from '../../_mixins' import { commonLight } from '../../_styles/common' import { checkboxLight } from '../../checkbox/styles' import { emptyLight } from '../../empty/styles' export function self(vars: ThemeCommonVars) { const { borderRadius, boxShadow2, popoverColor, textColor2, textColor3, primaryColor, textColorDisabled, dividerColor, hoverColor, fontSizeMedium, heightMedium } = vars return { menuBorderRadius: borderRadius, menuColor: popoverColor, menuBoxShadow: boxShadow2, menuDividerColor: dividerColor, menuHeight: 'calc(var(--n-option-height) * 6.6)', optionArrowColor: textColor3, optionHeight: heightMedium, optionFontSize: fontSizeMedium, optionColorHover: hoverColor, optionTextColor: textColor2, optionTextColorActive: primaryColor, optionTextColorDisabled: textColorDisabled, optionCheckMarkColor: primaryColor, loadingColor: primaryColor, columnWidth: '180px' } } export type CascaderThemeVars = ReturnType const cascaderLight = createTheme({ name: 'Cascader', common: commonLight, peers: { InternalSelectMenu: internalSelectMenuLight, InternalSelection: internalSelectionLight, Scrollbar: scrollbarLight, Checkbox: checkboxLight, Empty: emptyLight }, self }) export default cascaderLight export type CascaderTheme = typeof cascaderLight ================================================ FILE: src/cascader/tests/Cascader.spec.ts ================================================ import type { CascaderOption } from '../src/interface' import { mount } from '@vue/test-utils' import { nextTick } from 'vue' import { NCascader } from '../index' function getOptions(depth = 3, iterator = 1, prefix = ''): CascaderOption[] { const length = 12 const options: CascaderOption[] = [] for (let i = 1; i <= length; ++i) { if (iterator === 1) { options.push({ value: `v-${i}`, label: `l-${i}`, disabled: i % 5 === 0, children: getOptions(depth, iterator + 1, `${String(i)}`) }) } else if (iterator === depth) { options.push({ value: `v-${prefix}-${i}`, label: `l-${prefix}-${i}`, disabled: i % 5 === 0 }) } else { options.push({ value: `v-${prefix}-${i}`, label: `l-${prefix}-${i}`, disabled: i % 5 === 0, children: getOptions(depth, iterator + 1, `${prefix}-${i}`) }) } } return options } describe('n-cascader', () => { it('should work with import on demand', () => { mount(NCascader) }) it('should work with `disabled` prop', async () => { const wrapper = mount(NCascader) expect(wrapper.find('.n-base-selection').classes()).not.toContain( 'n-base-selection--disabled' ) await wrapper.setProps({ disabled: true }) expect(wrapper.find('.n-base-selection').classes()).toContain( 'n-base-selection--disabled' ) wrapper.unmount() }) it('should work with `size` prop', async () => { ;(['small', 'medium', 'large'] as const).forEach((i) => { const wrapper = mount(NCascader, { props: { size: i } }) expect( wrapper.find('.n-base-selection').attributes('style') ).toMatchSnapshot() wrapper.unmount() }) }) it('should work with `status` prop', async () => { ;(['success', 'warning', 'error'] as const).forEach((status) => { const wrapper = mount(NCascader, { props: { status } }) expect(wrapper.find('.n-base-selection').classes()).toContain( `n-base-selection--${status}-status` ) wrapper.unmount() }) }) it('should work with `placeholder` prop', async () => { const wrapper = mount(NCascader, { props: { placeholder: 'test-placeholder' } }) expect(wrapper.find('.n-base-selection-placeholder').text()).toBe( 'test-placeholder' ) wrapper.unmount() }) it('should work with `placement` prop', async () => { const placements = [ 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end' ] as const for (const placement of placements) { const wrapper = mount(NCascader, { attachTo: document.body, props: { placement, show: true } }) await nextTick() await vi.waitFor(() => { const followerContents = document.querySelectorAll( '.v-binder-follower-content' ) const currentFollower = followerContents.item( followerContents.length - 1 ) expect(currentFollower.getAttribute('v-placement')).toBe(placement) }) wrapper.unmount() await nextTick() } }) it('should work with `filterable` prop', async () => { const wrapper = mount(NCascader, { props: { filterable: false } }) expect(wrapper.find('input').exists()).not.toBe(true) await wrapper.setProps({ filterable: true }) expect(wrapper.find('input').exists()).toBe(true) wrapper.unmount() }) it('should work with `default-value` prop', async () => { const wrapper = mount(NCascader, { props: { options: getOptions(), defaultValue: 'l-1-1-2' } }) expect(wrapper.find('.n-base-selection-input').text()).toBe('l-1-1-2') wrapper.unmount() }) it('should work with `multiple` prop', async () => { const wrapper = mount(NCascader, { props: { options: getOptions() } }) expect(wrapper.find('.n-base-selection-label').exists()).toBe(true) expect(wrapper.find('.n-base-selection-tags').exists()).not.toBe(true) await wrapper.setProps({ multiple: true }) expect(wrapper.find('.n-base-selection-tags').exists()).toBe(true) expect(wrapper.find('.n-base-selection-label').exists()).not.toBe(true) wrapper.unmount() }) it('should work with `label-field` `value-field` `children-field` props', async () => { const wrapper = mount(NCascader, { props: { options: [ { whateverLabel: 'Rubber Soul', whateverValue: 'Rubber Soul', whateverChildren: [ { whateverLabel: 'Everybody\'s Got Something to Hide Except Me and My Monkey', whateverValue: 'Everybody\'s Got Something to Hide Except Me and My Monkey' } ] } ], 'label-field': 'whateverLabel', 'value-field': 'whateverValue', 'children-field': 'whateverChildren', 'default-value': 'Everybody\'s Got Something to Hide Except Me and My Monkey' } }) expect(wrapper.find('.n-base-selection-label').text()).toBe( 'Rubber Soul / Everybody\'s Got Something to Hide Except Me and My Monkey' ) wrapper.unmount() }) it('should work with `check-strategy=child`', async () => { const wrapper = mount(NCascader, { attachTo: document.body, props: { options: getOptions(), virtualScroll: false } }) await wrapper.setProps({ show: true }) expect(document.querySelector('.n-checkbox')).not.toEqual(null) await wrapper.setProps({ checkStrategy: 'child' }) expect(document.querySelector('.n-checkbox')).toEqual(null) wrapper.unmount() }) it('should work with `on-blur` prop', async () => { const onBlur = vi.fn() const wrapper = mount(NCascader, { props: { options: getOptions(), onBlur } }) await wrapper.find('.n-base-selection').trigger('focusout') expect(onBlur).toHaveBeenCalled() wrapper.unmount() }) it('should work with `on-focus` prop', async () => { const onFocus = vi.fn() const wrapper = mount(NCascader, { props: { options: getOptions(), onFocus } }) await wrapper.find('.n-base-selection').trigger('focusin') expect(onFocus).toHaveBeenCalled() wrapper.unmount() }) it('should be active after clicked', async () => { const wrapper = mount(NCascader, { attachTo: document.body, props: { options: getOptions() } }) const selection = wrapper.find('.n-base-selection') await selection.trigger('click') expect(selection.classes()).toContain('n-base-selection--active') expect(document.querySelector('.n-cascader-menu')).not.toEqual(null) await selection.trigger('click') expect(selection.classes()).not.toContain('n-base-selection--active') expect(document.querySelector('.n-cascader-menu')).toEqual(null) wrapper.unmount() }) it('should be active after click outside', async () => { const mousedownEvent = new MouseEvent('mousedown', { bubbles: true }) const mouseupEvent = new MouseEvent('mouseup', { bubbles: true }) const wrapper = mount(NCascader, { attachTo: document.body, props: { options: getOptions() } }) await wrapper.find('.n-base-selection').trigger('click') expect(document.querySelector('.n-cascader-menu')).not.toEqual(null) document.body.click() document.body.dispatchEvent(mousedownEvent) document.body.dispatchEvent(mouseupEvent) await nextTick() expect(document.querySelector('.n-cascader-menu')).toEqual(null) wrapper.unmount() }) }) ================================================ FILE: src/cascader/tests/__snapshots__/Cascader.spec.ts.snap ================================================ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`n-cascader > should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 28px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; exports[`n-cascader > should work with \`size\` prop 2`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 14px; --n-height: 34px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; exports[`n-cascader > should work with \`size\` prop 3`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border: 1px solid rgb(224, 224, 230); --n-border-active: 1px solid #18a058; --n-border-focus: 1px solid #36ad6a; --n-border-hover: 1px solid #36ad6a; --n-border-radius: 3px; --n-box-shadow-active: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --n-box-shadow-hover: none; --n-caret-color: #18a058; --n-color: rgba(255, 255, 255, 1); --n-color-active: rgba(255, 255, 255, 1); --n-color-disabled: rgb(250, 250, 252); --n-font-size: 15px; --n-height: 40px; --n-padding-single-top: 0; --n-padding-multiple-top: 3px; --n-padding-single-right: 26px; --n-padding-multiple-right: 26px; --n-padding-single-left: 12px; --n-padding-multiple-left: 12px; --n-padding-single-bottom: 0; --n-padding-multiple-bottom: 0; --n-placeholder-color: rgba(194, 194, 194, 1); --n-placeholder-color-disabled: rgba(209, 209, 209, 1); --n-text-color: rgb(51, 54, 57); --n-text-color-disabled: rgba(194, 194, 194, 1); --n-arrow-color: rgba(194, 194, 194, 1); --n-arrow-color-disabled: rgba(209, 209, 209, 1); --n-loading-color: #18a058; --n-color-active-warning: rgba(255, 255, 255, 1); --n-box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-active-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --n-box-shadow-hover-warning: none; --n-border-warning: 1px solid #f0a020; --n-border-focus-warning: 1px solid #fcb040; --n-border-hover-warning: 1px solid #fcb040; --n-border-active-warning: 1px solid #f0a020; --n-color-active-error: rgba(255, 255, 255, 1); --n-box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-active-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --n-box-shadow-hover-error: none; --n-border-error: 1px solid #d03050; --n-border-focus-error: 1px solid #de576d; --n-border-hover-error: 1px solid #de576d; --n-border-active-error: 1px solid #d03050; --n-clear-size: 16px; --n-clear-color: rgba(194, 194, 194, 1); --n-clear-color-hover: rgba(146, 146, 146, 1); --n-clear-color-pressed: rgba(175, 175, 175, 1); --n-arrow-size: 16px; --n-font-weight: 400;"`; ================================================ FILE: src/cascader/tests/server.spec.tsx ================================================ import { setup } from '@css-render/vue3-ssr' import { renderToString } from '@vue/server-renderer' /** * @vitest-environment node */ import { createSSRApp, h } from 'vue' import { NCascader } from '../..' describe('server side rendering', () => { it('works', async () => { const app = createSSRApp(() => ) setup(app) try { await renderToString(app) } catch (e) { expect(e).not.toBeTruthy() } }) }) ================================================ FILE: src/checkbox/demos/enUS/basic.demo.vue ================================================ # Basic ================================================ FILE: src/checkbox/demos/enUS/controlled.demo.vue ================================================ # Controlled checkbox ================================================ FILE: src/checkbox/demos/enUS/customize-value.demo.vue ================================================ # Customizing checked value Use `checked-value` and `unchecked-value` to customize value. ================================================ FILE: src/checkbox/demos/enUS/event.demo.vue ================================================ # Event ================================================ FILE: src/checkbox/demos/enUS/focus.demo.vue ================================================ # Focus & blur manually ================================================ FILE: src/checkbox/demos/enUS/grid.demo.vue ================================================ # Grid Use checkboxes with a grid. ================================================ FILE: src/checkbox/demos/enUS/group.demo.vue ================================================ # Checkbox group ================================================ FILE: src/checkbox/demos/enUS/indeterminate.demo.vue ================================================ # Indeterminate ================================================ FILE: src/checkbox/demos/enUS/index.demo-entry.md ================================================ # Checkbox Yo, yo, check it out. ## Demos ```demo basic.vue size.vue group.vue grid.vue indeterminate.vue controlled.vue event.vue customize-value.vue focus.vue ``` ## API ### Checkbox Props | Name | Type | Default | Description | | --- | --- | --- | --- | | checked | `boolean` | `false` | Whether the checkbox is being checked manually. | | checked-value | `string \| boolean \| number` | `true` | Value of checked state. | | default-checked | `boolean` | `false` | Whether the checkbox is checked by default. | | disabled | `boolean` | `false` | Whether the checkbox is disabled. | | focusable | `boolean` | `true` | Whether the checkbox gains focus after being checked. | | indeterminate | `boolean` | `false` | Whether the checkbox can have a third indeterminate state. | | label | `string` | `undefined` | Checkbox label. | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of the checkbox. | | unchecked-value | `string \| boolean \| number` | `false` | Value of unchecked state. | | value | `string \| number` | `undefined` | The value of the checkbox to be used in a checkbox group. | | on-update:checked | `(checked: boolean) => void` | `undefined` | Callback function triggered on a checked status change. | ### CheckboxGroup Props | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | | disabled | `boolean` | `false` | Whether the checkbox group is disabled. | | | default-value | `Array` | `null` | Checkbox group's default selected value. | | | max | `number` | `undefined` | The maximum number of checkboxes that can be checked. | | | min | `number` | `undefined` | The minimum number of checkboxes that can be checked. | | | value | `Array \| null` | `undefined` | Manually set values of a checkbox group. | | | on-update:value | `(value: (string \| number)[], meta: { actionType: 'check' \| 'uncheck', value: string \| number }) => void` | `undefined` | Callback when the checkbox group's value changes. | `meta` 2.32.0 | ### Checkbox Slots | Name | Parameters | Description | | ------- | ---------- | ------------------------ | | default | `()` | Content of the checkbox. | ### CheckboxGroup Slots | Name | Parameters | Description | | ------- | ---------- | ------------------------------ | | default | `()` | Content of the checkbox group. | ### Checkbox Methods | Name | Type | Description | Version | | ----- | ------------ | ----------- | ------- | | focus | `() => void` | Focus. | 2.24.2 | | blur | `() => void` | Blur. | 2.24.2 | ================================================ FILE: src/checkbox/demos/enUS/size.demo.vue ================================================ # Size ================================================ FILE: src/checkbox/demos/zhCN/basic.demo.vue ================================================ # 基础用法 ================================================ FILE: src/checkbox/demos/zhCN/controlled.demo.vue ================================================ # 受控状态 ================================================ FILE: src/checkbox/demos/zhCN/customize-value.demo.vue ================================================ # 自定义选中的值 使用 `checked-value` 和 `unchecked-value` 制定选中的值。 ================================================ FILE: src/checkbox/demos/zhCN/event.demo.vue ================================================ # 事件 ================================================ FILE: src/checkbox/demos/zhCN/focus.demo.vue ================================================ # 手动 focus & blur ================================================ FILE: src/checkbox/demos/zhCN/grid.demo.vue ================================================ # 栅格 和栅格一起使用。 ================================================ FILE: src/checkbox/demos/zhCN/group.demo.vue ================================================ # 选项组 ================================================ FILE: src/checkbox/demos/zhCN/indeterminate.demo.vue ================================================ # 部分选中 ================================================ FILE: src/checkbox/demos/zhCN/index.demo-entry.md ================================================ # 复选框 Checkbox 哟，哟，Check it out。 ## 演示 ```demo basic.vue size.vue group.vue grid.vue indeterminate.vue controlled.vue event.vue customize-value.vue focus.vue rtl-debug.vue ``` ## API ### Checkbox Props | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | checked | `boolean` | `false` | 受控状态下是否选中 | | checked-value | `string \| boolean \| number` | `true` | 选中时对应的值 | | default-checked | `boolean` | `false` | 非受控模式下默认是否选中 | | disabled | `boolean` | `false` | 是否禁用 | | focusable | `boolean` | `true` | 是否可被 focus | | indeterminate | `boolean` | `false` | 是否部分选中 | | label | `string` | `undefined` | Checkbox 的标签 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸 | | unchecked-value | `string \| boolean \| number` | `false` | 未选中时对应的值 | | value | `string \| number` | `undefined` | Checkbox 在 checkbox group 中使用的值 | | on-update:checked | `(checked: boolean) => void` | `undefined` | 当 checked 改变时触发的回调函数 | ### CheckboxGroup Props | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | disabled | `boolean` | `false` | 选项组是否禁用 | | | default-value | `Array` | `null` | 选项组非受控模式下的默认值 | | | max | `number` | `undefined` | 可被勾选的 checkbox 的最大数量 | | | min | `number` | `undefined` | 可被勾选的 checkbox 的最小数量 | | | value | `Array \| null` | `undefined` | 选项组受控模式下的值 | | | on-update:value | `(value: (string \| number)[], meta: { actionType: 'check' \| 'uncheck', value: string \| number }) => void` | `undefined` | 选项组的值改变时的回调 | `meta` 2.32.0 | ### Checkbox Slots | 名称 | 参数 | 说明 | | ------- | ---- | ------------------- | | default | `()` | Checkbox 的标签内容 | ### CheckboxGroup Slots | 名称 | 参数 | 说明 | | ------- | ---- | -------------------- | | default | `()` | CheckboxGroup 的内容 | ### Checkbox Methods | 名称 | 类型 | 说明 | 版本 | | ----- | ------------ | ---- | ------ | | focus | `() => void` | 聚焦 | 2.24.2 | | blur | `() => void` | 失焦 | 2.24.2 | ================================================ FILE: src/checkbox/demos/zhCN/rtl-debug.demo.vue ================================================ # Rtl Debug ================================================ FILE: src/checkbox/demos/zhCN/size.demo.vue ================================================ # 尺寸 ================================================ FILE: src/checkbox/index.ts ================================================ export { checkboxProps, default as NCheckbox } from './src/Checkbox' export type { CheckboxProps } from './src/Checkbox' export { checkboxGroupProps, default as NCheckboxGroup } from './src/CheckboxGroup' export type { CheckboxGroupProps } from './src/CheckboxGroup' export type { CheckboxInst } from './src/interface' export type * from './src/public-types' ================================================ FILE: src/checkbox/src/CheckMark.tsx ================================================ import type { VNode } from 'vue' import { h } from 'vue' export default (): VNode => ( ) ================================================ FILE: src/checkbox/src/Checkbox.tsx ================================================ import type { CSSProperties, PropType } from 'vue' import type { ThemeProps } from '../../_mixins' import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils' import type { CheckboxTheme } from '../styles' import type { CheckboxInst, OnUpdateChecked, OnUpdateCheckedImpl } from './interface' import type { CheckboxSize } from './public-types' import { on } from 'evtd' import { createId } from 'seemly' import { useMemo, useMergedState } from 'vooks' import { computed, defineComponent, h, inject, ref, toRef, watchEffect } from 'vue' import { NIconSwitchTransition } from '../../_internal' import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins' import { useRtl } from '../../_mixins/use-rtl' import { call, createKey, resolveWrappedSlot, warnOnce } from '../../_utils' import { checkboxLight } from '../styles' import { checkboxGroupInjectionKey } from './CheckboxGroup' import renderCheckMark from './CheckMark' import renderLineMark from './LineMark' import style from './styles/index.cssr' export const checkboxProps = { ...(useTheme.props as ThemeProps), size: String as PropType, checked: { type: [Boolean, String, Number] as PropType< boolean | string | number | undefined >, default: undefined }, defaultChecked: { type: [Boolean, String, Number] as PropType, default: false }, value: [String, Number] as PropType, disabled: { type: Boolean as PropType, default: undefined }, indeterminate: Boolean, label: String, focusable: { type: Boolean, default: true }, checkedValue: { type: [Boolean, String, Number], default: true }, uncheckedValue: { type: [Boolean, String, Number], default: false }, 'onUpdate:checked': [Function, Array] as PropType< MaybeArray >, onUpdateChecked: [Function, Array] as PropType>, // private privateInsideTable: Boolean, // deprecated onChange: [Function, Array] as PropType> } export type CheckboxProps = ExtractPublicPropTypes export default defineComponent({ name: 'Checkbox', props: checkboxProps, setup(props) { if (__DEV__) { watchEffect(() => { if (props.onChange) { warnOnce( 'checkbox', '`on-change` is deprecated, please use `on-update:checked` instead.' ) } }) } const NCheckboxGroup = inject(checkboxGroupInjectionKey, null) const selfRef = ref(null) const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef, mergedComponentPropsRef } = useConfig(props) const uncontrolledCheckedRef = ref(props.defaultChecked) const controlledCheckedRef = toRef(props, 'checked') const mergedCheckedRef = useMergedState( controlledCheckedRef, uncontrolledCheckedRef ) const renderedCheckedRef = useMemo(() => { if (NCheckboxGroup) { const groupValueSet = NCheckboxGroup.valueSetRef.value if (groupValueSet && props.value !== undefined) { return groupValueSet.has(props.value) } return false } else { return mergedCheckedRef.value === props.checkedValue } }) const formItem = useFormItem(props, { mergedSize(NFormItem) { const { size } = props if (size !== undefined) return size if (NCheckboxGroup) { const { value: mergedSize } = NCheckboxGroup.mergedSizeRef if (mergedSize !== undefined) { return mergedSize } } if (NFormItem) { const { mergedSize } = NFormItem if (mergedSize !== undefined) return mergedSize.value } const configSize = mergedComponentPropsRef?.value?.Checkbox?.size if (configSize) return configSize return 'medium' }, mergedDisabled(NFormItem) { const { disabled } = props if (disabled !== undefined) return disabled if (NCheckboxGroup) { if (NCheckboxGroup.disabledRef.value) return true const { maxRef: { value: max }, checkedCountRef } = NCheckboxGroup if ( max !== undefined && checkedCountRef.value >= max && !renderedCheckedRef.value ) { return true } const { minRef: { value: min } } = NCheckboxGroup if ( min !== undefined && checkedCountRef.value <= min && renderedCheckedRef.value ) { return true } } if (NFormItem) { return NFormItem.disabled.value } return false } }) const { mergedDisabledRef, mergedSizeRef } = formItem const themeRef = useTheme( 'Checkbox', '-checkbox', style, checkboxLight, props, mergedClsPrefixRef ) function toggle(e: MouseEvent | KeyboardEvent): void { if (NCheckboxGroup && props.value !== undefined) { NCheckboxGroup.toggleCheckbox(!renderedCheckedRef.value, props.value) } else { const { onChange, 'onUpdate:checked': _onUpdateCheck, onUpdateChecked } = props const { nTriggerFormInput, nTriggerFormChange } = formItem const nextChecked = renderedCheckedRef.value ? props.uncheckedValue : props.checkedValue if (_onUpdateCheck) { call(_onUpdateCheck as OnUpdateCheckedImpl, nextChecked, e) } if (onUpdateChecked) { call(onUpdateChecked as OnUpdateCheckedImpl, nextChecked, e) } if (onChange) call(onChange as OnUpdateCheckedImpl, nextChecked, e) // deprecated nTriggerFormInput() nTriggerFormChange() uncontrolledCheckedRef.value = nextChecked } } function handleClick(e: MouseEvent): void { if (!mergedDisabledRef.value) { toggle(e) } } function handleKeyUp(e: KeyboardEvent): void { if (mergedDisabledRef.value) return switch (e.key) { case ' ': case 'Enter': toggle(e) } } function handleKeyDown(e: KeyboardEvent): void { switch (e.key) { case ' ': e.preventDefault() } } const exposedMethods: CheckboxInst = { focus: () => { selfRef.value?.focus() }, blur: () => { selfRef.value?.blur() } } const rtlEnabledRef = useRtl('Checkbox', mergedRtlRef, mergedClsPrefixRef) const cssVarsRef = computed(() => { const { value: mergedSize } = mergedSizeRef const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, labelLineHeight, labelFontWeight, [createKey('fontSize', mergedSize)]: fontSize, [createKey('size', mergedSize)]: size } } = themeRef.value return { '--n-label-line-height': labelLineHeight, '--n-label-font-weight': labelFontWeight, '--n-size': size, '--n-bezier': cubicBezierEaseInOut, '--n-border-radius': borderRadius, '--n-border': border, '--n-border-checked': borderChecked, '--n-border-focus': borderFocus, '--n-border-disabled': borderDisabled, '--n-border-disabled-checked': borderDisabledChecked, '--n-box-shadow-focus': boxShadowFocus, '--n-color': color, '--n-color-checked': colorChecked, '--n-color-table': colorTableHeader, '--n-color-table-modal': colorTableHeaderModal, '--n-color-table-popover': colorTableHeaderPopover, '--n-color-disabled': colorDisabled, '--n-color-disabled-checked': colorDisabledChecked, '--n-text-color': textColor, '--n-text-color-disabled': textColorDisabled, '--n-check-mark-color': checkMarkColor, '--n-check-mark-color-disabled': checkMarkColorDisabled, '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked, '--n-font-size': fontSize, '--n-label-padding': labelPadding } }) const themeClassHandle = inlineThemeDisabled ? useThemeClass( 'checkbox', computed(() => mergedSizeRef.value[0]), cssVarsRef, props ) : undefined return Object.assign(formItem, exposedMethods, { rtlEnabled: rtlEnabledRef, selfRef, mergedClsPrefix: mergedClsPrefixRef, mergedDisabled: mergedDisabledRef, renderedChecked: renderedCheckedRef, mergedTheme: themeRef, labelId: createId(), handleClick, handleKeyUp, handleKeyDown, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle?.themeClass, onRender: themeClassHandle?.onRender }) }, render() { const { $slots, renderedChecked, mergedDisabled, indeterminate, privateInsideTable, cssVars, labelId, label, mergedClsPrefix, focusable, handleKeyUp, handleKeyDown, handleClick } = this this.onRender?.() const labelNode = resolveWrappedSlot($slots.default, (children) => { if (label || children) { return ( {label || children} ) } return null }) return (