├── .browserslistrc ├── .commitlintrc.json ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .lintstagedrc.json ├── .npmignore ├── .vscode └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── build └── prebuild.js ├── components.d.ts ├── docs ├── .vuepress │ ├── client.ts │ ├── components │ │ ├── breadcrumb │ │ │ └── TestRxzBreadcrumb.vue │ │ ├── button │ │ │ ├── TestButtonGroup.vue │ │ │ ├── TestButtonGroupExp1.vue │ │ │ └── TestRxzCountdownButton.vue │ │ ├── card │ │ │ └── TestRxzFlipCard.vue │ │ ├── checkbox │ │ │ ├── TestRxzCheckbox.vue │ │ │ ├── TestRxzCheckboxExp1.vue │ │ │ ├── TestRxzCheckboxExp2.vue │ │ │ └── TestRxzCheckboxExp3.vue │ │ ├── container │ │ │ ├── TestRxzContainer.vue │ │ │ ├── TestRxzContainerExp1.vue │ │ │ ├── TestRxzContainerExp2.vue │ │ │ └── TestRxzContainerExp3.vue │ │ ├── directive │ │ │ ├── TestvRxzLoading.vue │ │ │ ├── TestvRxzResizeObserve.vue │ │ │ └── tooltip │ │ │ │ ├── TestvRxzTooltip.vue │ │ │ │ ├── TestvRxzTooltipExp1.vue │ │ │ │ ├── TestvRxzTooltipExp2.vue │ │ │ │ ├── TestvRxzTooltipExp3.vue │ │ │ │ └── TestvRxzTooltipExp4.vue │ │ ├── form │ │ │ ├── TestRxzForm.vue │ │ │ ├── TestRxzFormExp1.vue │ │ │ ├── TestRxzFormExp2.vue │ │ │ ├── TestRxzFormExp3.vue │ │ │ ├── TestRxzFormExp4.vue │ │ │ ├── TestRxzFormExp5.vue │ │ │ └── TestRxzFormExp6.vue │ │ ├── formitem │ │ │ ├── TestRxzFormItem.vue │ │ │ ├── TestRxzFormItemExp1.vue │ │ │ └── TestRxzFormItemExp2.vue │ │ ├── icon │ │ │ ├── IconDisplay.vue │ │ │ └── rxz-icon.json │ │ ├── index.ts │ │ ├── input │ │ │ ├── TestRxzInput.vue │ │ │ ├── TestRxzInputExp1.vue │ │ │ ├── TestRxzInputExp2.vue │ │ │ ├── TestRxzInputExp3.vue │ │ │ ├── TestRxzInputExp4.vue │ │ │ ├── TestRxzInputExp5.vue │ │ │ ├── TestRxzInputExp6.vue │ │ │ └── TestRxzInputExp7.vue │ │ ├── label │ │ │ └── TestRxzLabel.vue │ │ ├── list │ │ │ └── TestRxzList.vue │ │ ├── menu │ │ │ └── TestRxzMenu.vue │ │ ├── pagination │ │ │ ├── TestRxzPagination.vue │ │ │ └── TestRxzPaginationExp1.vue │ │ ├── radio │ │ │ ├── TestRxzRadio.vue │ │ │ ├── TestRxzRadioExp1.vue │ │ │ ├── TestRxzRadioExp2.vue │ │ │ └── TestRxzRadioExp3.vue │ │ ├── search │ │ │ ├── TestRxzSearch.vue │ │ │ └── TestRxzSearchExp1.vue │ │ ├── select │ │ │ ├── TestRxzSelect.vue │ │ │ ├── TestRxzSelectExp1.vue │ │ │ ├── TestRxzSelectExp2.vue │ │ │ └── TestRxzSelectExp3.vue │ │ ├── switch │ │ │ ├── TestRxzSwitch.vue │ │ │ ├── TestRxzSwitchExp1.vue │ │ │ ├── TestRxzSwitchExp2.vue │ │ │ └── TestRxzSwitchExp3.vue │ │ ├── table │ │ │ ├── TestRxzTable.vue │ │ │ ├── TestRxzTableExp1.vue │ │ │ ├── TestRxzTableExp2.vue │ │ │ ├── TestRxzTableExp3.vue │ │ │ └── TestRxzTableExp4.vue │ │ ├── tableform │ │ │ └── TestTableForm.vue │ │ ├── tabs │ │ │ └── TestRxzTabs.vue │ │ ├── textarea │ │ │ ├── TestRxzTextarea.vue │ │ │ ├── TestRxzTextareaExp1.vue │ │ │ ├── TestRxzTextareaExp2.vue │ │ │ └── TestRxzTextareaExp3.vue │ │ ├── tip │ │ │ ├── TestRxzTip.vue │ │ │ ├── TestRxzTipExp1.vue │ │ │ └── TestRxzTipExp2.vue │ │ ├── tree │ │ │ └── TestRxzTree.vue │ │ └── use │ │ │ ├── alert │ │ │ ├── TestRxzAlert.vue │ │ │ ├── TestRxzAlertExp1.vue │ │ │ └── TestRxzAlertExp2.vue │ │ │ ├── datamap │ │ │ └── TestRxzDataMap.vue │ │ │ ├── i18n │ │ │ └── TestI18n.vue │ │ │ ├── loading │ │ │ ├── TestRxzLoading.vue │ │ │ ├── TestRxzLoadingExp1.vue │ │ │ ├── TestRxzLoadingExp2.vue │ │ │ └── TestRxzLoadingExp3.vue │ │ │ ├── messagebox │ │ │ ├── TestRxzMessageBox.vue │ │ │ ├── TestRxzMessageBoxExp1.vue │ │ │ ├── TestRxzMessageBoxExp2.vue │ │ │ ├── TestRxzMessageBoxExp3.vue │ │ │ └── TestRxzMessageBoxExp4.vue │ │ │ ├── modal │ │ │ ├── TestRxzModal.vue │ │ │ ├── TestRxzModalExp1.vue │ │ │ ├── TestRxzModalExp2.vue │ │ │ ├── TestRxzModalExp3.vue │ │ │ ├── TestRxzModalExp4.vue │ │ │ ├── TestRxzModalExp5.vue │ │ │ ├── TestRxzModalExp6.vue │ │ │ ├── TestRxzModalExp7.vue │ │ │ ├── TestRxzModalExp8.vue │ │ │ └── TestRxzModalExp9.vue │ │ │ └── popover │ │ │ ├── TestRxzPopover.vue │ │ │ └── TestRxzPopoverExp1.vue │ ├── config.ts │ ├── public │ │ ├── favicon.ico │ │ └── img │ │ │ └── logo.svg │ ├── styles │ │ └── index.scss │ └── webpack.config.ts ├── README.md ├── components │ ├── README.md │ ├── advance │ │ ├── rxzbuttongroup.md │ │ ├── rxzcountdownbutton.md │ │ ├── rxzpagination.md │ │ ├── rxzsearch.md │ │ └── rxztableform.md │ ├── base │ │ ├── rxzbutton.md │ │ ├── rxzcheckbox.md │ │ ├── rxzicon.md │ │ ├── rxzinput.md │ │ ├── rxzlist.md │ │ ├── rxzradio.md │ │ ├── rxzselect.md │ │ ├── rxzswitch.md │ │ ├── rxztextarea.md │ │ └── rxztip.md │ ├── card │ │ └── rxzflipcard.md │ ├── form │ │ ├── rxzform.md │ │ ├── rxzformitem.md │ │ └── rxzlabel.md │ ├── layout │ │ ├── rxzcontainer.md │ │ └── rxzflex.md │ ├── navigation │ │ ├── rxzbreadcrumb.md │ │ ├── rxzmenu.md │ │ ├── rxztabs.md │ │ └── rxztree.md │ ├── process │ │ └── rxzwaveprocess.md │ └── table │ │ └── rxztable.md ├── directives │ ├── README.md │ └── base │ │ ├── rxzbadge.md │ │ ├── rxzloading.md │ │ ├── rxzoverflow.md │ │ ├── rxzresizeobserve.md │ │ ├── rxztheme.md │ │ └── rxztooltip.md ├── guide │ └── README.md ├── icon │ └── README.md ├── properties │ ├── README.md │ ├── datamap.md │ └── i18n.md └── use │ ├── README.md │ ├── base │ ├── userxzdatamap.md │ ├── userxzfocus.md │ ├── userxzi18n.md │ ├── userxzssr.md │ └── userxzvalidator.md │ ├── popup │ ├── userxzalert.md │ ├── userxzloading.md │ ├── userxzmessagebox.md │ ├── userxzmodal.md │ ├── userxzpopover.md │ └── userxzpopup.md │ └── setup │ ├── userxzbindingwithinsetup.md │ └── userxzrelativevalidatorwithinsetup.md ├── jest.config.js ├── package.json ├── packages ├── components │ ├── advance │ │ ├── RxzButtonGroup │ │ │ ├── RxzButtonGroup.define.ts │ │ │ ├── RxzButtonGroup.scss │ │ │ ├── RxzButtonGroup.vue │ │ │ └── index.ts │ │ ├── RxzCountdownButton │ │ │ ├── RxzCountdownButton.define.ts │ │ │ ├── RxzCountdownButton.scss │ │ │ ├── RxzCountdownButton.vue │ │ │ └── index.ts │ │ ├── RxzPagination │ │ │ ├── RxzPagination.define.ts │ │ │ ├── RxzPagination.scss │ │ │ ├── RxzPagination.vue │ │ │ └── index.ts │ │ ├── RxzSearch │ │ │ ├── RxzSearch.define.ts │ │ │ ├── RxzSearch.scss │ │ │ ├── RxzSearch.vue │ │ │ └── index.ts │ │ ├── RxzTableForm │ │ │ ├── RxzTableForm.define.ts │ │ │ ├── RxzTableForm.scss │ │ │ ├── RxzTableForm.vue │ │ │ └── index.ts │ │ └── index.ts │ ├── base │ │ ├── RxzButton │ │ │ ├── RxzButton.define.ts │ │ │ ├── RxzButton.scss │ │ │ ├── RxzButton.vue │ │ │ └── index.ts │ │ ├── RxzCheckbox │ │ │ ├── RxzCheckbox.define.ts │ │ │ ├── RxzCheckbox.scss │ │ │ ├── RxzCheckbox.vue │ │ │ └── index.ts │ │ ├── RxzIcon │ │ │ ├── RxzIcon.define.ts │ │ │ ├── RxzIcon.scss │ │ │ ├── RxzIcon.vue │ │ │ └── index.ts │ │ ├── RxzInput │ │ │ ├── RxzInput.define.ts │ │ │ ├── RxzInput.scss │ │ │ ├── RxzInput.vue │ │ │ └── index.ts │ │ ├── RxzList │ │ │ ├── RxzList.define.ts │ │ │ ├── RxzList.scss │ │ │ ├── RxzList.vue │ │ │ └── index.ts │ │ ├── RxzRadio │ │ │ ├── RxzRadio.define.ts │ │ │ ├── RxzRadio.scss │ │ │ ├── RxzRadio.vue │ │ │ └── index.ts │ │ ├── RxzSelect │ │ │ ├── RxzSelect.define.ts │ │ │ ├── RxzSelect.scss │ │ │ ├── RxzSelect.vue │ │ │ └── index.ts │ │ ├── RxzSwitch │ │ │ ├── RxzSwitch.define.ts │ │ │ ├── RxzSwitch.scss │ │ │ ├── RxzSwitch.vue │ │ │ └── index.ts │ │ ├── RxzTextarea │ │ │ ├── RxzTextarea.define.ts │ │ │ ├── RxzTextarea.scss │ │ │ ├── RxzTextarea.vue │ │ │ └── index.ts │ │ ├── RxzTip │ │ │ ├── RxzTip.define.ts │ │ │ ├── RxzTip.scss │ │ │ ├── RxzTip.vue │ │ │ └── index.ts │ │ └── index.ts │ ├── card │ │ ├── RxzFlipCard │ │ │ ├── RxzFlipCard.define.ts │ │ │ ├── RxzFlipCard.scss │ │ │ ├── RxzFlipCard.vue │ │ │ └── index.ts │ │ └── index.ts │ ├── form │ │ ├── RxzForm │ │ │ ├── RxzForm.define.ts │ │ │ ├── RxzForm.scss │ │ │ ├── RxzForm.vue │ │ │ ├── index.ts │ │ │ └── useRxzFormLabelWidth.ts │ │ ├── RxzFormItem │ │ │ ├── RxzFormItem.define.ts │ │ │ ├── RxzFormItem.scss │ │ │ ├── RxzFormItem.vue │ │ │ └── index.ts │ │ ├── RxzLabel │ │ │ ├── RxzLabel.define.ts │ │ │ ├── RxzLabel.scss │ │ │ ├── RxzLabel.vue │ │ │ └── index.ts │ │ └── index.ts │ ├── index.ts │ ├── layout │ │ ├── RxzContainer │ │ │ ├── RxzContainer.define.ts │ │ │ ├── RxzContainer.scss │ │ │ ├── RxzContainer.vue │ │ │ └── index.ts │ │ ├── RxzFlex │ │ │ ├── RxzFlex.define.ts │ │ │ ├── RxzFlex.scss │ │ │ ├── RxzFlex.vue │ │ │ └── index.ts │ │ └── index.ts │ ├── navigation │ │ ├── RxzBreadcrumb │ │ │ ├── RxzBreadcrumb.define.ts │ │ │ ├── RxzBreadcrumb.scss │ │ │ ├── RxzBreadcrumb.vue │ │ │ └── index.ts │ │ ├── RxzMenu │ │ │ ├── RxzMenu.define.ts │ │ │ ├── RxzMenu.scss │ │ │ ├── RxzMenu.vue │ │ │ └── index.ts │ │ ├── RxzTabs │ │ │ ├── RxzTabs.define.ts │ │ │ ├── RxzTabs.scss │ │ │ ├── RxzTabs.vue │ │ │ └── index.ts │ │ ├── RxzTree │ │ │ ├── RxzTree.define.ts │ │ │ ├── RxzTree.scss │ │ │ ├── RxzTree.vue │ │ │ └── index.ts │ │ └── index.ts │ ├── process │ │ ├── RxzWaveProcess │ │ │ ├── RxzWaveProcess.define.ts │ │ │ ├── RxzWaveProcess.scss │ │ │ ├── RxzWaveProcess.vue │ │ │ └── index.ts │ │ └── index.ts │ ├── table │ │ ├── RxzTable │ │ │ ├── RxzTable.define.ts │ │ │ ├── RxzTable.scss │ │ │ ├── RxzTable.vue │ │ │ └── index.ts │ │ ├── RxzTableCellRender │ │ │ ├── RxzTableCellRender.define.ts │ │ │ ├── RxzTableCellRender.scss │ │ │ ├── RxzTableCellRender.vue │ │ │ └── index.ts │ │ └── index.ts │ └── template │ │ ├── RxzBadgeTpl │ │ ├── RxzBadgeTpl.define.ts │ │ ├── RxzBadgeTpl.scss │ │ ├── RxzBadgeTpl.vue │ │ └── index.ts │ │ ├── RxzDialogTpl │ │ ├── RxzDialogTpl.define.ts │ │ ├── RxzDialogTpl.scss │ │ ├── RxzDialogTpl.vue │ │ └── index.ts │ │ ├── RxzIframeObserveTpl │ │ ├── RxzIframeObserveTpl.define.ts │ │ ├── RxzIframeObserveTpl.scss │ │ ├── RxzIframeObserveTpl.vue │ │ └── index.ts │ │ ├── RxzLoadingTpl │ │ ├── RxzLoadingTpl.define.ts │ │ ├── RxzLoadingTpl.scss │ │ ├── RxzLoadingTpl.vue │ │ └── index.ts │ │ ├── RxzPopoverTpl │ │ ├── RxzPopoverTpl.define.ts │ │ ├── RxzPopoverTpl.scss │ │ ├── RxzPopoverTpl.vue │ │ └── index.ts │ │ ├── RxzPopupTpl │ │ ├── RxzPopupTpl.scss │ │ ├── RxzPopupTpl.vue │ │ └── index.ts │ │ ├── RxzSelectListTpl │ │ ├── RxzSelectListTpl.define.ts │ │ ├── RxzSelectListTpl.scss │ │ ├── RxzSelectListTpl.vue │ │ └── index.ts │ │ └── index.ts ├── directives │ ├── index.ts │ ├── vRxzBadge.ts │ ├── vRxzLoading.ts │ ├── vRxzOverflow.ts │ ├── vRxzResizeObserve.ts │ ├── vRxzTheme.ts │ └── vRxzTooltip.ts ├── i18n │ ├── en.json │ └── zh.json ├── icons │ ├── add.svg │ ├── arrow-down-solid.svg │ ├── arrow-down.svg │ ├── arrow-left.svg │ ├── arrow-right.svg │ ├── arrow-up-solid.svg │ ├── arrow-up.svg │ ├── asterisk.svg │ ├── capslock.svg │ ├── checkbox-empty.svg │ ├── checkbox-fill.svg │ ├── clear.svg │ ├── close.svg │ ├── edit.svg │ ├── error.svg │ ├── exclamation.svg │ ├── eye-close.svg │ ├── eye.svg │ ├── index.ts │ ├── information.svg │ ├── loading.svg │ ├── radio-empty.svg │ ├── radio-fill.svg │ ├── refresh.svg │ ├── search.svg │ ├── subtract.svg │ ├── success.svg │ ├── transfer.svg │ ├── user.svg │ └── warning.svg ├── index.ts ├── properties │ ├── $dataMap.ts │ ├── $i18n.ts │ └── index.ts ├── style │ └── global.css ├── themes │ ├── _themeify.scss │ ├── _themes.scss │ └── themeifies │ │ ├── _func.scss │ │ ├── _getter.scss │ │ └── _mixin.scss ├── use │ ├── index.ts │ ├── useRxzAlert.ts │ ├── useRxzBindingWithinSetup.ts │ ├── useRxzDataMap.ts │ ├── useRxzFocus.ts │ ├── useRxzI18n.ts │ ├── useRxzLoading.ts │ ├── useRxzMessageBox.ts │ ├── useRxzModal.ts │ ├── useRxzPopover.ts │ ├── useRxzPopup.ts │ ├── useRxzRelativeValidatorWithinSetup.ts │ ├── useRxzSSR.ts │ └── useRxzValidator.ts └── utils │ ├── common.ts │ ├── define.ts │ ├── index.ts │ └── popover.ts ├── public ├── favicon.ico └── index.html ├── script ├── Generate.js └── GenerateIcon.js ├── shims-vue.d.ts ├── tests └── unit │ └── example.spec.ts ├── tsconfig.json ├── vue.config.js └── webpack.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | not ie 11 5 | -------------------------------------------------------------------------------- /.commitlintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@commitlint/config-conventional"], 3 | "rules": { 4 | "type-enum": [ 5 | 2, 6 | "always", 7 | ["feat", "fix", "docs", "style", "refactor", "test", "chore", "revert"] 8 | ], 9 | "subject-full-stop": [0, "never"], 10 | "subject-case": [0, "never"] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # https://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib/** 2 | node_modules/** 3 | .vscode/** 4 | .husky/** 5 | script/** 6 | vue.config.js 7 | .eslintrc.js 8 | example/** 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/vue3-essential', 8 | 'eslint:recommended', 9 | '@vue/typescript/recommended', 10 | 'eslint-config-brisk/tslint', 11 | ], 12 | parserOptions: { 13 | ecmaVersion: 2020 14 | }, 15 | rules: { 16 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 17 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 18 | 'no-warning-comments': process.env.NODE_ENV === 'production' ? 'error' : 'warn', 19 | '@typescript-eslint/no-explicit-any': 'off', 20 | 'id-length': 'off', 21 | }, 22 | overrides: [ 23 | { 24 | files: [ 25 | '**/__tests__/*.{j,t}s?(x)', 26 | '**/tests/unit/**/*.spec.{j,t}s?(x)' 27 | ], 28 | env: { 29 | jest: true 30 | } 31 | } 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /lib 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | docs/.vuepress/.cache 24 | docs/.vuepress/.temp 25 | docs/.vuepress/dist 26 | package-lock.json 27 | .obsidian 28 | global.d.ts 29 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.lintstagedrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages/**/*.vue": "eslint --ext .js", 3 | "packages/**/*.ts": "eslint --ext .ts" 4 | } 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # 忽略目录 2 | .idea 3 | .vscode 4 | build/ 5 | docs/ 6 | example/ 7 | packages/ 8 | public/ 9 | node_modules/ 10 | typings/ 11 | tests/ 12 | script/ 13 | 14 | # 忽略指定文件 15 | .commitlintrc.json 16 | .dirlintrc.yml 17 | .editorconfig 18 | .eslintrc.js 19 | .lintstagedrc.json 20 | .npmignore 21 | .nvmrc 22 | babel.config.js 23 | jest.config.js 24 | tsconfig.json 25 | tslint.json 26 | vue.config.js 27 | .gitignore 28 | .browserslistrc 29 | .husky 30 | package-lock.json 31 | webpack.config.js 32 | .obsidian 33 | .eslintignore 34 | components.d.ts 35 | shims-vue.d.ts 36 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#65c89b", 4 | "activityBar.background": "#65c89b", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#945bc4", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "commandCenter.border": "#15202b99", 10 | "sash.hoverBorder": "#65c89b", 11 | "statusBar.background": "#42b883", 12 | "statusBar.foreground": "#15202b", 13 | "statusBarItem.hoverBackground": "#359268", 14 | "statusBarItem.remoteBackground": "#42b883", 15 | "statusBarItem.remoteForeground": "#15202b", 16 | "titleBar.activeBackground": "#42b883", 17 | "titleBar.activeForeground": "#15202b", 18 | "titleBar.inactiveBackground": "#42b88399", 19 | "titleBar.inactiveForeground": "#15202b99" 20 | }, 21 | "peacock.color": "#42b883", 22 | "window.title": "RXZ-UI" 23 | } 24 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 修改日志 2.x.x [Current] 2 | 3 | > 次版本：每季度发布一次，向下兼容的功能性新增 4 | > 修订版本：每周发布一次(紧急版本随时发布)，向下兼容的问题修正 5 | 6 | ## 2.1.2 [Current] 7 | ###### 发布日期：2023.3.30 8 | ###### 兼容性：2.1.x 9 | 10 | + 修复菜单展开折叠无效问题 11 | + 修复表格宽度问题；增加form-item的表格单元render方式，修复form值嵌套的bug 12 | + 增加RxzTableForm进阶组件 13 | + 修复表格、表单相关bug 14 | + RxzRadio增加局部禁用 15 | + 增加cellrender日期类型，增加useI18n获取当前语言环境属性 16 | 17 | ## 2.1.1 18 | ###### 发布日期：2023.3.13 19 | ###### 兼容性：2.1.x 20 | + 修复弹出层中全局组件无效的bug 21 | + 增加table组件refresh api 22 | + 增加tableRender 操作列类型 23 | + 修复消息框获取内容组件实例问题 24 | + 增加按钮组data参数 25 | + 增加虚拟列表RxzList组件 26 | 27 | ## 2.1.0 28 | ###### 发布日期：2023.3.8 29 | ###### 兼容性：2.1.x 30 | + 移除Rollup，改用webpack打包，并附带map 31 | + 修复table表格表头对其问题 32 | + 实现table单元渲染 33 | + 【重大更新】：重构使用组合式api，枚举变量重命名（不兼容2.0.0） 34 | + 【重大更新】：文档重构，案例使用组合式api 35 | + 【重大更新】：升级vue-cli到5.x（webpack 5.x） 36 | + 引入use 37 | 38 | ## 2.0.0 39 | ###### 发布日期：2022/12/20 40 | ###### 兼容性：2.x.x 41 | + 切换Vue3，使用TS的class模式 42 | + 引入国际化 43 | 44 | 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Ruixiaozi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rxz-ui 2 | 3 | rxz-ui is a combined API based on Vue3, providing rich components, instructions, Use UI component library. 4 | 5 | rxz-ui 是一个基于Vue3 组合式API，提供丰富的组件、指令、Use 的UI组件库。 6 | 7 | [![npm version](https://badge.fury.io/js/rxz-ui.svg)](https://badge.fury.io/js/rxz-ui) 8 | 9 | [![NPM](https://nodei.co/npm/rxz-ui.png)](https://nodei.co/npm/rxz-ui/) 10 | 11 | # License 12 | 13 | [MIT License](./LICENSE) 14 | 15 | Copyright (c) 2021 Ruixiaozi 16 | 17 | 18 | # Documentation 19 | 20 | [https://www.ruixiaozi.com/rxz-ui/](https://www.ruixiaozi.com/rxz-ui/) 21 | 22 | # Support 23 | 24 | + vue 25 | + chroma-js 26 | + core-js 27 | + lodash 28 | + rxjs 29 | 30 | ... -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/cli-plugin-babel/preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /build/prebuild.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const declareComponentsPath = path.join(__dirname, '../components.d.ts'); 5 | const globalComponentsPath = path.join(__dirname, '../global.d.ts'); 6 | 7 | const fileContent = fs.readFileSync(declareComponentsPath).toString(); 8 | 9 | const newContent = fileContent.replace(/import\(.*\)/gu, 'import(\'rxz-ui\')'); 10 | 11 | fs.writeFileSync(globalComponentsPath, newContent); 12 | -------------------------------------------------------------------------------- /docs/.vuepress/client.ts: -------------------------------------------------------------------------------- 1 | import { defineClientConfig } from '@vuepress/client'; 2 | import { RxzOption, RxzUI } from '@/index'; 3 | import { components } from './components'; 4 | 5 | declare const __VUEPRESS_SSR__: any; 6 | 7 | export default defineClientConfig({ 8 | enhance({ app, router, siteData }) { 9 | app.use(RxzUI, { 10 | isSSR: __VUEPRESS_SSR__, 11 | i18n: { 12 | zh: { 13 | max_custom: '最大值为{0}', 14 | custom_validator: '最小值为{min}', 15 | custom_message: '我是自定义中文', 16 | }, 17 | en: { 18 | max_custom: 'max value is {0}', 19 | custom_validator: 'min value is {min}', 20 | custom_message: 'I am custom English', 21 | }, 22 | }, 23 | dataMaps: { 24 | TESK_STATUS: { 25 | 0: { 26 | lable: '成功', 27 | value: 0, 28 | }, 29 | 1: { 30 | lable: '失败', 31 | value: 1, 32 | }, 33 | }, 34 | }, 35 | } as RxzOption); 36 | components.forEach(item => { 37 | app.component(item.__name || item.name, item); 38 | }) 39 | }, 40 | setup() {}, 41 | rootComponents: [], 42 | }); 43 | -------------------------------------------------------------------------------- /docs/.vuepress/components/breadcrumb/TestRxzBreadcrumb.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 29 | 30 | 33 | -------------------------------------------------------------------------------- /docs/.vuepress/components/button/TestButtonGroup.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /docs/.vuepress/components/button/TestButtonGroupExp1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /docs/.vuepress/components/button/TestRxzCountdownButton.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /docs/.vuepress/components/card/TestRxzFlipCard.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/components/checkbox/TestRxzCheckbox.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/checkbox/TestRxzCheckboxExp1.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/components/checkbox/TestRxzCheckboxExp2.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/checkbox/TestRxzCheckboxExp3.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 29 | 30 | 33 | -------------------------------------------------------------------------------- /docs/.vuepress/components/container/TestRxzContainer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/container/TestRxzContainerExp1.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 28 | 29 | 36 | -------------------------------------------------------------------------------- /docs/.vuepress/components/container/TestRxzContainerExp2.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/container/TestRxzContainerExp3.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/components/directive/TestvRxzLoading.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 32 | 33 | 43 | -------------------------------------------------------------------------------- /docs/.vuepress/components/directive/TestvRxzResizeObserve.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /docs/.vuepress/components/directive/tooltip/TestvRxzTooltipExp1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /docs/.vuepress/components/directive/tooltip/TestvRxzTooltipExp2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /docs/.vuepress/components/directive/tooltip/TestvRxzTooltipExp3.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /docs/.vuepress/components/directive/tooltip/TestvRxzTooltipExp4.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /docs/.vuepress/components/form/TestRxzForm.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 45 | 46 | 49 | -------------------------------------------------------------------------------- /docs/.vuepress/components/form/TestRxzFormExp1.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | 41 | 44 | -------------------------------------------------------------------------------- /docs/.vuepress/components/form/TestRxzFormExp2.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | 41 | 44 | -------------------------------------------------------------------------------- /docs/.vuepress/components/form/TestRxzFormExp3.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 45 | 46 | 49 | -------------------------------------------------------------------------------- /docs/.vuepress/components/form/TestRxzFormExp4.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | 41 | 44 | -------------------------------------------------------------------------------- /docs/.vuepress/components/form/TestRxzFormExp5.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | 41 | 44 | -------------------------------------------------------------------------------- /docs/.vuepress/components/form/TestRxzFormExp6.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | 41 | 44 | -------------------------------------------------------------------------------- /docs/.vuepress/components/formitem/TestRxzFormItem.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 31 | 32 | 35 | -------------------------------------------------------------------------------- /docs/.vuepress/components/formitem/TestRxzFormItemExp1.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 44 | 45 | 48 | -------------------------------------------------------------------------------- /docs/.vuepress/components/formitem/TestRxzFormItemExp2.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 55 | 56 | 59 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icon/IconDisplay.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | 22 | 33 | -------------------------------------------------------------------------------- /docs/.vuepress/components/icon/rxz-icon.json: -------------------------------------------------------------------------------- 1 | [ 2 | "add", 3 | "arrow-down-solid", 4 | "arrow-down", 5 | "arrow-left", 6 | "arrow-right", 7 | "arrow-up-solid", 8 | "arrow-up", 9 | "asterisk", 10 | "capslock", 11 | "checkbox-empty", 12 | "checkbox-fill", 13 | "clear", 14 | "close", 15 | "edit", 16 | "error", 17 | "exclamation", 18 | "eye-close", 19 | "eye", 20 | "index", 21 | "information", 22 | "loading", 23 | "radio-empty", 24 | "radio-fill", 25 | "refresh", 26 | "search", 27 | "subtract", 28 | "success", 29 | "transfer", 30 | "user", 31 | "warning" 32 | ] -------------------------------------------------------------------------------- /docs/.vuepress/components/input/TestRxzInput.vue: -------------------------------------------------------------------------------- 1 | 5 | 16 | 17 | 20 | -------------------------------------------------------------------------------- /docs/.vuepress/components/input/TestRxzInputExp1.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/input/TestRxzInputExp2.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /docs/.vuepress/components/input/TestRxzInputExp3.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/input/TestRxzInputExp4.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /docs/.vuepress/components/input/TestRxzInputExp5.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /docs/.vuepress/components/input/TestRxzInputExp6.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /docs/.vuepress/components/input/TestRxzInputExp7.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /docs/.vuepress/components/label/TestRxzLabel.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /docs/.vuepress/components/list/TestRxzList.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 29 | 30 | 40 | -------------------------------------------------------------------------------- /docs/.vuepress/components/pagination/TestRxzPagination.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/components/pagination/TestRxzPaginationExp1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/components/radio/TestRxzRadio.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/radio/TestRxzRadioExp1.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/components/radio/TestRxzRadioExp2.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/components/radio/TestRxzRadioExp3.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 31 | 32 | 35 | -------------------------------------------------------------------------------- /docs/.vuepress/components/search/TestRxzSearch.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | 17 | 20 | -------------------------------------------------------------------------------- /docs/.vuepress/components/search/TestRxzSearchExp1.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 26 | 27 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/components/select/TestRxzSelect.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/select/TestRxzSelectExp1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/select/TestRxzSelectExp2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/select/TestRxzSelectExp3.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | 32 | 35 | -------------------------------------------------------------------------------- /docs/.vuepress/components/switch/TestRxzSwitch.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/switch/TestRxzSwitchExp1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/switch/TestRxzSwitchExp2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/components/switch/TestRxzSwitchExp3.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /docs/.vuepress/components/table/TestRxzTable.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 71 | 72 | 75 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tableform/TestTableForm.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 57 | 58 | 61 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tabs/TestRxzTabs.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/components/textarea/TestRxzTextarea.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/textarea/TestRxzTextareaExp1.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/textarea/TestRxzTextareaExp2.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/textarea/TestRxzTextareaExp3.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tip/TestRxzTip.vue: -------------------------------------------------------------------------------- 1 | 9 | 18 | 23 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tip/TestRxzTipExp1.vue: -------------------------------------------------------------------------------- 1 | 9 | 18 | 23 | -------------------------------------------------------------------------------- /docs/.vuepress/components/tip/TestRxzTipExp2.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 25 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/alert/TestRxzAlert.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/alert/TestRxzAlertExp1.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/alert/TestRxzAlertExp2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/i18n/TestI18n.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/loading/TestRxzLoading.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | 25 | 28 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/loading/TestRxzLoadingExp1.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 26 | 27 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/loading/TestRxzLoadingExp2.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/loading/TestRxzLoadingExp3.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/messagebox/TestRxzMessageBox.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/messagebox/TestRxzMessageBoxExp1.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/messagebox/TestRxzMessageBoxExp2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 26 | 27 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/messagebox/TestRxzMessageBoxExp3.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 26 | 27 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/messagebox/TestRxzMessageBoxExp4.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 32 | 33 | 36 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/modal/TestRxzModal.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/modal/TestRxzModalExp1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/modal/TestRxzModalExp2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/modal/TestRxzModalExp3.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/modal/TestRxzModalExp4.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 34 | 35 | 38 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/modal/TestRxzModalExp5.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 38 | 39 | 42 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/modal/TestRxzModalExp6.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/modal/TestRxzModalExp7.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/modal/TestRxzModalExp8.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/popover/TestRxzPopover.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 29 | 30 | 33 | -------------------------------------------------------------------------------- /docs/.vuepress/components/use/popover/TestRxzPopoverExp1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruixiaozi/rxz-ui/01b1aecd98a7622e2c808018806e2a1a0940ce4d/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/styles/index.scss: -------------------------------------------------------------------------------- 1 | table{ 2 | display: table; 3 | width: 100%; 4 | } 5 | thead th{ 6 | text-align: left; 7 | } 8 | 9 | :root { 10 | --homepage-width: 80%; 11 | --content-width: 80%; 12 | } 13 | -------------------------------------------------------------------------------- /docs/.vuepress/webpack.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | 3 | export default { 4 | chainWebpack: (config: any) => { 5 | // 新增一个 @ 指向 packages 目录, 方便示例代码中使用 6 | config.resolve.alias.set('@', path.resolve('packages')); 7 | const iconsDir = path.resolve('packages/icons'); 8 | // 内置的svg处理排除指定目录下的文件 9 | config.module.rule('svg').exclude.add(iconsDir).end(); 10 | config.module 11 | .rule('svg-sprite-loader') 12 | .test(/\.svg$/u) 13 | .include.add(iconsDir) 14 | .end() 15 | .use('svg-sprite-loader') 16 | .loader('svg-sprite-loader') 17 | .options({ 18 | symbolId: '[name]', 19 | }) 20 | .end() 21 | .before('svg-sprite-loader') 22 | .use('svgo-loader') 23 | .loader('svgo-loader') 24 | .options({ 25 | plugins: [ 26 | { 27 | name: 'removeAttrs', 28 | params: { attrs: ['fill', 'stroke'] }, 29 | }, 30 | 'removeDesc', 31 | 'removeDoctype', 32 | 'cleanupAttrs', 33 | 'removeComments', 34 | 'removeXMLProcInst', 35 | 'removeUselessDefs', 36 | 'removeEmptyContainers', 37 | ], 38 | }) 39 | .end(); 40 | 41 | return { 42 | devtool: 'cheap-module-source-map', 43 | }; 44 | }, 45 | } 46 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /img/logo.svg 4 | heroText: RxzUI 5 | tagline: 基于Vue3 组合式API，提供丰富的组件、指令、Use 6 | actions: 7 | - text: 开始使用 → 8 | link: /guide/ 9 | type: primary 10 | features: 11 | - title: 丰富的组件 12 | details: 从基础组件到表单、表格组件，覆盖网页设计的所有基本要素。 13 | - title: 便捷的指令 14 | details: 提供指令形式实现溢出处理等，使用更加便捷。 15 | - title: 组合式Use 16 | details: 封装使用Use，提高复用。 17 | footer: MIT Licensed | Copyright © ruixiaozi | Theme is vuepress 18 | --- -------------------------------------------------------------------------------- /docs/components/form/rxzlabel.md: -------------------------------------------------------------------------------- 1 | # RxzLabel 标签 2 | 3 | 4 | 5 | ```vue 6 | 18 | 19 | 28 | 29 | 32 | 33 | ``` 34 | 35 | ## Attribute 属性 36 | 37 | | 参数 | 类型 | 描述 | 可选值 | 默认值 | 必须 | 38 | | -------- | ------- | --------- | ---------- | ----- | --- | 39 | | required | Boolean | 是否显示必须的星号 | true/false | false | | 40 | | showColon | Boolean | 是否显示冒号 | true/false | false | | 41 | -------------------------------------------------------------------------------- /docs/components/navigation/rxzbreadcrumb.md: -------------------------------------------------------------------------------- 1 | # RxzBreadcrumb 面包屑 2 | 3 | 4 | 5 | ```vue 6 | 9 | 10 | 34 | 35 | 38 | 39 | ``` 40 | 41 | ## Attribute 属性 42 | 43 | | 参数 | 类型 | 描述 | 可选值 | 默认值 | 必须 | 44 | | -------------- | --------------------------------- | ------------------------------ | ------------------------------- | ----------- | --- | 45 | | breadcrumbs | RxzBreadcrumbItem[] | 面包屑数组 | - | [] | | 46 | | router | Router | vueRouter实例；如果不传入router，默认走a连接跳转 | - | - | | 47 | 48 | ## 内置数据结构 49 | 50 | 1. RxzBreadcrumbItem 51 | 52 | ```ts 53 | interface RxzBreadcrumbItem { 54 | text: string; 55 | path?: string; 56 | } 57 | ``` 58 | -------------------------------------------------------------------------------- /docs/directives/README.md: -------------------------------------------------------------------------------- 1 | # 总览 2 | 3 | + 基础指令 4 | + [v-rxz-overflow 溢出指令](./base/rxzoverflow.html) 5 | + [v-rxz-resize-observe 尺寸改变监听指令](./base/rxzresizeobserve.html) 6 | + [v-rxz-tooltip 提示指令](./base/rxztooltip.html) 7 | + [v-rxz-loading 加载指令](./base/rxzloading.html) 8 | + [v-rxz-theme 主题指令](./base/rxztheme.html) 9 | + [v-rxz-badge 标记指令](./base/rxzbadge.html) 10 | -------------------------------------------------------------------------------- /docs/directives/base/rxzbadge.md: -------------------------------------------------------------------------------- 1 | # v-rxz-badge 标记指令 2 | 3 | Test 4 |

5 | 6 |

7 | 8 | 9 | ``` vue 10 | Test 11 |

12 | 13 |

14 | 15 | ``` 16 | 17 | ## Description 描述 18 | 19 | + 指令名称：v-rxz-badge 20 | + 参数：无 21 | + 值：string/number。字符串显示字符串本身，数值-99到99显示本身，大于99显示99+，小于-99显示-99+ 22 | + 修饰符：无 23 | -------------------------------------------------------------------------------- /docs/directives/base/rxzloading.md: -------------------------------------------------------------------------------- 1 | # v-rxz-loading 加载指令 2 | 3 | 4 | 5 | ``` vue 6 | 15 | 16 | 37 | 38 | 48 | 49 | ``` 50 | 51 | ## Description 描述 52 | 53 | + 指令名称：v-rxz-loading 54 | + 参数：无 55 | + 值：真/假值，默认为false 56 | + 修饰符：无 -------------------------------------------------------------------------------- /docs/directives/base/rxzoverflow.md: -------------------------------------------------------------------------------- 1 | # v-rxz-overflow 溢出指令 2 | 3 |
4 | 我的名字叫rxz-overflow 5 |
6 | 7 | ``` vue 8 |
9 | 我的名字叫rxz-overflow 10 |
11 | ``` 12 | 13 | ## Description 描述 14 | 15 | + 指令名称：v-rxz-overflow 16 | + 值：假值（falsity）不做溢出处理；boolean值的true或者没有值 显示宿主内容；真值（truth）显示其值； 17 | + 其他参考 [tooltip](./rxztooltip.html) 18 | 19 | ### 1. 不溢出处理 20 | 21 | --- 22 | 23 |
24 | 我的名字叫rxz-overflow 25 |
26 | 27 | ```vue 28 |
29 | 我的名字叫rxz-overflow 30 |
31 | ``` 32 | 33 | ### 2. 白色 34 | 35 | --- 36 | 37 |
38 | 我的名字叫rxz-overflow 39 |
40 | 41 | ```vue 42 |
43 | 我的名字叫rxz-overflow 44 |
45 | ``` 46 | 47 | ### 3. 位置 48 | 49 | --- 50 | 51 |
52 | 我的名字叫rxz-overflow 53 |
54 | 55 | ```vue 56 |
57 | 我的名字叫rxz-overflow 58 |
59 | ``` 60 | 61 | ### 4. 点击 62 | 63 | --- 64 | 65 |
66 | 我的名字叫rxz-overflow 67 |
68 | 69 | ```vue 70 |
71 | 我的名字叫rxz-overflow 72 |
73 | ``` -------------------------------------------------------------------------------- /docs/directives/base/rxzresizeobserve.md: -------------------------------------------------------------------------------- 1 | # v-rxz-resize-observe 尺寸改变监听指令 2 | 3 | 4 | 5 | ``` vue 6 | 12 | 13 | 24 | 25 | 28 | 29 | ``` 30 | 31 | ## Description 描述 32 | 33 | + 指令名称：v-rxz-resize-observe 34 | + 参数：无 35 | + 值：resize的回调函数，建议使用箭头函数，避免this指向错误 36 | + 修饰符：无 37 | + 注意：需要指令使用的元素的`position`不为`static` 38 | -------------------------------------------------------------------------------- /docs/directives/base/rxztheme.md: -------------------------------------------------------------------------------- 1 | # v-rxz-theme 主题指令 2 |
3 |
4 | 主要按钮 5 | 主要按钮 6 |
7 |
8 | 主要按钮 9 |
10 | 11 | 12 | ``` vue 13 |
14 |
15 | 主要按钮 16 | 主要按钮 17 |
18 |
19 | 主要按钮 20 |
21 | ``` 22 | 23 | ## Description 描述 24 | 25 | 主题以就近原则，子节点设置的主题会在其节点范围内生效 26 | 27 | + 指令名称：v-rxz-theme 28 | + 参数：无 29 | + 值：default/th-red，默认值：default 30 | + 修饰符：无 31 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | # 开始使用 2 | 3 | ## npm 安装 4 | 5 | 使用 npm 的方式安装： 6 | 7 | ``` shell 8 | npm install rxz-ui --save 9 | ``` 10 | 11 | ## 引入RxzUI 12 | 13 | 在 main.js/main.ts 中写入以下内容： 14 | 15 | ``` typescript 16 | import { createApp } from 'vue' 17 | import { RxzUI, RxzOption } from 'rxz-ui'; 18 | import 'rxz-ui/lib/rxz-ui.css'; 19 | import App from './App.vue'; 20 | 21 | const app = createApp(App); 22 | use(RxzUI, { 23 | i18n: {}, 24 | dataMaps: {}, 25 | isSSR: false, 26 | } as RxzOption); 27 | app.mount('#app'); 28 | ``` 29 | 30 | RxzOption的定义： 31 | ``` 32 | interface RxzOption { 33 | i18n?: any; 34 | dataMaps?: RxzDataMap; 35 | // 默认false，用于兼容服务端渲染，如果为true，需要使用到dom操作的会被屏蔽 36 | isSSR?: boolean; 37 | } 38 | ``` 39 | 40 | ## 引入提示（Volar） 41 | 42 | 1. vscode安装Volar扩展 43 | 2. 引入类型文件(tsconfig.json)： 44 | 45 | ``` json 46 | { 47 | ... 48 | "types": [ 49 | "webpack-env", 50 | "rxz-ui/global" 51 | ], 52 | ... 53 | } 54 | ``` 55 | 56 | ## Hello World 57 | 58 | 在模板文件中使用： 59 | 60 | --- 61 | 62 | Hello World 63 | 64 | ``` vue 65 | Hello World 66 | ``` 67 | 68 | -------------------------------------------------------------------------------- /docs/properties/README.md: -------------------------------------------------------------------------------- 1 | # 总览 2 | 3 | + [$i18n 国际化转换](./i18n.html) 4 | + [$dataMap 映射转换](./datamap.html) 5 | -------------------------------------------------------------------------------- /docs/properties/datamap.md: -------------------------------------------------------------------------------- 1 | # $dataMap 映射转换 2 | 3 | 同 [useRxzDataMap](../use/base/userxzdatamap.html) 的 `getDataMapLabel` 方法。 4 | 5 | --- 6 | 7 |
{{ $dataMap('TESK_STATUS', '0') }}
8 |
{{ $dataMap('TESK_STATUS', '1') }}
9 | 10 | ---- 11 | 12 | 在引入的时候添加选项 13 | 14 | ```ts 15 | import { createApp } from 'vue' 16 | import { RxzUI, RxzOption } from 'rxz-ui'; 17 | import 'rxz-ui/lib/rxz-ui.css'; 18 | import App from './App.vue'; 19 | 20 | const app = createApp(App); 21 | app.use(RxzUI, { 22 | dataMaps: { 23 | TESK_STATUS: { 24 | 0: { 25 | lable: '成功', 26 | value: 0, 27 | }, 28 | 1: { 29 | lable: '失败', 30 | value: 1, 31 | }, 32 | }, 33 | }, 34 | } as RxzOption); 35 | app.mount('#app'); 36 | ``` 37 | 38 | ```vue 39 | 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /docs/properties/i18n.md: -------------------------------------------------------------------------------- 1 | # $i18n 国际化转换 2 | 3 | 同 [useRxzI18n](../use/base/userxzi18n.html) 的 `i18n` 方法。 4 | 5 | --- 6 | 7 |
{{ $i18n('custom_message') }}
8 |
{{ $i18n('max_custom', [10]) }}
9 |
{{ $i18n('custom_validator', { min: 0 }) }}
10 | 11 | ---- 12 | 13 | 在引入的时候添加选项 14 | 15 | ```ts 16 | import { createApp } from 'vue' 17 | import { RxzUI, RxzOption } from 'rxz-ui'; 18 | import 'rxz-ui/lib/rxz-ui.css'; 19 | import App from './App.vue'; 20 | 21 | const app = createApp(App); 22 | app.use(RxzUI, { 23 | i18n: { 24 | zh: { 25 | custom_message: '我是自定义中文', 26 | max_custom: '最大值为{0}', 27 | custom_validator: '最小值为{min}', 28 | }, 29 | en: { 30 | custom_message: 'I am custom English', 31 | max_custom: 'max value is {0}', 32 | custom_validator: 'min value is {min}', 33 | }, 34 | }, 35 | } as RxzOption); 36 | app.mount('#app'); 37 | ``` 38 | 39 | ```vue 40 | 45 | ``` 46 | 47 | -------------------------------------------------------------------------------- /docs/use/README.md: -------------------------------------------------------------------------------- 1 | # 总览 2 | 3 | + 基础 4 | + [useRxzI18n 国际化](./base/userxzi18n.html) 5 | + [useRxzDataMap 数据映射](./base/userxzdatamap.html) 6 | + [useRxzFocus 聚焦](./base/userxzfocus.html) 7 | + [useRxzSSR 服务端渲染](./base/userxzssr.html) 8 | + [useRxzValidator 校验器](./base/userxzvalidator.html) 9 | 10 | + Setup [仅用于setup中] 11 | + [useRxzBindingWithinSetup 绑定值](./setup/userxzbindingwithinsetup.html) 12 | + [useRxzRelativeValidatorWithinSetup 关联校验器](./setup/userxzrelativevalidatorwithinsetup.html) 13 | 14 | + 弹出层 15 | + [useRxzPopup 弹出层管理](./popup/userxzpopup.html) 16 | + [useRxzPopover 弹出框](./popup/userxzpopover.html) 17 | + [useRxzModal 模态框](./popup/userxzmodal.html) 18 | + [useRxzMessageBox 消息框](./popup/userxzmessagebox.html) 19 | + [useRxzAlert 提示框](./popup/userxzalert.html) 20 | + [useRxzLoading 全局加载](./popup/userxzloading.html) -------------------------------------------------------------------------------- /docs/use/base/userxzfocus.md: -------------------------------------------------------------------------------- 1 | # useRxzFocus 聚焦 2 | 3 | ## 介绍 4 | 5 | 聚焦功能的集中处理 6 | 7 | 引入use： 8 | 9 | ```ts 10 | import { useRxzFocus } from '@/use'; 11 | const { /* 你要引入的API或者属性 */ } = useRxzFocus(); 12 | ``` 13 | 14 | ## API 15 | 16 | ### 1. tabIndexNext 17 | 18 | 方法签名： 19 | 20 | ```ts 21 | /** 22 | * 获取下一个tabindex 23 | * @returns number 24 | */ 25 | function tabIndexNext(): number; 26 | ``` 27 | -------------------------------------------------------------------------------- /docs/use/base/userxzssr.md: -------------------------------------------------------------------------------- 1 | # useRxzSSR 服务端渲染 2 | 3 | ## 介绍 4 | 5 | 服务端渲染相关，引入UI组件时可通过选项设定 `isSSR` 的值： 6 | 7 | ```ts 8 | app.use(RxzUI, { 9 | isSSR: true, // 默认为false 10 | } as RxzOption); 11 | ``` 12 | 13 | 引入use： 14 | 15 | ```ts 16 | import { useRxzSSR } from '@/use'; 17 | const { /* 你要引入的API或者属性 */ } = useRxzSSR(); 18 | ``` 19 | 20 | ## 属性 21 | 22 | ### 1. isSSR 23 | 24 | 属性类型： 25 | 26 | ```ts 27 | // 当前环境是否为ssr，可设置，可获取 28 | const isSSR: Ref; 29 | ``` 30 | 31 | ## API 32 | 33 | ### 1. registeClientInitNoSSR 34 | 35 | 方法签名： 36 | 37 | ```ts 38 | /** 39 | * 注册在客户端初始化时执行的方法，非SSR模式下 40 | * 需要在app.use之前注册 41 | * @param cbk 回调方法 42 | */ 43 | function registeClientInitNoSSR(cbk: (app?: App) => void): void; 44 | ``` 45 | 46 | ### 2. runClientInitNoSSR 47 | 48 | 方法签名： 49 | 50 | ```ts 51 | /** 52 | * 运行已经注册在客户端初始化时执行的方法 53 | * app.use组件库时执行 54 | */ 55 | function runClientInitNoSSR(app: App): void; 56 | ``` 57 | -------------------------------------------------------------------------------- /docs/use/popup/userxzpopup.md: -------------------------------------------------------------------------------- 1 | # useRxzPopup 弹出层管理 2 | 3 | ## 介绍 4 | 5 | 弹出层顶层管理器，管理弹出层的层级、容器、各个弹出层的句柄。 6 | 7 | 引入use： 8 | 9 | ```ts 10 | import { useRxzPopup } from '@/use'; 11 | const { /* 你要引入的API或者属性 */ } = useRxzPopup(); 12 | ``` 13 | 14 | ## API 15 | 16 | ### 1. zIndexNext 17 | 18 | 方法签名： 19 | 20 | ```ts 21 | /** 22 | * 获取popup下一个zindex 23 | * @returns number 24 | */ 25 | function zIndexNext(): number; 26 | ``` 27 | 28 | ### 2. appendPopup 29 | 30 | 方法签名： 31 | 32 | ```ts 33 | /** 34 | * 添加popup 35 | * @param vnode 虚拟node 36 | * @param key 指定唯一标识，默认随机 37 | * @returns 唯一标识 38 | */ 39 | function appendPopup(vnode: VNode, key?: string): string; 40 | ``` 41 | 42 | ### 3. removePopup 43 | 44 | 方法签名： 45 | 46 | ```ts 47 | /** 48 | * 移除popup 49 | * @param key 唯一标识 50 | */ 51 | function removePopup(key: string): void; 52 | ``` 53 | 54 | 55 | ### 4. clearPopup 56 | 57 | 方法签名： 58 | 59 | ```ts 60 | /** 61 | * 清除popup 62 | */ 63 | function clearPopup(): void; 64 | ``` -------------------------------------------------------------------------------- /docs/use/setup/userxzrelativevalidatorwithinsetup.md: -------------------------------------------------------------------------------- 1 | # useRxzRelativeValidatorWithinSetup 关联校验器 2 | 3 | ## 介绍 4 | 5 | 关联校验器可以使祖先组件和子孙组件生成check方法，用于进行校验（调用 [useRxzValidator](../base/userxzvalidator.html) 的 `checkError`） 6 | 7 | 祖先生产的check方法可以同时触发子孙组件的check方法，主要用于存在关联校验的场景。 8 | 9 | 引入use： 10 | 11 | ```ts 12 | import { useRxzRelativeValidatorWithinSetup } from '@/use'; 13 | const { /* 你要引入的API或者属性 */ } = useRxzRelativeValidatorWithinSetup(); 14 | ``` 15 | 16 | ## API 17 | 18 | ### 1. generateRelativeCheck 19 | 20 | 方法签名： 21 | 22 | ```ts 23 | type RxzValidatorCheck = () => RxzValidatorCheckRes | Dictionary | null; 24 | /** 25 | * 生产关联检查器，能够关联组件的父子层级，父检查器会检查所有子检查器 26 | * 不传入参数为父校验器 27 | * @param name 检查的字段名的引用对象 28 | * @param data 检查的字段值的引用对象 29 | * @param validators 检查的校验器列表的引用对象 30 | * @param _errorTips 检查的错误提示对应表的引用对象 31 | * @param onCheck onCheck的rxjs subject对象 32 | * @returns check方法 33 | */ 34 | function generateRelativeCheck( 35 | name?: Ref, 36 | data?: Ref, 37 | validators?: Ref, 38 | _errorTips?: Ref, 39 | onCheck?: Subject, 40 | ): RxzValidatorCheck; 41 | ``` 42 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/components/advance/RxzButtonGroup/RxzButtonGroup.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzButtonGroup 3 | * @description: RxzButtonGroup 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { PropType } from 'vue'; 8 | import { RXZ_BUTTON_TYPE_ENUM } from '@/components/base/RxzButton'; 9 | import { defineEmitsUtil, definePropsUtil } from '@/utils'; 10 | 11 | export interface RxzButtonGroupItem { 12 | text: string; 13 | disabled?: boolean; 14 | loading?: boolean; 15 | type?: RXZ_BUTTON_TYPE_ENUM; 16 | width?: string; 17 | bgColor?: string; 18 | hoverBgColor?: string; 19 | textColor?: string; 20 | hoverTextColor?: string; 21 | onClick?: (...args: any[]) => any; 22 | } 23 | 24 | export default { 25 | rxzButtonGroupProps: definePropsUtil({ 26 | buttons: { type: Array as PropType, default: () => [] }, 27 | max: { type: Number, default: 3 }, 28 | link: { type: Boolean, default: false }, 29 | data: { type: Object }, 30 | }), 31 | rxzButtonGroupEmits: defineEmitsUtil({ 32 | 33 | }), 34 | }; 35 | 36 | -------------------------------------------------------------------------------- /packages/components/advance/RxzButtonGroup/RxzButtonGroup.scss: -------------------------------------------------------------------------------- 1 | .rxz-button-group { 2 | 3 | &>*:not(:last-child) { 4 | margin-right: 8px; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/advance/RxzButtonGroup/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzButtonGroup from './RxzButtonGroup.vue'; 2 | export const RxzButtonGroup = _RxzButtonGroup; 3 | export * from './RxzButtonGroup.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/advance/RxzCountdownButton/RxzCountdownButton.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzCountdownButton 3 | * @description: RxzCountdownButton 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { RXZ_BUTTON_TYPE_ENUM } from '@/components/base/RxzButton'; 8 | import { defineEmitsUtil, definePropsUtil } from '@/utils'; 9 | import { PropType } from 'vue'; 10 | 11 | export default { 12 | rxzCountdownButtonProps: definePropsUtil({ 13 | modelValue: { type: Boolean, default: false }, 14 | seconds: { type: Number, default: 60 }, 15 | type: { type: String as PropType, default: RXZ_BUTTON_TYPE_ENUM.primary }, 16 | }), 17 | rxzCountdownButtonEmits: defineEmitsUtil({ 18 | 'update:modelValue': null, 19 | }), 20 | }; 21 | 22 | -------------------------------------------------------------------------------- /packages/components/advance/RxzCountdownButton/RxzCountdownButton.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruixiaozi/rxz-ui/01b1aecd98a7622e2c808018806e2a1a0940ce4d/packages/components/advance/RxzCountdownButton/RxzCountdownButton.scss -------------------------------------------------------------------------------- /packages/components/advance/RxzCountdownButton/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzCountdownButton from './RxzCountdownButton.vue'; 2 | export const RxzCountdownButton = _RxzCountdownButton; 3 | export * from './RxzCountdownButton.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/advance/RxzPagination/RxzPagination.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzPagination 3 | * @description: RxzPagination 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | import { PropType } from 'vue'; 9 | 10 | export interface RxzPaginations { 11 | page: number; 12 | pageSize: number; 13 | total: number; 14 | } 15 | 16 | export enum RXZ_PAGINATION_PAGE_E { 17 | FAST_FORWARD='FAST_FORWARD', 18 | FAST_BACK='FAST_BACK', 19 | } 20 | 21 | export default { 22 | rxzPaginationProps: definePropsUtil({ 23 | modelValue: { type: Object as PropType, required: true }, 24 | pageStart: { type: Number, default: 0 }, 25 | displayStart: { type: Number, default: 1 }, 26 | }), 27 | rxzPaginationEmits: defineEmitsUtil({ 28 | 'update:modelValue': null, 29 | 'change': null, 30 | }), 31 | }; 32 | 33 | -------------------------------------------------------------------------------- /packages/components/advance/RxzPagination/RxzPagination.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-pagination { 4 | display: flex; 5 | align-items: center; 6 | justify-content: space-between; 7 | padding: 16px 4px; 8 | 9 | &-left { 10 | display: flex; 11 | align-items: center; 12 | } 13 | 14 | &-right { 15 | display: flex; 16 | align-items: center; 17 | } 18 | 19 | .rxz-icon { 20 | cursor: pointer; 21 | 22 | &.disabled { 23 | cursor: not-allowed; 24 | @include themeify.themeify { 25 | color: themeify.getColor("disabled", true); 26 | } 27 | } 28 | } 29 | 30 | 31 | 32 | &-total { 33 | margin-right: 16px; 34 | } 35 | 36 | &-page { 37 | margin: 0px 8px; 38 | } 39 | 40 | &-goto { 41 | margin-left: 8px; 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /packages/components/advance/RxzPagination/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzPagination from './RxzPagination.vue'; 2 | export const RxzPagination = _RxzPagination; 3 | export * from './RxzPagination.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/advance/RxzSearch/RxzSearch.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzSearch 3 | * @description: RxzSearch 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | 9 | export default { 10 | rxzSearchProps: definePropsUtil({ 11 | 12 | }), 13 | rxzSearchEmits: defineEmitsUtil({ 14 | 'search': null, 15 | }), 16 | }; 17 | 18 | -------------------------------------------------------------------------------- /packages/components/advance/RxzSearch/RxzSearch.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-search { 4 | &-icon { 5 | @include themeify.themeify { 6 | color: themeify.getTextColor('darker', false); 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/components/advance/RxzSearch/RxzSearch.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 38 | 39 | 42 | -------------------------------------------------------------------------------- /packages/components/advance/RxzSearch/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzSearch from './RxzSearch.vue'; 2 | export const RxzSearch = _RxzSearch; 3 | export * from './RxzSearch.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/advance/RxzTableForm/RxzTableForm.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzTableForm 3 | * @description: RxzTableForm 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { RxzFormItemConfig } from '@/components/form'; 8 | import { RxzValidatorErrorTips } from '@/use'; 9 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 10 | import { Component, PropType } from 'vue'; 11 | 12 | 13 | export interface RxzTableFormColumnConfig extends RxzFormItemConfig { 14 | // 表格列名称 15 | label: string; 16 | // formItem的默认插槽使用一个组件，如果为空，则默认显示当前formitem的值 17 | slotCnt?: Component, 18 | props?: any, 19 | errorTip?: RxzValidatorErrorTips, 20 | } 21 | 22 | export interface RxzTableFormRowConfig { 23 | [key: string]: RxzTableFormColumnConfig, 24 | } 25 | 26 | export default { 27 | rxzTableFormProps: definePropsUtil({ 28 | modelValue: { type: Array as PropType>, required: true }, 29 | rowConfig: { type: Object as PropType, required: true }, 30 | pageSize: { type: Number, default: 5 }, 31 | }), 32 | rxzTableFormEmits: defineEmitsUtil({ 33 | 'update:modelValue': null, 34 | }), 35 | }; 36 | 37 | -------------------------------------------------------------------------------- /packages/components/advance/RxzTableForm/RxzTableForm.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruixiaozi/rxz-ui/01b1aecd98a7622e2c808018806e2a1a0940ce4d/packages/components/advance/RxzTableForm/RxzTableForm.scss -------------------------------------------------------------------------------- /packages/components/advance/RxzTableForm/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzTableForm from './RxzTableForm.vue'; 2 | export const RxzTableForm = _RxzTableForm; 3 | export * from './RxzTableForm.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/advance/index.ts: -------------------------------------------------------------------------------- 1 | import { RxzCountdownButton } from './RxzCountdownButton'; 2 | import { RxzButtonGroup } from './RxzButtonGroup'; 3 | import { RxzSearch } from './RxzSearch'; 4 | import { RxzPagination } from './RxzPagination'; 5 | import { RxzTableForm } from './RxzTableForm'; 6 | 7 | 8 | export * from './RxzCountdownButton'; 9 | export * from './RxzButtonGroup'; 10 | export * from './RxzSearch'; 11 | export * from './RxzPagination'; 12 | export * from './RxzTableForm'; 13 | 14 | // Advance组件列表 15 | export const RxzAdvanceComponents = [ 16 | RxzTableForm, 17 | RxzPagination, 18 | RxzSearch, 19 | RxzButtonGroup, 20 | RxzCountdownButton, 21 | ]; 22 | 23 | -------------------------------------------------------------------------------- /packages/components/base/RxzButton/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzButton from './RxzButton.vue'; 2 | export const RxzButton = _RxzButton; 3 | export * from './RxzButton.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/RxzCheckbox/RxzCheckbox.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzCheckbox 3 | * @description: RxzCheckbox 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { RXZ_FLEX_DIRECTION_ENUM } from '@/components/layout'; 8 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 9 | import { PropType } from 'vue'; 10 | 11 | export interface RxzCheckboxItem { 12 | label: string; 13 | value: any; 14 | } 15 | 16 | export default { 17 | rxzCheckboxProps: definePropsUtil({ 18 | modelValue: { type: Array as PropType }, 19 | items: { type: Array as PropType, default: () => ([]) }, 20 | direction: { type: String as PropType, default: RXZ_FLEX_DIRECTION_ENUM.horizontal }, 21 | disabled: { type: Boolean, default: false }, 22 | }), 23 | rxzCheckboxEmits: defineEmitsUtil({ 24 | 'update:modelValue': null, 25 | }), 26 | }; 27 | 28 | -------------------------------------------------------------------------------- /packages/components/base/RxzCheckbox/RxzCheckbox.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-checkbox { 4 | 5 | &-item { 6 | cursor: pointer; 7 | display: inline-flex; 8 | align-items: center; 9 | 10 | &:not(:last-child) { 11 | padding-right: 8px; 12 | } 13 | 14 | &.disabled { 15 | cursor: not-allowed !important; 16 | @include themeify.themeify { 17 | color: themeify.getColor("disabled", true); 18 | } 19 | } 20 | 21 | &.selected:not(.disabled) { 22 | @include themeify.themeify { 23 | color: themeify.getColor("primary", false); 24 | } 25 | } 26 | 27 | &-label { 28 | display: inline-block; 29 | padding: 4px; 30 | } 31 | 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/components/base/RxzCheckbox/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzCheckbox from './RxzCheckbox.vue'; 2 | export const RxzCheckbox = _RxzCheckbox; 3 | export * from './RxzCheckbox.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/RxzIcon/RxzIcon.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzIcon 3 | * @description: RxzIcon 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { defineEmitsUtil, definePropsUtil } from '@/utils'; 8 | import { PropType } from 'vue'; 9 | 10 | export enum RXZ_ICON_TYPE_ENUM { 11 | default='default', 12 | success='success', 13 | information='information', 14 | warning='warning', 15 | error='error', 16 | } 17 | 18 | export default { 19 | rxzIconProps: definePropsUtil({ 20 | name: { type: String, default: 'search' }, 21 | size: { type: Number, default: 24 }, 22 | spinner: { type: Boolean, default: false }, 23 | step: { type: Number, default: 1 }, 24 | rotate: { type: Number, default: 0 }, 25 | type: { type: String as PropType, default: RXZ_ICON_TYPE_ENUM.default }, 26 | }), 27 | rxzIconEmits: defineEmitsUtil({ 28 | 29 | }), 30 | }; 31 | 32 | -------------------------------------------------------------------------------- /packages/components/base/RxzIcon/RxzIcon.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-icon { 4 | display: inline-flex; 5 | justify-content: center; 6 | align-items: center; 7 | @each $type in "success", "information", "warning", "error" { 8 | 9 | &.rxz-icon-type-#{$type} { 10 | @include themeify.themeify { 11 | color: themeify.getColor($type, false); 12 | } 13 | } 14 | } 15 | 16 | svg { 17 | width: 100%; 18 | height: 100%; 19 | overflow: hidden; 20 | fill: currentColor; 21 | stroke: currentColor; 22 | } 23 | } 24 | 25 | -------------------------------------------------------------------------------- /packages/components/base/RxzIcon/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzIcon from './RxzIcon.vue'; 2 | export const RxzIcon = _RxzIcon; 3 | export * from './RxzIcon.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/RxzInput/RxzInput.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzInput 3 | * @description: RxzInput 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | 9 | export default { 10 | rxzInputProps: definePropsUtil({ 11 | modelValue: { type: String }, 12 | disabled: { type: Boolean, default: false }, 13 | clear: { type: Boolean, default: false }, 14 | width: { type: String, default: '250px' }, 15 | capslock: { type: Boolean, default: false }, 16 | password: { type: Boolean, default: false }, 17 | paste: { type: Boolean, default: true }, 18 | copy: { type: Boolean, default: true }, 19 | }), 20 | rxzInputEmits: defineEmitsUtil({ 21 | 'update:modelValue': null, 22 | 'copy': null, 23 | 'paste': null, 24 | 'blur': null, 25 | }), 26 | }; 27 | 28 | -------------------------------------------------------------------------------- /packages/components/base/RxzInput/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzInput from './RxzInput.vue'; 2 | export const RxzInput = _RxzInput; 3 | export * from './RxzInput.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/RxzList/RxzList.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzList 3 | * @description: RxzList 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | 9 | export default { 10 | rxzListProps: definePropsUtil({ 11 | items: { type: Array, default: () => [] }, 12 | // 预计每一项的高度，未开启computeRealItemHeight，则用于列表项实际高度 13 | // 开启computeRealItemHeight，用于估算页面实际渲染条数 14 | // 高度如果太大，将导致第一页下方空白，高度如果太小，将导致页面实际渲染条数过多 15 | perItemHeight: { type: Number, default: '30' }, 16 | // 是否计算列表项的实际高度，false，直接使用perItemHeight 17 | computeRealItemHeight: { type: Boolean, default: false }, 18 | }), 19 | rxzListEmits: defineEmitsUtil({ 20 | 21 | }), 22 | }; 23 | 24 | -------------------------------------------------------------------------------- /packages/components/base/RxzList/RxzList.scss: -------------------------------------------------------------------------------- 1 | .rxz-list { 2 | position: relative; 3 | // 默认百分百 4 | height: 100%; 5 | overflow: auto; 6 | 7 | &-empty { 8 | position: absolute; 9 | top: 0; 10 | right: 0; 11 | left: 0; 12 | } 13 | 14 | .wrap { 15 | position: absolute; 16 | top: 0; 17 | right: 0; 18 | left: 0; 19 | text-align: center; 20 | 21 | } 22 | 23 | } 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /packages/components/base/RxzList/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzList from './RxzList.vue'; 2 | export const RxzList = _RxzList; 3 | export * from './RxzList.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/RxzRadio/RxzRadio.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzRadio 3 | * @description: RxzRadio 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { RXZ_FLEX_DIRECTION_ENUM } from '@/components/layout/RxzFlex'; 8 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 9 | import { PropType } from 'vue'; 10 | 11 | export interface RxzRadioItem { 12 | label: string; 13 | value: any; 14 | // 对单个选项进行禁用 15 | disabled?: boolean; 16 | } 17 | 18 | export default { 19 | rxzRadioProps: definePropsUtil({ 20 | modelValue: { type: Object as PropType }, 21 | items: { type: Array as PropType, default: () => ([]) }, 22 | direction: { type: String as PropType, default: RXZ_FLEX_DIRECTION_ENUM.horizontal }, 23 | disabled: { type: Boolean, default: false }, 24 | }), 25 | rxzRadioEmits: defineEmitsUtil({ 26 | 'update:modelValue': null, 27 | }), 28 | }; 29 | 30 | -------------------------------------------------------------------------------- /packages/components/base/RxzRadio/RxzRadio.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-radio { 4 | &-item { 5 | cursor: pointer; 6 | display: inline-flex; 7 | align-items: center; 8 | 9 | &:not(:last-child) { 10 | padding-right: 8px; 11 | } 12 | 13 | &.disabled { 14 | cursor: not-allowed !important; 15 | @include themeify.themeify { 16 | color: themeify.getColor("disabled", true); 17 | } 18 | } 19 | 20 | &.selected:not(.disabled) { 21 | @include themeify.themeify { 22 | color: themeify.getColor("primary", false); 23 | } 24 | } 25 | 26 | &-label { 27 | display: inline-block; 28 | padding: 4px; 29 | } 30 | 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/components/base/RxzRadio/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzRadio from './RxzRadio.vue'; 2 | export const RxzRadio = _RxzRadio; 3 | export * from './RxzRadio.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/RxzSelect/RxzSelect.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzSelect 3 | * @description: RxzSelect 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { RxzSelectOption } from '@/components/template/RxzSelectListTpl'; 8 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 9 | import { PropType } from 'vue'; 10 | 11 | 12 | export default { 13 | rxzSelectProps: definePropsUtil({ 14 | modelValue: { type: Object as PropType }, 15 | width: { type: String, default: '120px' }, 16 | options: { type: Array as PropType, default: () => [] }, 17 | disabled: { type: Boolean, default: false }, 18 | isButton: { type: Boolean, default: true }, 19 | }), 20 | rxzSelectEmits: defineEmitsUtil({ 21 | 'update:modelValue': null, 22 | }), 23 | }; 24 | 25 | -------------------------------------------------------------------------------- /packages/components/base/RxzSelect/RxzSelect.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-select { 4 | display: inline-block; 5 | box-sizing: border-box; 6 | padding: 8px 32px 8px 12px; 7 | background-image: none; 8 | outline: none; 9 | border: 1px solid #d5e7fc; 10 | border-radius: 5px; 11 | transition: border-color .2s; 12 | cursor: pointer; 13 | position: relative; 14 | font-size: 14px; 15 | 16 | &.text { 17 | padding: 0 24px 0 0; 18 | border: none; 19 | border-radius: 0; 20 | 21 | .rxz-select-arrow { 22 | color: #000; 23 | } 24 | } 25 | 26 | &:focus:not(.disabled) { 27 | @include themeify.themeify { 28 | border-color: themeify.getBorderColor("focus", false) !important; 29 | } 30 | } 31 | 32 | &.disabled { 33 | cursor: not-allowed !important; 34 | color: #fff; 35 | @include themeify.themeify { 36 | background-color: themeify.getColor("disabled", false) !important; 37 | } 38 | .rxz-select-arrow { 39 | display: none; 40 | } 41 | } 42 | 43 | &-text { 44 | display: inline-block; 45 | width: 100%; 46 | } 47 | 48 | &-arrow { 49 | position: absolute; 50 | top: 50%; 51 | right: 4px; 52 | transform: translateY(-50%) !important; 53 | color: #d5e7fc; 54 | } 55 | 56 | } 57 | -------------------------------------------------------------------------------- /packages/components/base/RxzSelect/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzSelect from './RxzSelect.vue'; 2 | export const RxzSelect = _RxzSelect; 3 | export * from './RxzSelect.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/RxzSwitch/RxzSwitch.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzSwitch 3 | * @description: RxzSwitch 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | export default { 9 | rxzSwitchProps: definePropsUtil({ 10 | modelValue: { type: Boolean, default: undefined }, 11 | disabled: { type: Boolean, default: false }, 12 | onText: { type: String, default: '' }, 13 | offText: { type: String, default: '' }, 14 | }), 15 | rxzSwitchEmits: defineEmitsUtil({ 16 | 'update:modelValue': null, 17 | }), 18 | }; 19 | 20 | -------------------------------------------------------------------------------- /packages/components/base/RxzSwitch/RxzSwitch.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-switch { 4 | width: fit-content; 5 | min-width: 14px; 6 | height: 20px; 7 | border-radius: 24px; 8 | position: relative; 9 | padding: 2px 12px 2px 26px; 10 | color: white; 11 | cursor: pointer; 12 | transition: all .2s; 13 | user-select: none; 14 | 15 | &.disabled { 16 | cursor: not-allowed !important; 17 | @include themeify.themeify { 18 | background-color: themeify.getColor("disabled", true) !important; 19 | } 20 | } 21 | 22 | &::after { 23 | transition: all .2s; 24 | content: ''; 25 | display: inline-block; 26 | background-color: white; 27 | position: absolute; 28 | top: 2px; 29 | left: 2px; 30 | width: 20px; 31 | height: 20px; 32 | border-radius: 20px; 33 | } 34 | 35 | @include themeify.themeify { 36 | background-color: themeify.getColor("information", false); 37 | } 38 | 39 | &.on { 40 | padding: 2px 26px 2px 12px; 41 | 42 | &::after { 43 | left: calc(100% - 22px); 44 | } 45 | 46 | @include themeify.themeify { 47 | background-color: themeify.getColor("primary", false); 48 | } 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /packages/components/base/RxzSwitch/RxzSwitch.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /packages/components/base/RxzSwitch/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzSwitch from './RxzSwitch.vue'; 2 | export const RxzSwitch = _RxzSwitch; 3 | export * from './RxzSwitch.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/RxzTextarea/RxzTextarea.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzTextarea 3 | * @description: RxzTextarea 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | 9 | export default { 10 | rxzTextareaProps: definePropsUtil({ 11 | modelValue: { type: String }, 12 | disabled: { type: Boolean, default: false }, 13 | minRow: { type: Number, default: 1 }, 14 | maxRow: { type: Number, default: 10 }, 15 | row: { type: Number, default: 2 }, 16 | width: { type: String, default: '250px' }, 17 | placeholder: { type: String, default: '' }, 18 | }), 19 | rxzTextareaEmits: defineEmitsUtil({ 20 | 'update:modelValue': null, 21 | }), 22 | }; 23 | 24 | -------------------------------------------------------------------------------- /packages/components/base/RxzTextarea/RxzTextarea.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-textarea { 4 | textarea { 5 | line-height: 1.15; 6 | box-sizing: border-box; 7 | padding: 8px; 8 | background-image: none; 9 | outline: none; 10 | border-width: 1.5px; 11 | border-style: solid; 12 | border-radius: 5px; 13 | width: 100%; 14 | transition: border-color .2s; 15 | resize: vertical; 16 | 17 | @include themeify.themeify { 18 | border-color: themeify.getBorderColor("default", false); 19 | } 20 | 21 | &:focus { 22 | @include themeify.themeify { 23 | border-color: themeify.getBorderColor("focus", false) !important; 24 | } 25 | } 26 | } 27 | 28 | &:not(.is-disabled):hover textarea { 29 | @include themeify.themeify { 30 | border-color: themeify.getBorderColor("default", true); 31 | } 32 | } 33 | 34 | &.is-disabled * { 35 | cursor: not-allowed !important; 36 | } 37 | 38 | &.is-disabled textarea { 39 | @include themeify.themeify { 40 | background-color: themeify.getColor("disabled", false) !important; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/components/base/RxzTextarea/RxzTextarea.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 37 | 38 | 41 | -------------------------------------------------------------------------------- /packages/components/base/RxzTextarea/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzTextarea from './RxzTextarea.vue'; 2 | export const RxzTextarea = _RxzTextarea; 3 | export * from './RxzTextarea.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/RxzTip/RxzTip.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzTip 3 | * @description: RxzTip 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { defineEmitsUtil, definePropsUtil } from '@/utils'; 8 | import { PropType } from 'vue'; 9 | 10 | export enum RXZ_TIP_TYPE_ENUM { 11 | success='success', 12 | information='information', 13 | warning='warning', 14 | error='error', 15 | } 16 | 17 | export default { 18 | rxzTipProps: definePropsUtil({ 19 | type: { type: String as PropType, default: RXZ_TIP_TYPE_ENUM.information }, 20 | closable: { type: Boolean, default: false }, 21 | }), 22 | rxzTipEmits: defineEmitsUtil({ 23 | 'show': null, 24 | 'hidden': null, 25 | }), 26 | }; 27 | 28 | -------------------------------------------------------------------------------- /packages/components/base/RxzTip/RxzTip.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-tip { 4 | box-sizing: border-box; 5 | width: 100%; 6 | padding: 8px 32px 8px 8px; 7 | display: flex; 8 | align-items: center; 9 | border-radius: 4px; 10 | border: 1px solid #000; 11 | position: relative; 12 | 13 | @include themeify.themeify { 14 | border-color: themeify.getBorderColor("default", true); 15 | } 16 | 17 | @include themeify.theme_color("default", false); 18 | 19 | @each $type in "success", "information", "warning", "error" { 20 | 21 | &.rxz-tip-#{$type} { 22 | @include themeify.theme_color($type, false); 23 | } 24 | } 25 | 26 | &-content { 27 | margin-left: 4px; 28 | flex: 1; 29 | overflow: hidden; 30 | font-size: 14px; 31 | } 32 | 33 | &-close { 34 | position: absolute; 35 | right: 8px; 36 | cursor: pointer; 37 | } 38 | 39 | } 40 | 41 | .move-anim-enter-active { 42 | animation: move-anim 0.3s; 43 | } 44 | .move-anim-leave-active { 45 | animation: move-anim 0.3s reverse; 46 | } 47 | 48 | @keyframes move-anim { 49 | 0% { 50 | transform: translateY(-50%); 51 | opacity: 0; 52 | } 53 | 100% { 54 | transform: translateY(0); 55 | opacity: 1; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/components/base/RxzTip/RxzTip.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 38 | 39 | 42 | -------------------------------------------------------------------------------- /packages/components/base/RxzTip/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzTip from './RxzTip.vue'; 2 | export const RxzTip = _RxzTip; 3 | export * from './RxzTip.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/base/index.ts: -------------------------------------------------------------------------------- 1 | import { RxzButton } from './RxzButton'; 2 | import { RxzIcon } from './RxzIcon'; 3 | import { RxzTip } from './RxzTip'; 4 | import { RxzInput } from './RxzInput'; 5 | import { RxzSelect } from './RxzSelect'; 6 | import { RxzSwitch } from './RxzSwitch'; 7 | import { RxzRadio } from './RxzRadio'; 8 | import { RxzTextarea } from './RxzTextarea'; 9 | import { RxzCheckbox } from './RxzCheckbox'; 10 | import { RxzList } from './RxzList'; 11 | 12 | export * from './RxzButton'; 13 | export * from './RxzIcon'; 14 | export * from './RxzTip'; 15 | export * from './RxzInput'; 16 | export * from './RxzSelect'; 17 | export * from './RxzSwitch'; 18 | export * from './RxzRadio'; 19 | export * from './RxzTextarea'; 20 | export * from './RxzCheckbox'; 21 | export * from './RxzList'; 22 | 23 | // Base组件列表 24 | export const RxzBaseComponents = [ 25 | RxzList, 26 | RxzCheckbox, 27 | RxzTextarea, 28 | RxzRadio, 29 | RxzSwitch, 30 | RxzSelect, 31 | RxzInput, 32 | RxzTip, 33 | RxzIcon, 34 | RxzButton, 35 | ]; 36 | 37 | -------------------------------------------------------------------------------- /packages/components/card/RxzFlipCard/RxzFlipCard.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzFlipCard 3 | * @description: RxzFlipCard 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { defineEmitsUtil, definePropsUtil } from '@/utils'; 8 | 9 | export default { 10 | rxzFlipCardProps: definePropsUtil({ 11 | width: { type: String, default: '100px' }, 12 | height: { type: String, default: '100px' }, 13 | borderRadius: { type: String, default: 'none' }, 14 | isFront: { type: Boolean, default: true }, 15 | }), 16 | rxzFlipCardEmits: defineEmitsUtil({ 17 | 18 | }), 19 | }; 20 | 21 | -------------------------------------------------------------------------------- /packages/components/card/RxzFlipCard/RxzFlipCard.scss: -------------------------------------------------------------------------------- 1 | .rxz-flip-card{ 2 | position: relative; 3 | transition: transform 0.5s; 4 | // 转换方式（3d） 5 | transform-style: preserve-3d; 6 | 7 | &-front,&-back{ 8 | position: absolute; 9 | top: 0px; 10 | left: 0px; 11 | width: 100%; 12 | height: 100%; 13 | // 重点：是否显示被旋转的 div 元素的背面： 14 | backface-visibility: hidden; 15 | } 16 | 17 | &-back{ 18 | // 旋转成背面 19 | transform: rotateY(180deg); 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /packages/components/card/RxzFlipCard/RxzFlipCard.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 28 | 29 | 32 | -------------------------------------------------------------------------------- /packages/components/card/RxzFlipCard/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzFlipCard from './RxzFlipCard.vue'; 2 | export const RxzFlipCard = _RxzFlipCard; 3 | export * from './RxzFlipCard.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/card/index.ts: -------------------------------------------------------------------------------- 1 | import { RxzFlipCard } from './RxzFlipCard'; 2 | 3 | 4 | export * from './RxzFlipCard'; 5 | 6 | // Card组件列表 7 | export const RxzCardComponents = [RxzFlipCard]; 8 | 9 | -------------------------------------------------------------------------------- /packages/components/form/RxzForm/RxzForm.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzForm 3 | * @description: RxzForm 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | import { PropType } from 'vue'; 9 | import { RXZ_FLEX_DIRECTION_ENUM } from '@/components/layout'; 10 | import { RxzFormItemConfig } from '../RxzFormItem/RxzFormItem.define'; 11 | import { RxzLabelWidth } from './useRxzFormLabelWidth'; 12 | 13 | 14 | export interface RxzFormConfig { 15 | [key: string ]: RxzFormItemConfig | RxzFormItemConfig[] | RxzFormConfig | RxzFormConfig[]; 16 | } 17 | 18 | 19 | export default { 20 | rxzFormProps: definePropsUtil({ 21 | // default是auto，但是先继承父亲表单的labelwidth，具体见setup 22 | labelWidth: { type: String as PropType, default: 'auto' }, 23 | // 子表单对应的字段名称 24 | name: { type: [String, Number], default: '' }, 25 | // 子表单formConfig无效 26 | formConfig: { type: Object as PropType, default: () => ({}) }, 27 | // 表单数据，v-model绑定，绑定的值可以覆盖formConfig中初始默认值，子表单modelValue无效 28 | modelValue: { type: Object as PropType, default: () => ({}) }, 29 | direction: { type: String as PropType, default: RXZ_FLEX_DIRECTION_ENUM.vertical }, 30 | }), 31 | rxzFormEmits: defineEmitsUtil({ 32 | 'update:modelValue': null, 33 | }), 34 | }; 35 | 36 | -------------------------------------------------------------------------------- /packages/components/form/RxzForm/RxzForm.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruixiaozi/rxz-ui/01b1aecd98a7622e2c808018806e2a1a0940ce4d/packages/components/form/RxzForm/RxzForm.scss -------------------------------------------------------------------------------- /packages/components/form/RxzForm/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzForm from './RxzForm.vue'; 2 | export const RxzForm = _RxzForm; 3 | export * from './RxzForm.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/form/RxzForm/useRxzFormLabelWidth.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * useRxzFormLabelWidth 3 | * @description: RxzFormLabelWidth 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | 8 | import { computed, ref } from 'vue'; 9 | 10 | export type RxzLabelWidth = string | 'auto' | 'fit-content'; 11 | 12 | export type RxzRegisterLabelWidth = (key: string, width: string) => void 13 | 14 | export function useRxzFormLabelWidth(props: any) { 15 | const allLabelWidth = ref<{ [key: string]: number } >({}); 16 | const labelWidth = computed(() => { 17 | const maxLabelWidth = Math.max(...Object.values(allLabelWidth.value)); 18 | if (props.labelWidth === 'auto') { 19 | if (Number.POSITIVE_INFINITY === maxLabelWidth) { 20 | return 'auto'; 21 | } 22 | return `${maxLabelWidth}px`; 23 | } 24 | return props.labelWidth; 25 | }); 26 | // width只能是px 27 | const registerLabelWidth: RxzRegisterLabelWidth = (key: string, width: string) => { 28 | allLabelWidth.value[key] = parseInt(width, 10); 29 | }; 30 | return { 31 | labelWidth, 32 | registerLabelWidth, 33 | }; 34 | } 35 | -------------------------------------------------------------------------------- /packages/components/form/RxzFormItem/RxzFormItem.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzFormItem 3 | * @description: RxzFormItem 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { RxzValidator, RxzValidatorErrorTips } from '@/use'; 8 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 9 | import { PropType } from 'vue'; 10 | 11 | export interface RxzFormItemConfig { 12 | default?: any; 13 | validators: RxzValidator[]; 14 | } 15 | 16 | export default { 17 | rxzFormItemProps: definePropsUtil({ 18 | errorTip: { type: Object as PropType, default: () => ({}) }, 19 | name: { type: [String, Number], default: '' }, 20 | }), 21 | rxzFormItemEmits: defineEmitsUtil({ 22 | 23 | }), 24 | }; 25 | 26 | -------------------------------------------------------------------------------- /packages/components/form/RxzFormItem/RxzFormItem.scss: -------------------------------------------------------------------------------- 1 | .rxz-form-item { 2 | width: 100%; 3 | padding-right: 16px; 4 | 5 | &-body { 6 | padding-bottom: 16px; 7 | 8 | display: flex; 9 | align-items: flex-start; 10 | 11 | // 只有label和form-text 12 | & > :deep(.rxz-label), 13 | & > :deep(.rxz-form-text) { 14 | padding-top: 6px; 15 | } 16 | 17 | // 只有formValue占具剩余宽度 18 | :deep(.rxz-form-value) { 19 | flex: 1; 20 | } 21 | } 22 | } 23 | 24 | .error-tip { 25 | position: relative; 26 | box-sizing: border-box; 27 | width: 100%; 28 | color: red; 29 | text-align: left; 30 | margin-top: -10px; 31 | padding-left: 5px; 32 | margin-bottom: 5px; 33 | &-icon { 34 | position: relative; 35 | top: 2px; 36 | } 37 | span { 38 | word-wrap: break-word; 39 | word-break: break-all; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/components/form/RxzFormItem/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzFormItem from './RxzFormItem.vue'; 2 | export const RxzFormItem = _RxzFormItem; 3 | export * from './RxzFormItem.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/form/RxzLabel/RxzLabel.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzLabel 3 | * @description: RxzLabel 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | 9 | 10 | export default { 11 | rxzLabelProps: definePropsUtil({ 12 | required: { type: Boolean, default: false }, 13 | showColon: { type: Boolean, default: false }, 14 | 15 | }), 16 | rxzLabelEmits: defineEmitsUtil({ 17 | 18 | }), 19 | }; 20 | 21 | -------------------------------------------------------------------------------- /packages/components/form/RxzLabel/RxzLabel.scss: -------------------------------------------------------------------------------- 1 | .rxz-label { 2 | display: flex; 3 | align-items: center; 4 | justify-content: flex-end; 5 | padding-top: 3px; 6 | 7 | &-asterisk { 8 | display: inline-block; 9 | flex: 0 0 14px; 10 | opacity: 1; 11 | color: red; 12 | } 13 | 14 | &-colon { 15 | display: inline-block; 16 | width: 16px; 17 | flex: 0 0 16px; 18 | opacity: 1; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/components/form/RxzLabel/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzLabel from './RxzLabel.vue'; 2 | export const RxzLabel = _RxzLabel; 3 | export * from './RxzLabel.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/form/index.ts: -------------------------------------------------------------------------------- 1 | import { RxzLabel } from './RxzLabel'; 2 | import { RxzForm } from './RxzForm'; 3 | import { RxzFormItem } from './RxzFormItem'; 4 | 5 | 6 | export * from './RxzLabel'; 7 | export * from './RxzForm'; 8 | export * from './RxzFormItem'; 9 | 10 | // Form组件列表 11 | export const RxzFormComponents = [ 12 | RxzFormItem, 13 | RxzForm, 14 | RxzLabel, 15 | ]; 16 | 17 | -------------------------------------------------------------------------------- /packages/components/index.ts: -------------------------------------------------------------------------------- 1 | import { RxzBaseComponents } from './base'; 2 | import { RxzProcessComponents } from './process'; 3 | import { RxzAdvanceComponents } from './advance'; 4 | import { RxzCardComponents } from './card'; 5 | import { RxzLayoutComponents } from './layout'; 6 | import { RxzNavigationComponents } from './navigation'; 7 | import { RxzFormComponents } from './form'; 8 | import { RxzTableComponents } from './table'; 9 | 10 | export * from './base'; 11 | export * from './process'; 12 | export * from './advance'; 13 | export * from './card'; 14 | export * from './layout'; 15 | export * from './navigation'; 16 | export * from './form'; 17 | export * from './table'; 18 | 19 | // 组件列表 20 | export const RxzComponents = [ 21 | ...RxzTableComponents, 22 | ...RxzFormComponents, 23 | ...RxzNavigationComponents, 24 | ...RxzLayoutComponents, 25 | ...RxzCardComponents, 26 | ...RxzAdvanceComponents, 27 | ...RxzProcessComponents, 28 | ...RxzBaseComponents, 29 | ]; 30 | -------------------------------------------------------------------------------- /packages/components/layout/RxzContainer/RxzContainer.scss: -------------------------------------------------------------------------------- 1 | .rxz-container { 2 | // 默认100% 3 | width: 100%; 4 | height: 100%; 5 | position: relative; 6 | pointer-events: none; 7 | display: grid; 8 | 9 | // 仅容器pointer-events为null，其他的子元素还原 10 | :deep(*) { 11 | pointer-events: auto; 12 | } 13 | 14 | &-content { 15 | position: absolute; 16 | width: fit-content; 17 | 18 | &.topleft { 19 | justify-self: start; 20 | align-self: start; 21 | } 22 | 23 | &.topcenter { 24 | justify-self: center; 25 | align-self: start; 26 | } 27 | 28 | &.topright { 29 | justify-self: end; 30 | align-self: start; 31 | } 32 | 33 | &.centerleft { 34 | justify-self: start; 35 | align-self: center; 36 | } 37 | 38 | &.center { 39 | justify-self: center; 40 | align-self: center; 41 | } 42 | 43 | &.centerright { 44 | justify-self: end; 45 | align-self: center; 46 | } 47 | 48 | &.bottomleft { 49 | justify-self: start; 50 | align-self: end; 51 | } 52 | 53 | &.bottomcenter { 54 | justify-self: center; 55 | align-self: end; 56 | } 57 | 58 | &.bottomright { 59 | justify-self: end; 60 | align-self: end; 61 | } 62 | } 63 | 64 | } 65 | -------------------------------------------------------------------------------- /packages/components/layout/RxzContainer/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzContainer from './RxzContainer.vue'; 2 | export const RxzContainer = _RxzContainer; 3 | export * from './RxzContainer.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/layout/RxzFlex/RxzFlex.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzFlex 3 | * @description: RxzFlex 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { defineEmitsUtil, definePropsUtil } from '@/utils'; 8 | import { PropType } from 'vue'; 9 | 10 | export enum RXZ_FLEX_DIRECTION_ENUM { 11 | vertical='vertical', 12 | horizontal='horizontal', 13 | } 14 | 15 | export enum RXZ_FLEX_JUST_ALIGN_ENUM { 16 | start='flex-start', 17 | end='flex-end', 18 | center='center', 19 | } 20 | 21 | 22 | export default { 23 | rxzFlexProps: definePropsUtil({ 24 | direction: { type: String as PropType, default: RXZ_FLEX_DIRECTION_ENUM.horizontal }, 25 | gutter: { type: String, default: '0px' }, 26 | align: { type: String as PropType, default: RXZ_FLEX_JUST_ALIGN_ENUM.start }, 27 | justify: { type: String as PropType, default: RXZ_FLEX_JUST_ALIGN_ENUM.start }, 28 | }), 29 | rxzFlexEmits: defineEmitsUtil({ 30 | 31 | }), 32 | }; 33 | 34 | -------------------------------------------------------------------------------- /packages/components/layout/RxzFlex/RxzFlex.scss: -------------------------------------------------------------------------------- 1 | .rxz-flex { 2 | display: flex; 3 | justify-content: var(--justify); 4 | align-items: var(--align); 5 | 6 | 7 | 8 | &.vertical { 9 | flex-direction: column; 10 | } 11 | 12 | &.horizontal { 13 | flex-direction: row; 14 | :deep(> *:not(:last-child)) { 15 | margin-right: var(--gutter); 16 | } 17 | } 18 | 19 | 20 | } 21 | -------------------------------------------------------------------------------- /packages/components/layout/RxzFlex/RxzFlex.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /packages/components/layout/RxzFlex/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzFlex from './RxzFlex.vue'; 2 | export const RxzFlex = _RxzFlex; 3 | export * from './RxzFlex.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/layout/index.ts: -------------------------------------------------------------------------------- 1 | import { RxzContainer } from './RxzContainer'; 2 | import { RxzFlex } from './RxzFlex'; 3 | 4 | export * from './RxzContainer'; 5 | export * from './RxzFlex'; 6 | 7 | // Layout组件列表 8 | export const RxzLayoutComponents = [ 9 | RxzFlex, 10 | RxzContainer, 11 | ]; 12 | 13 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzBreadcrumb/RxzBreadcrumb.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzBreadcrumb 3 | * @description: RxzBreadcrumb 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | import { PropType } from 'vue'; 9 | import { Router } from 'vue-router'; 10 | 11 | export interface RxzBreadcrumbItem { 12 | text: string; 13 | path?: string; 14 | } 15 | 16 | export default { 17 | rxzBreadcrumbProps: definePropsUtil({ 18 | breadcrumbs: { type: Array as PropType, default: () => [] }, 19 | // 路由实例，如果不传入，则走a连接跳转 20 | router: { type: Object as PropType, required: false }, 21 | }), 22 | rxzBreadcrumbEmits: defineEmitsUtil({ 23 | 24 | }), 25 | }; 26 | 27 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzBreadcrumb/RxzBreadcrumb.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-breadcrumb { 4 | a { 5 | text-decoration: none; 6 | transition: color .2s; 7 | 8 | @include themeify.themeify { 9 | color: themeify.getTextColor("dark", false); 10 | } 11 | 12 | &.link:hover { 13 | @include themeify.themeify { 14 | color: themeify.getTextColor("default", false); 15 | } 16 | } 17 | 18 | } 19 | 20 | &-split { 21 | margin: 0 8px; 22 | @include themeify.themeify { 23 | color: themeify.getTextColor("dark", false); 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzBreadcrumb/RxzBreadcrumb.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 37 | 38 | 41 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzBreadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzBreadcrumb from './RxzBreadcrumb.vue'; 2 | export const RxzBreadcrumb = _RxzBreadcrumb; 3 | export * from './RxzBreadcrumb.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzMenu/RxzMenu.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-menu { 4 | display: flex; 5 | &.horizontal { 6 | flex-direction: row; 7 | } 8 | 9 | &.vertical { 10 | flex-direction: column; 11 | 12 | width: 100%; 13 | 14 | a.level-0 { 15 | font-weight: bold; 16 | } 17 | 18 | 19 | } 20 | 21 | &-item { 22 | 23 | &-sub { 24 | padding-left: 16px; 25 | box-sizing: border-box; 26 | } 27 | 28 | a { 29 | user-select: none; 30 | display: inline-flex; 31 | padding: 16px; 32 | align-items: center; 33 | transition: color .2s; 34 | cursor: pointer; 35 | text-decoration: none; 36 | width: 100%; 37 | box-sizing: border-box; 38 | 39 | &.level-0 { 40 | font-size: 16px; 41 | } 42 | 43 | @include themeify.themeify { 44 | color: themeify.getTextColor("default", false); 45 | } 46 | 47 | &:hover, &.active { 48 | @include themeify.themeify { 49 | color: themeify.getColor("primary", false); 50 | } 51 | } 52 | 53 | .rxz-menu-item-icon { 54 | margin-right: 8px; 55 | } 56 | 57 | .rxz-menu-item-text { 58 | display: inline-block; 59 | flex: 1; 60 | } 61 | 62 | .rxz-menu-item-arrow { 63 | margin-left: 8px; 64 | } 65 | } 66 | } 67 | 68 | } 69 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzMenu/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzMenu from './RxzMenu.vue'; 2 | export const RxzMenu = _RxzMenu; 3 | export * from './RxzMenu.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzTabs/RxzTabs.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzTabs 3 | * @description: RxzTabs 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | import { PropType } from 'vue'; 9 | 10 | export interface RxzTabsItem { 11 | name: string; 12 | key: string; 13 | } 14 | 15 | export default { 16 | rxzTabsProps: definePropsUtil({ 17 | tabs: { type: Array as PropType, default: () => [] }, 18 | modelValue: { type: Object as PropType }, 19 | }), 20 | rxzTabsEmits: defineEmitsUtil({ 21 | 'update:modelValue': null, 22 | }), 23 | }; 24 | 25 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzTabs/RxzTabs.scss: -------------------------------------------------------------------------------- 1 | .rxz-tabs { 2 | &-tab { 3 | padding: 0px 16px; 4 | border-bottom: solid 1px #000; 5 | 6 | span { 7 | display: inline-block; 8 | position: relative; 9 | bottom: -2px; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | background-color: #fff; 13 | border: solid 1px #000; 14 | 15 | cursor: pointer; 16 | user-select: none; 17 | 18 | &:not(:first-child) { 19 | border-left: none; 20 | } 21 | 22 | &.select { 23 | border-bottom: none; 24 | } 25 | } 26 | } 27 | 28 | &-body { 29 | padding: 8px 4px; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzTabs/RxzTabs.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 32 | 33 | 36 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzTabs/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzTabs from './RxzTabs.vue'; 2 | export const RxzTabs = _RxzTabs; 3 | export * from './RxzTabs.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzTree/RxzTree.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzTree 3 | * @description: RxzTree 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | import { PropType } from 'vue'; 9 | 10 | export type FetchRxzTreeItemsFunction = () => Promise; 11 | 12 | export interface RxzTreeItem { 13 | key: string; 14 | label: string; 15 | isFold?: boolean; 16 | foldIcon?: string; 17 | unfoldIcon?: string; 18 | iconColor?: string; 19 | disabled?: boolean; 20 | children?: RxzTreeItem[]; 21 | // 和fetch绑定，一般不需要传入，由内部设定 22 | loading?: boolean; 23 | // 异步获取子树 24 | fetchChildren?: FetchRxzTreeItemsFunction; 25 | } 26 | 27 | export default { 28 | rxzTreeProps: definePropsUtil({ 29 | modelValue: { type: Array as PropType, required: true }, 30 | hiddenIcon: { type: Boolean, default: false }, 31 | foldIcon: { type: String, default: 'arrow-right' }, 32 | unfoldIcon: { type: String, default: 'arrow-down' }, 33 | iconColor: { type: String, default: '#a8abb2' }, 34 | indent: { type: String, default: '16px' }, 35 | }), 36 | rxzTreeEmits: defineEmitsUtil({ 37 | 'update:modelValue': null, 38 | 'selected': null, 39 | }), 40 | }; 41 | 42 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzTree/RxzTree.scss: -------------------------------------------------------------------------------- 1 | .rxz-tree { 2 | &-item { 3 | &-label { 4 | width: fit-content; 5 | min-width: 100%; 6 | display: flex; 7 | flex-direction: row; 8 | align-items: center; 9 | padding: 4px; 10 | cursor: pointer; 11 | 12 | &.disabled { 13 | cursor: not-allowed; 14 | * { 15 | color: #d4d4d4 !important; 16 | } 17 | } 18 | 19 | &-content { 20 | flex-shrink: 0; 21 | margin: 0px 4px; 22 | user-select: none; 23 | white-space: nowrap; 24 | } 25 | 26 | &:hover, &.selected { 27 | background-color: #f3f3f3; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/components/navigation/RxzTree/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzTree from './RxzTree.vue'; 2 | export const RxzTree = _RxzTree; 3 | export * from './RxzTree.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/navigation/index.ts: -------------------------------------------------------------------------------- 1 | import { RxzBreadcrumb } from './RxzBreadcrumb'; 2 | import { RxzMenu } from './RxzMenu'; 3 | import { RxzTabs } from './RxzTabs'; 4 | import { RxzTree } from './RxzTree'; 5 | 6 | 7 | export * from './RxzBreadcrumb'; 8 | export * from './RxzMenu'; 9 | export * from './RxzTabs'; 10 | export * from './RxzTree'; 11 | 12 | // Navigation组件列表 13 | export const RxzNavigationComponents = [ 14 | RxzTree, 15 | RxzTabs, 16 | RxzMenu, 17 | RxzBreadcrumb, 18 | ]; 19 | 20 | -------------------------------------------------------------------------------- /packages/components/process/RxzWaveProcess/RxzWaveProcess.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzWaveProcess 3 | * @description: RxzWaveProcess 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { defineEmitsUtil, definePropsUtil } from '@/utils'; 8 | 9 | export default { 10 | rxzWaveProcessProps: definePropsUtil({ 11 | process: { type: Number, default: 0 }, 12 | width: { type: String, default: '100px' }, 13 | height: { type: String, default: '100px' }, 14 | border: { type: String, default: 'solid 1px #07c2b7' }, 15 | borderRadius: { type: String, default: '50px' }, 16 | waterColor: { type: String, default: '#07c2b7' }, 17 | emptyColor: { type: String, default: '#ffffff' }, 18 | infoCss: { 19 | type: Object, 20 | default: () => ({ 21 | 'color': '#000', 22 | 'font-size': '16px', 23 | 'font-weight': 'bold', 24 | }), 25 | }, 26 | }), 27 | rxzWaveProcessEmits: defineEmitsUtil({ 28 | 29 | }), 30 | }; 31 | 32 | -------------------------------------------------------------------------------- /packages/components/process/RxzWaveProcess/RxzWaveProcess.scss: -------------------------------------------------------------------------------- 1 | @keyframes wave { 2 | 50% { 3 | transform: translate(-50%, -101%) rotate(500deg); 4 | } 5 | 100% { 6 | transform: translate(-50%, -101%) rotate(1000deg); 7 | } 8 | } 9 | 10 | .rxz-wave-process { 11 | overflow: hidden; 12 | position: relative; 13 | 14 | &-water { 15 | position: relative; 16 | width: 100%; 17 | height: 100%; 18 | } 19 | 20 | &-wave { 21 | position: absolute; 22 | width: 200%; 23 | height: 200%; 24 | top: 0; 25 | left: 50%; 26 | border-radius: 40%; 27 | transform: translate(-50%, -101%) rotate(0); 28 | animation: wave 20s linear infinite; 29 | z-index: 20; 30 | } 31 | 32 | &-info { 33 | position: absolute; 34 | width: 100%; 35 | height: 100%; 36 | top: 0; 37 | left: 0; 38 | z-index: 100; 39 | display: flex; 40 | flex-direction: column; 41 | justify-content: center; 42 | align-items: center; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/components/process/RxzWaveProcess/RxzWaveProcess.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 46 | 47 | 50 | -------------------------------------------------------------------------------- /packages/components/process/RxzWaveProcess/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzWaveProcess from './RxzWaveProcess.vue'; 2 | export const RxzWaveProcess = _RxzWaveProcess; 3 | export * from './RxzWaveProcess.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/process/index.ts: -------------------------------------------------------------------------------- 1 | import { RxzWaveProcess } from './RxzWaveProcess'; 2 | 3 | 4 | export * from './RxzWaveProcess'; 5 | 6 | // Process组件列表 7 | export const RxzProcessComponents = [RxzWaveProcess]; 8 | 9 | -------------------------------------------------------------------------------- /packages/components/table/RxzTable/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzTable from './RxzTable.vue'; 2 | export const RxzTable = _RxzTable; 3 | export * from './RxzTable.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/table/RxzTableCellRender/RxzTableCellRender.scss: -------------------------------------------------------------------------------- 1 | .rxz-table-cell-form-item { 2 | display: grid; 3 | grid-template-columns: auto 1fr; 4 | grid-column-gap: 4px; 5 | align-items: start; 6 | 7 | &-required { 8 | color: red; 9 | height: 100%; 10 | margin-top: 8px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/table/RxzTableCellRender/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzTableCellRender from './RxzTableCellRender.vue'; 2 | export const RxzTableCellRender = _RxzTableCellRender; 3 | export * from './RxzTableCellRender.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/table/index.ts: -------------------------------------------------------------------------------- 1 | import { RxzTable } from './RxzTable'; 2 | import { RxzTableCellRender } from './RxzTableCellRender'; 3 | 4 | 5 | export * from './RxzTable'; 6 | export * from './RxzTableCellRender'; 7 | 8 | // Table组件列表 9 | export const RxzTableComponents = [ 10 | RxzTableCellRender, 11 | RxzTable, 12 | ]; 13 | 14 | -------------------------------------------------------------------------------- /packages/components/template/RxzBadgeTpl/RxzBadgeTpl.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzBadgeTpl 3 | * @description: RxzBadgeTpl 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | 9 | export default { 10 | rxzBadgeTplProps: definePropsUtil({ 11 | value: { type: [String, Number], required: true }, 12 | maxNum: { type: Number, default: 99 }, 13 | minNum: { type: Number, default: -99 }, 14 | zIndex: { type: Number }, 15 | top: { type: Number, default: 0 }, 16 | left: { type: Number, default: 0 }, 17 | }), 18 | rxzBadgeTplEmits: defineEmitsUtil({ 19 | 20 | }), 21 | }; 22 | 23 | -------------------------------------------------------------------------------- /packages/components/template/RxzBadgeTpl/RxzBadgeTpl.scss: -------------------------------------------------------------------------------- 1 | .rxz-badge { 2 | position: absolute; 3 | display: inline-flex; 4 | box-sizing: border-box; 5 | justify-content: center; 6 | align-items: center; 7 | background-color: #ff0000; 8 | font-size: 12px; 9 | line-height: 0; 10 | height: 18px; 11 | min-width: 18px; 12 | border-radius: 18px; 13 | padding: 0 6px; 14 | color: #ffffff; 15 | transform: translate(-9px, -50%); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components/template/RxzBadgeTpl/RxzBadgeTpl.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /packages/components/template/RxzBadgeTpl/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzBadgeTpl from './RxzBadgeTpl.vue'; 2 | export const RxzBadgeTpl = _RxzBadgeTpl; 3 | export * from './RxzBadgeTpl.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/template/RxzDialogTpl/RxzDialogTpl.define.ts: -------------------------------------------------------------------------------- 1 | import { PropType } from 'vue'; 2 | 3 | /** 4 | * RxzDialogTpl 5 | * @description: RxzDialogTpl 6 | * @author: ruixiaozi 7 | * @since: 2.0.0 8 | */ 9 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 10 | 11 | export type RxzDialogTransition = 'opacity' | 'bounce' | 'move'; 12 | 13 | export default { 14 | rxzDialogTplProps: definePropsUtil({ 15 | zIndex: { type: Number, default: 3000 }, 16 | width: { type: String, default: '400px' }, 17 | closable: { type: Boolean, default: true }, 18 | allowOuterClose: { type: Boolean, default: true }, 19 | transition: { type: String as PropType, default: 'bounce' }, 20 | allowDrag: { type: Boolean, default: false }, 21 | drawer: { type: Boolean, default: false }, 22 | }), 23 | rxzDialogTplEmits: defineEmitsUtil({ 24 | 'close': null, 25 | 'destory': null, 26 | }), 27 | }; 28 | 29 | -------------------------------------------------------------------------------- /packages/components/template/RxzDialogTpl/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzDialogTpl from './RxzDialogTpl.vue'; 2 | export const RxzDialogTpl = _RxzDialogTpl; 3 | export * from './RxzDialogTpl.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/template/RxzIframeObserveTpl/RxzIframeObserveTpl.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzIframeObserveTpl 3 | * @description: RxzIframeObserveTpl 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { defineEmitsUtil, definePropsUtil } from '@/utils'; 8 | 9 | export default { 10 | rxzIframeObserveTplProps: definePropsUtil({ 11 | 12 | }), 13 | rxzIframeObserveTplEmits: defineEmitsUtil({ 14 | resize: null, 15 | }), 16 | }; 17 | 18 | -------------------------------------------------------------------------------- /packages/components/template/RxzIframeObserveTpl/RxzIframeObserveTpl.scss: -------------------------------------------------------------------------------- 1 | .rxz-iframe-observe { 2 | width: 100%; 3 | height: 100%; 4 | left: 0; 5 | top: 0; 6 | position: absolute; 7 | opacity: 0; 8 | z-index: -1; 9 | border: 0; 10 | margin: 0; 11 | padding: 0; 12 | pointer-events: none !important; 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/template/RxzIframeObserveTpl/RxzIframeObserveTpl.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /packages/components/template/RxzIframeObserveTpl/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzIframeObserveTpl from './RxzIframeObserveTpl.vue'; 2 | export const RxzIframeObserveTpl = _RxzIframeObserveTpl; 3 | export * from './RxzIframeObserveTpl.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/template/RxzLoadingTpl/RxzLoadingTpl.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzLoadingTpl 3 | * @description: RxzLoadingTpl 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { defineEmitsUtil, definePropsUtil } from '@/utils'; 8 | 9 | export default { 10 | rxzLoadingTplProps: definePropsUtil({ 11 | text: { 12 | type: String, 13 | default: '', 14 | }, 15 | bgColor: { 16 | type: String, 17 | default: '#00000032', 18 | }, 19 | color: { 20 | type: String, 21 | default: '#ffffff', 22 | }, 23 | zIndex: { 24 | type: Number, 25 | }, 26 | isGlobal: { 27 | type: Boolean, 28 | default: true, 29 | }, 30 | }), 31 | rxzLoadingTplEmits: defineEmitsUtil({ 32 | 33 | }), 34 | }; 35 | -------------------------------------------------------------------------------- /packages/components/template/RxzLoadingTpl/RxzLoadingTpl.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /packages/components/template/RxzLoadingTpl/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzLoadingTpl from './RxzLoadingTpl.vue'; 2 | export const RxzLoadingTpl = _RxzLoadingTpl; 3 | export * from './RxzLoadingTpl.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/template/RxzPopoverTpl/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzPopoverTpl from './RxzPopoverTpl.vue'; 2 | export const RxzPopoverTpl = _RxzPopoverTpl; 3 | export * from './RxzPopoverTpl.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/template/RxzPopupTpl/RxzPopupTpl.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruixiaozi/rxz-ui/01b1aecd98a7622e2c808018806e2a1a0940ce4d/packages/components/template/RxzPopupTpl/RxzPopupTpl.scss -------------------------------------------------------------------------------- /packages/components/template/RxzPopupTpl/RxzPopupTpl.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /packages/components/template/RxzPopupTpl/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzPopupTpl from './RxzPopupTpl.vue'; 2 | export const RxzPopupTpl = _RxzPopupTpl; 3 | 4 | -------------------------------------------------------------------------------- /packages/components/template/RxzSelectListTpl/RxzSelectListTpl.define.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * RxzSelectListTpl 3 | * @description: RxzSelectListTpl 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { definePropsUtil, defineEmitsUtil } from '@/utils'; 8 | import { PropType } from 'vue'; 9 | 10 | export interface RxzSelectOption { 11 | label: string; 12 | value: any; 13 | key: string | number; 14 | onClick?: (...args: any[]) => any; 15 | } 16 | 17 | export default { 18 | rxzSelectListTplProps: definePropsUtil({ 19 | options: { type: Array as PropType, default: () => [] }, 20 | modelValue: { type: Object as PropType }, 21 | }), 22 | rxzSelectListTplEmits: defineEmitsUtil({ 23 | 'update:modelValue': null, 24 | }), 25 | }; 26 | 27 | -------------------------------------------------------------------------------- /packages/components/template/RxzSelectListTpl/RxzSelectListTpl.scss: -------------------------------------------------------------------------------- 1 | @use "~@/themes/themeify"; 2 | 3 | .rxz-select-list { 4 | box-sizing: border-box; 5 | 6 | &-option { 7 | padding: 8px; 8 | cursor: pointer; 9 | &:not(:last-child) { 10 | border-bottom: 1px solid transparent; 11 | @include themeify.themeify { 12 | border-color: themeify.getBorderColor("default", false); 13 | } 14 | } 15 | 16 | &:hover { 17 | @include themeify.theme_color("primary", true); 18 | } 19 | 20 | &.selected { 21 | @include themeify.theme_color("primary", true); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/components/template/RxzSelectListTpl/RxzSelectListTpl.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /packages/components/template/RxzSelectListTpl/index.ts: -------------------------------------------------------------------------------- 1 | import _RxzSelectListTpl from './RxzSelectListTpl.vue'; 2 | export const RxzSelectListTpl = _RxzSelectListTpl; 3 | export * from './RxzSelectListTpl.define'; 4 | 5 | -------------------------------------------------------------------------------- /packages/components/template/index.ts: -------------------------------------------------------------------------------- 1 | export * from './RxzLoadingTpl'; 2 | export * from './RxzIframeObserveTpl'; 3 | export * from './RxzPopoverTpl'; 4 | export * from './RxzSelectListTpl'; 5 | export * from './RxzBadgeTpl'; 6 | export * from './RxzDialogTpl'; 7 | export * from './RxzPopupTpl'; 8 | -------------------------------------------------------------------------------- /packages/directives/index.ts: -------------------------------------------------------------------------------- 1 | import { vRxzResizeObserve } from './vRxzResizeObserve'; 2 | import { vRxzOverflow } from './vRxzOverflow'; 3 | import { vRxzTooltip } from './vRxzTooltip'; 4 | import { vRxzLoading } from './vRxzLoading'; 5 | import { vRxzBadge } from './vRxzBadge'; 6 | import { vRxzTheme } from './vRxzTheme'; 7 | 8 | export * from './vRxzResizeObserve'; 9 | export * from './vRxzOverflow'; 10 | export * from './vRxzTooltip'; 11 | export * from './vRxzLoading'; 12 | export * from './vRxzBadge'; 13 | export * from './vRxzTheme'; 14 | 15 | export const RxzDirectives = { 16 | vRxzTheme, 17 | vRxzBadge, 18 | vRxzLoading, 19 | vRxzTooltip, 20 | vRxzOverflow, 21 | vRxzResizeObserve, 22 | }; 23 | -------------------------------------------------------------------------------- /packages/directives/vRxzOverflow.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * vRxzOverflow 3 | * @description: RxzOverflow 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { DirectiveBinding, ObjectDirective, VNode } from 'vue'; 8 | import { vRxzTooltip } from './vRxzTooltip'; 9 | 10 | function resolveEl(el: HTMLElement, binding: DirectiveBinding, sourceVnode: VNode) { 11 | // 当value为true时，应该显示宿主元素的内容 12 | if (binding.value === true) { 13 | binding.value = void 0; 14 | } 15 | 16 | if (binding.value === void 0 || binding.value) { 17 | el.style.overflowX = 'hidden'; 18 | el.style.whiteSpace = 'nowrap'; 19 | el.style.verticalAlign = 'bottom'; 20 | el.style.textOverflow = 'ellipsis'; 21 | // 如果出现溢出，则创建或者更新tooltip 22 | if (el.clientWidth < el.scrollWidth) { 23 | vRxzTooltip.updated?.(el, binding, sourceVnode as any, null as any); 24 | } else { 25 | // 没有的话，需要销毁掉 26 | vRxzTooltip.beforeUnmount?.(el, binding, sourceVnode as any, null); 27 | } 28 | } 29 | } 30 | 31 | export const vRxzOverflow: ObjectDirective = { 32 | mounted(el, binding, sourceVnode) { 33 | resolveEl(el, binding, sourceVnode); 34 | }, 35 | updated(el, binding, sourceVnode) { 36 | resolveEl(el, binding, sourceVnode); 37 | }, 38 | beforeUnmount(el, binding, sourceVnode) { 39 | vRxzTooltip.beforeUnmount?.(el, binding, sourceVnode as any, null); 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /packages/directives/vRxzResizeObserve.ts: -------------------------------------------------------------------------------- 1 | import { h, ObjectDirective, render } from 'vue'; 2 | import { useRxzSSR } from '@/use'; 3 | import { RxzIframeObserveTpl } from '@/components/template'; 4 | import { isFunction } from 'lodash'; 5 | 6 | export type RxzResizeObserveCallBack = (event: Event) => void; 7 | 8 | const { isSSR } = useRxzSSR(); 9 | 10 | export const vRxzResizeObserve: ObjectDirective = { 11 | mounted(el, binding) { 12 | if (isSSR.value) { 13 | return; 14 | } 15 | const div = document.createElement('div'); 16 | render(h(RxzIframeObserveTpl as any, { 17 | onResize(event: Event) { 18 | if (isFunction(binding.value)) { 19 | binding.value(event); 20 | } 21 | }, 22 | }), div); 23 | if (div.firstElementChild) { 24 | el.appendChild(div.firstElementChild); 25 | } 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /packages/directives/vRxzTheme.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * vRxzTheme 3 | * @description: RxzTheme 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { DirectiveBinding, ObjectDirective } from 'vue'; 8 | 9 | function resolveEl(el: HTMLElement, binding: DirectiveBinding) { 10 | el.dataset.theme = binding.value || 'default'; 11 | } 12 | 13 | export const vRxzTheme: ObjectDirective = { 14 | mounted(el, binding) { 15 | resolveEl(el, binding); 16 | }, 17 | updated(el, binding) { 18 | resolveEl(el, binding); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /packages/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "validator_required": "The input cannot be null.", 3 | "validator_regexp": "The input is invalid.", 4 | "validator_max": "The input value cannot exceed {0}.", 5 | "validator_min": "The input value cannot be less than {0}.", 6 | "validator_range": "The input values are {0}-{1}.", 7 | "validator_max_length": "The value contains a maximum of {0} characters.", 8 | "validator_min_length": "The input length cannot be less than {0} characters.", 9 | "validator_range_length": "The value contains {0}-{1} characters.", 10 | "messagebox_success": "Success", 11 | "messagebox_information": "Information", 12 | "messagebox_warning": "Warning", 13 | "messagebox_error": "Error", 14 | "button_confirm": "Confirm", 15 | "button_cancel": "Cancel", 16 | "rxz_pagination_total": "Total: {0} items", 17 | "button_more": "More", 18 | "rxz_colon": ":" 19 | } 20 | -------------------------------------------------------------------------------- /packages/i18n/zh.json: -------------------------------------------------------------------------------- 1 | { 2 | "validator_required": "输入不能为空。", 3 | "validator_regexp": "输入不符合要求。", 4 | "validator_max": "输入值不能超过{0}。", 5 | "validator_min": "输入值不能小于{0}。", 6 | "validator_range": "输入值为{0}-{1}。", 7 | "validator_max_length": "输入长度不能超过{0}个字符。", 8 | "validator_min_length": "输入长度不能少于{0}个字符。", 9 | "validator_range_length": "输入长度为{0}-{1}个字符。", 10 | "messagebox_success": "成功", 11 | "messagebox_information": "通知", 12 | "messagebox_warning": "警告", 13 | "messagebox_error": "错误", 14 | "button_confirm": "确认", 15 | "button_cancel": "取消", 16 | "rxz_pagination_total": "总共：{0} 条", 17 | "button_more": "更多", 18 | "rxz_colon": "：" 19 | } 20 | -------------------------------------------------------------------------------- /packages/icons/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/icons/arrow-down-solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/arrow-up-solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/asterisk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/capslock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/icons/checkbox-empty.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/checkbox-fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/clear.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/icons/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/exclamation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/icons/index.ts: -------------------------------------------------------------------------------- 1 | import { useRxzSSR } from '@/use'; 2 | 3 | // 注册在初始化时引入所有icons 4 | useRxzSSR().registeClientInitNoSSR(() => { 5 | // 引入所有图标，被loader转换后，需要用到dom操作 6 | const request = require.context('./', false, /\.svg$/u); 7 | request.keys().forEach(request); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/icons/information.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/icons/loading.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/icons/radio-empty.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/radio-fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/icons/refresh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/icons/subtract.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/icons/success.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/icons/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Created with Pixso. 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/properties/$dataMap.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * $dataMap 3 | * @description: dataMap 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | 8 | import { useRxzDataMap } from '@/use/useRxzDataMap'; 9 | 10 | export const $dataMap = useRxzDataMap().getDataMapLabel; 11 | -------------------------------------------------------------------------------- /packages/properties/$i18n.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * $i18n 3 | * @description: i18n 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { useRxzI18n } from '@/use/useRxzI18n'; 8 | 9 | export const $i18n = useRxzI18n().i18n; 10 | -------------------------------------------------------------------------------- /packages/properties/index.ts: -------------------------------------------------------------------------------- 1 | import { $i18n } from './$i18n'; 2 | import { $dataMap } from './$dataMap'; 3 | 4 | export * from './$i18n'; 5 | export * from './$dataMap'; 6 | 7 | export const RxzProperties = { 8 | $i18n, 9 | $dataMap, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/style/global.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | .rxz-popup-wrap { 6 | 7 | } 8 | .rxz-popup-container { 9 | 10 | } 11 | 12 | body { 13 | font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\5fae\8f6f\96c5\9ed1,Arial,sans-serif; 14 | } 15 | 16 | 17 | *::-webkit-scrollbar { 18 | width: 4px; 19 | height: 4px; 20 | } 21 | 22 | ::-webkit-scrollbar-track-piece { 23 | background-color: rgba(0, 0, 0, 0.02); 24 | border-radius: 4px; 25 | } 26 | 27 | ::-webkit-scrollbar-thumb { 28 | border-radius: 4px; 29 | background-color: rgba(0, 0, 0, 0.05); 30 | } 31 | ::-webkit-scrollbar-thumb:hover { 32 | background-color: rgba(0, 0, 0, 0.1); 33 | } 34 | 35 | ::-webkit-scrollbar-button { 36 | display: none; 37 | } 38 | 39 | ::-webkit-scrollbar-corner { 40 | display: none; 41 | } 42 | -------------------------------------------------------------------------------- /packages/themes/_themeify.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 主题化 3 | **/ 4 | @import "./themeifies/mixin"; 5 | @import "./themeifies/getter"; 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /packages/themes/_themes.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 主题列表 3 | */ 4 | $themes:( 5 | // 默认主题 6 | default:( 7 | color:( 8 | default:#FFFFFF, 9 | primary:#1483f1, 10 | success:#67c23a, 11 | information:#8e8e8f, 12 | disabled: #dedede, 13 | warning:#f1c130, 14 | error: #e40404, 15 | trans: #fafafc, 16 | ), 17 | text_color:( 18 | default:#000000, 19 | light: #d4d3d3, 20 | dark: #b3b2b2, 21 | darker: #868e9e, 22 | brightest: #f3f1f1, 23 | darkest: #000000, 24 | ), 25 | border_color:( 26 | default: #d4d3d3, 27 | light: #fafafc, 28 | focus: #1483f1, 29 | ), 30 | ), 31 | // Red主题 32 | th-red:( 33 | color:( 34 | default:#FFFFFF, 35 | primary:#e40404, 36 | success:#e40404, 37 | information:#e40404, 38 | disabled: #f3f4f5, 39 | warning:#e40404, 40 | error: #e40404, 41 | trans: #e2e2e2, 42 | ), 43 | text_color:( 44 | default:#000000, 45 | light: #d4d3d3, 46 | dark: #b3b2b2, 47 | darker: #868e9e, 48 | brightest: #e9e9e9, 49 | darkest: #000000, 50 | ), 51 | border_color:( 52 | default: #767677, 53 | focus: #e40404, 54 | ), 55 | ) 56 | 57 | ); 58 | -------------------------------------------------------------------------------- /packages/themes/themeifies/_func.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 通用方法 3 | */ 4 | 5 | 6 | @use "sass:color"; 7 | 8 | 9 | 10 | // 颜色渐变过度（亮色变深，浅色变亮） 11 | @function transitionColor($color){ 12 | $lighteness: color.lightness($color); 13 | // @debug $lighteness; 14 | @if $lighteness >= 50% { 15 | @return color.scale($color, $lightness: -10%); 16 | } 17 | @else{ 18 | @return color.scale($color, $lightness: 10%); 19 | } 20 | } 21 | 22 | // 颜色反转 23 | @function reverseColor($color){ 24 | @return color.complement($color); 25 | } 26 | -------------------------------------------------------------------------------- /packages/use/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useRxzSSR'; 2 | export * from './useRxzI18n'; 3 | export * from './useRxzPopup'; 4 | export * from './useRxzDataMap'; 5 | export * from './useRxzFocus'; 6 | export * from './useRxzLoading'; 7 | export * from './useRxzPopover'; 8 | export * from './useRxzAlert'; 9 | export * from './useRxzBindingWithinSetup'; 10 | export * from './useRxzValidator'; 11 | export * from './useRxzModal'; 12 | export * from './useRxzMessageBox'; 13 | export * from './useRxzRelativeValidatorWithinSetup'; 14 | -------------------------------------------------------------------------------- /packages/use/useRxzFocus.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * useRxzFocus 3 | * @description: RxzFocus 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | 8 | let tabIndex = 1; 9 | 10 | /** 11 | * 获取下一个tabindex 12 | * @returns number 13 | */ 14 | function tabIndexNext() { 15 | return tabIndex++; 16 | } 17 | 18 | export function useRxzFocus() { 19 | return { 20 | tabIndexNext, 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /packages/use/useRxzSSR.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * useRxzSSR 3 | * @description: RxzSSR 4 | * @author: ruixiaozi 5 | * @since: 2.0.0 6 | */ 7 | import { App, ref } from 'vue'; 8 | 9 | // 当前环境是否为SSR 10 | const isSSR = ref(false); 11 | 12 | const cbksWithoutSSR: ((app?: App) => void)[] = []; 13 | 14 | /** 15 | * 注册在客户端初始化时执行的方法，非SSR模式下 16 | * 需要在app.use之前注册 17 | * @param cbk 回调方法 18 | */ 19 | function registeClientInitNoSSR(cbk: (app?: App) => void) { 20 | cbksWithoutSSR.push(cbk); 21 | } 22 | 23 | /** 24 | * 运行已经注册在客户端初始化时执行的方法 25 | * app.use组件库时执行 26 | */ 27 | function runClientInitNoSSR(app: App) { 28 | if (!isSSR.value) { 29 | cbksWithoutSSR.forEach((item) => { 30 | item(app); 31 | }); 32 | } 33 | } 34 | 35 | export function useRxzSSR() { 36 | return { 37 | isSSR, 38 | registeClientInitNoSSR, 39 | runClientInitNoSSR, 40 | }; 41 | } 42 | -------------------------------------------------------------------------------- /packages/utils/define.ts: -------------------------------------------------------------------------------- 1 | import { ComponentObjectPropsOptions, EmitsOptions } from 'vue'; 2 | 3 | export function definePropsUtil(prop: PP) { 4 | return prop; 5 | } 6 | 7 | export function defineEmitsUtil(emits: T) { 8 | return emits; 9 | } 10 | -------------------------------------------------------------------------------- /packages/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './define'; 2 | export * from './common'; 3 | export * from './popover'; 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruixiaozi/rxz-ui/01b1aecd98a7622e2c808018806e2a1a0940ce4d/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /script/GenerateIcon.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | 4 | const iconFiles = fs.readdirSync(path.resolve(__dirname, '../packages/icons')); 5 | const json = JSON.stringify(iconFiles.map((item) => item.split('.').shift()), undefined, 2); 6 | fs.writeFileSync(path.join(__dirname, '../docs/.vuepress/components/icon/rxz-icon.json'), json); 7 | console.log('write rxz-icon.json done!'); 8 | -------------------------------------------------------------------------------- /shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | declare module '*.vue' { 3 | import type { DefineComponent } from 'vue'; 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /tests/unit/example.spec.ts: -------------------------------------------------------------------------------- 1 | /* import { shallowMount } from '@vue/test-utils'; 2 | import HelloWorld from '@/components/HellowWord/HelloWorld.vue'; 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('renders props.msg when passed', () => { 6 | const msg = 'new message'; 7 | const wrapper = shallowMount(HelloWorld, { 8 | props: { msg }, 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | */ 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "moduleResolution": "node", 8 | "skipLibCheck": true, 9 | "esModuleInterop": true, 10 | "allowSyntheticDefaultImports": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "useDefineForClassFields": true, 13 | "sourceMap": true, 14 | "declaration": true, 15 | "outDir": "lib", 16 | "baseUrl": ".", 17 | "resolveJsonModule": true, 18 | "types": [ 19 | "webpack-env", 20 | "jest" 21 | ], 22 | "paths": { 23 | "@/*": [ 24 | "packages/*" 25 | ] 26 | }, 27 | "lib": [ 28 | "esnext", 29 | "dom", 30 | "dom.iterable", 31 | "scripthost" 32 | ] 33 | }, 34 | "include": [ 35 | "packages/**/*.ts", 36 | "packages/**/*.tsx", 37 | "packages/**/*.vue", 38 | "docs/.vuepress/**/*.vue", 39 | "docs/.vuepress/**/*.ts", 40 | "tests/**/*.ts", 41 | "tests/**/*.tsx", 42 | "./components.d.ts", 43 | "./shims-vue.d.ts" 44 | ], 45 | "exclude": [ 46 | "node_modules" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const webpackConfig = require('./webpack.config'); 2 | const { defineConfig } = require('@vue/cli-service') 3 | module.exports = defineConfig({ 4 | chainWebpack: webpackConfig.chainWebpack, 5 | }) 6 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | chainWebpack: (config) => { 5 | // 新增一个 @ 指向 packages 目录, 方便示例代码中使用 6 | config.resolve.alias.set('@', path.resolve('packages')); 7 | const iconsDir = path.resolve('packages/icons'); 8 | // 内置的svg处理排除指定目录下的文件 9 | config.module.rule('svg').exclude.add(iconsDir).end(); 10 | config.module 11 | .rule('svg-sprite-loader') 12 | .test(/\.svg$/u) 13 | .include.add(iconsDir) 14 | .end() 15 | .use('svg-sprite-loader') 16 | .loader('svg-sprite-loader') 17 | .options({ 18 | symbolId: '[name]', 19 | }) 20 | .end() 21 | .before('svg-sprite-loader') 22 | .use('svgo-loader') 23 | .loader('svgo-loader') 24 | .options({ 25 | plugins: [ 26 | { 27 | name: 'removeAttrs', 28 | params: { attrs: ['fill', 'stroke'] }, 29 | }, 30 | 'removeDesc', 31 | 'removeDoctype', 32 | 'cleanupAttrs', 33 | 'removeComments', 34 | 'removeXMLProcInst', 35 | 'removeUselessDefs', 36 | 'removeEmptyContainers', 37 | ], 38 | }) 39 | .end(); 40 | 41 | return { 42 | devtool: 'cheap-module-source-map', 43 | }; 44 | }, 45 | }; 46 | --------------------------------------------------------------------------------