From fc039a6f302372b571663dcf3ed2c7d212848af9 Mon Sep 17 00:00:00 2001 From: NelsonEAX Date: Fri, 28 Jun 2019 06:49:49 +0500 Subject: [PATCH] release v0.0.1-alpha: AppWidget.vue, vuetify components --- README.md | 368 +++++++++--------- src/locale/en.js | 11 +- src/locale/ru.js | 11 +- src/router/modules/vuetify.js | 2 +- src/views/components/Dashboard/index.vue | 28 +- src/views/components/I18n.vue | 13 +- src/views/components/Theme.vue | 13 +- src/views/components/Vuetify/Alert.vue | 20 +- src/views/components/Vuetify/Avatar.vue | 16 +- src/views/components/Vuetify/Badge.vue | 16 +- src/views/components/Vuetify/Buttons.vue | 48 +-- src/views/components/Vuetify/Carousels.vue | 12 +- src/views/components/Vuetify/Chip.vue | 28 +- src/views/components/Vuetify/Datepicker.vue | 24 +- src/views/components/Vuetify/Dialogs.vue | 16 +- src/views/components/Vuetify/Pagination.vue | 22 +- src/views/components/Vuetify/Parallax.vue | 16 +- src/views/components/Vuetify/Progress.vue | 87 +++-- src/views/components/Vuetify/Slider.vue | 8 +- src/views/components/Vuetify/Snackbar.vue | 8 +- src/views/components/Vuetify/Tables.vue | 4 +- src/views/components/Vuetify/Timepicker.vue | 18 +- src/views/components/Vuetify/Tooltip.vue | 16 +- src/views/components/Vuetify/Typography.vue | 135 +++---- .../components/AppWidget.vue} | 2 +- 25 files changed, 472 insertions(+), 470 deletions(-) rename src/views/{components/Dashboard/DWidget.vue => layout/components/AppWidget.vue} (97%) diff --git a/README.md b/README.md index d5ef630..b72294d 100644 --- a/README.md +++ b/README.md @@ -1,184 +1,184 @@ -# vue-vuetify-admin - -

- -

- -

- - vue - - - element-ui - - - Build Status - - - license - - - GitHub release - - - Telegram - -

- -## Introduction - -[vue-vuetify-admin](https://nelsoneax.github.io/vue-vuetify-admin/) is a production-ready front-end solution -for admin interfaces. It based on [vue](https://github.com/vuejs/vue) and use the -material design component framework [vuetify](https://github.com/vuetifyjs/vuetify). - -It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, -typical templates for enterprise applications, lots of awesome features. It helps you build a -large complex Single-Page Applications. I believe whatever your needs are, this project will help you. - -- [Preview](https://NelsonEAX.github.io/vue-vuetify-admin) - -**The current version is `v0.0.1-alpha` build on `vue-cli`. If you find a problem, please put -[issue](https://github.com/NelsonEAX/vue-vuetify-admin/issues/new).** - -**This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.** - -## Preparation - -You need to install [node](https://nodejs.org/) and [git](https://git-scm.com/) locally. -The project is based on [ES2015+](https://es6.ruanyifeng.com/), -[vue](https://cn.vuejs.org/index.html), -[vuex](https://vuex.vuejs.org/zh-cn/), -[vue-router](https://router.vuejs.org/zh-cn/), -[vue-cli](https://github.com/vuejs/vue-cli) , -[axios](https://github.com/axios/axios) and -[vuetify](https://github.com/vuetifyjs/vuetify), -all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock). -Understanding and learning this knowledge in advance will greatly help the use of this project. - -

- -

- -## Features - -``` -- Login / Logout - -- Permission Authentication - - Page permission [expected] - - Directive permission [expected] - - Permission configuration page [expected] - - Two-step login - -- Multi-environment build - - dev sit stage prod [expected] - -- Global Features - - I18n - - Multiple dynamic themes [expected] - - Dynamic sidebar (supports multi-level routing) - - Dynamic breadcrumb - - Tags-view (Tab page Support right-click operation) [expected] - - Svg Sprite [expected] - - Mock data - - Screenfull - - Responsive Sidebar - -- Editor - - Rich Text Editor [expected] - - Markdown Editor [expected] - - JSON Editor [expected] - -- Excel - - Export Excel [expected] - - Upload Excel [expected] - - Visualization Excel [expected] - - Export zip [expected] - -- Table - - Dynamic Table [expected] - - Drag And Drop Table [expected] - - Inline Edit Table [expected] - -- Error Page - - 301 - - 401 - - 403 - - 404 - - 500 - -- Components - - Avatar Upload [expected] - - Back To Top [expected] - - Drag Dialog [expected] - - Drag Select [expected] - - Drag Kanban [expected] - - Drag List [expected] - - SplitPane [expected] - - Dropzone [expected] - - Sticky [expected] - - CountTo - -- Advanced Example [expected] -- Error Log [expected] -- Dashboard -- Guide Page -- ECharts -- Clipboard [expected] -- Markdown to html [expected] -``` - -## Getting started - -```bash -# clone the project -git clone https://github.com/NelsonEAX/vue-vuetify-admin.git - -# enter the project directory -cd vue-vuetify-admin - -# install dependency -npm install - -# develop -npm run serve -``` - -This will automatically open http://localhost:8080 - -## Build and Test - -```bash -# build -npm run build - -# run e2e test -npm run test:e2e - -# run unit test -npm run test:unit -``` - -Refer to [Documentation](https://NelsonEAX.github.io/vue-vuetify-admin-site/guide/essentials/deploy.html) for more information - -## Changelog - -Detailed changes for each release are documented in the [release notes](https://github.com/NelsonEAX/vue-vuetify-admin/releases). - -## Online Demo - -[Preview](https://NelsonEAX.github.io/vue-vuetify-admin) - -## Browsers support - -Modern browsers and Internet Explorer 10+. - -| [IE / Edge](https://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](https://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](https://godban.github.io/browsers-support-badges/)
Chrome | [Safari](https://godban.github.io/browsers-support-badges/)
Safari | -| --------- | --------- | --------- | --------- | -| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions - -## License - -[MIT](https://github.com/NelsonEAX/vue-vuetify-admin/blob/master/LICENSE) - -Copyright (c) 2019-present NelsonEAX +# vue-vuetify-admin + +

+ +

+ +

+ + vue + + + element-ui + + + Build Status + + + license + + + GitHub release + + + Telegram + +

+ +## Introduction + +[vue-vuetify-admin](https://nelsoneax.github.io/vue-vuetify-admin/) is a production-ready front-end solution +for admin interfaces. It based on [vue](https://github.com/vuejs/vue) and use the +material design component framework [vuetify](https://github.com/vuetifyjs/vuetify). + +It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, +typical templates for enterprise applications, lots of awesome features. It helps you build a +large complex Single-Page Applications. I believe whatever your needs are, this project will help you. + +- [Preview](https://NelsonEAX.github.io/vue-vuetify-admin) + +**The current version is `v0.0.1-alpha` build on `vue-cli`. If you find a problem, please put +[issue](https://github.com/NelsonEAX/vue-vuetify-admin/issues/new).** + +**This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.** + +## Preparation + +You need to install [node](https://nodejs.org/) and [git](https://git-scm.com/) locally. +The project is based on [ES2015+](https://es6.ruanyifeng.com/), +[vue](https://cn.vuejs.org/index.html), +[vuex](https://vuex.vuejs.org/zh-cn/), +[vue-router](https://router.vuejs.org/zh-cn/), +[vue-cli](https://github.com/vuejs/vue-cli) , +[axios](https://github.com/axios/axios) and +[vuetify](https://github.com/vuetifyjs/vuetify), +all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock). +Understanding and learning this knowledge in advance will greatly help the use of this project. + +

+ +

+ +## Features + +``` +- Login / Logout + +- Permission Authentication + - Page permission [expected] + - Directive permission [expected] + - Permission configuration page [expected] + - Two-step login + +- Multi-environment build + - dev sit stage prod [expected] + +- Global Features + - I18n + - Multiple dynamic themes + - Dynamic sidebar (supports multi-level routing) + - Dynamic breadcrumb + - Tags-view (Tab page Support right-click operation) [expected] + - Svg Sprite [expected] + - Mock data + - Screenfull + - Responsive Sidebar + +- Editor + - Rich Text Editor [expected] + - Markdown Editor [expected] + - JSON Editor [expected] + +- Excel + - Export Excel [expected] + - Upload Excel [expected] + - Visualization Excel [expected] + - Export zip [expected] + +- Table + - Dynamic Table [expected] + - Drag And Drop Table [expected] + - Inline Edit Table [expected] + +- Error Page + - 301 + - 401 + - 403 + - 404 + - 500 + +- Components + - Avatar Upload + - Back To Top + - Drag Dialog [expected] + - Drag Select [expected] + - Drag Kanban + - Drag List [expected] + - SplitPane + - Dropzone + - Sticky + - CountTo + +- Advanced Example [expected] +- Error Log [expected] +- Dashboard +- Guide Page +- ECharts +- Clipboard [expected] +- Markdown to html +``` + +## Getting started + +```bash +# clone the project +git clone https://github.com/NelsonEAX/vue-vuetify-admin.git + +# enter the project directory +cd vue-vuetify-admin + +# install dependency +npm install + +# develop +npm run serve +``` + +This will automatically open http://localhost:8080 + +## Build and Test + +```bash +# build +npm run build + +# run e2e test +npm run test:e2e + +# run unit test +npm run test:unit +``` + +Refer to [Documentation](https://NelsonEAX.github.io/vue-vuetify-admin-site/guide/essentials/deploy.html) for more information + +## Changelog + +Detailed changes for each release are documented in the [release notes](https://github.com/NelsonEAX/vue-vuetify-admin/releases). + +## Online Demo + +[Preview](https://NelsonEAX.github.io/vue-vuetify-admin) + +## Browsers support + +Modern browsers and Internet Explorer 10+. + +| [IE / Edge](https://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](https://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](https://godban.github.io/browsers-support-badges/)
Chrome | [Safari](https://godban.github.io/browsers-support-badges/)
Safari | +| --------- | --------- | --------- | --------- | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions + +## License + +[MIT](https://github.com/NelsonEAX/vue-vuetify-admin/blob/master/LICENSE) + +Copyright (c) 2019-present NelsonEAX diff --git a/src/locale/en.js b/src/locale/en.js index 89b975c..b31b245 100644 --- a/src/locale/en.js +++ b/src/locale/en.js @@ -40,7 +40,16 @@ export default { datepicker: 'Datepicker', dialogs: 'Dialogs', grid: 'Grid', - icon: 'Icons' + icon: 'Icons', + pagination: 'Pagination', + parallax: 'Parallax', + progress: 'Progress', + slider: 'Slider', + snackbar: 'Snackbar', + tables: 'Tables', + timepicker: 'Timepicker', + tooltip: 'Tooltip', + typography: 'Typography' }, errors: 'Errors', errorPages: { diff --git a/src/locale/ru.js b/src/locale/ru.js index 2acba2e..4e7c1ee 100644 --- a/src/locale/ru.js +++ b/src/locale/ru.js @@ -40,7 +40,16 @@ export default { datepicker: 'Datepicker', dialogs: 'Dialogs', grid: 'Grid', - icon: 'Icons' + icon: 'Icons', + pagination: 'Pagination', + parallax: 'Parallax', + progress: 'Progress', + slider: 'Slider', + snackbar: 'Snackbar', + tables: 'Tables', + timepicker: 'Timepicker', + tooltip: 'Tooltip', + typography: 'Typography' }, errors: 'Ошибки', errorPages: { diff --git a/src/router/modules/vuetify.js b/src/router/modules/vuetify.js index 05e78a9..49cfb69 100644 --- a/src/router/modules/vuetify.js +++ b/src/router/modules/vuetify.js @@ -130,7 +130,7 @@ const vuetifyRouter = { path: 'timepicker', component: () => import('@/views/components/Vuetify/Timepicker.vue'), name: 'timepicker', - meta: { title: 'route.vuetifyComponents.Timepicker', icon: 'timepicker', affix: true } + meta: { title: 'route.vuetifyComponents.timepicker', icon: 'timepicker', affix: true } }, { path: 'tooltip', diff --git a/src/views/components/Dashboard/index.vue b/src/views/components/Dashboard/index.vue index ee58f1b..948e6d0 100644 --- a/src/views/components/Dashboard/index.vue +++ b/src/views/components/Dashboard/index.vue @@ -5,7 +5,7 @@ - + flare @@ -15,51 +15,51 @@ width="100%" :chart-data="getChartOption('line')" /> - + - + - + - + - + - + - + - + - + - + - + @@ -79,7 +79,7 @@ import * as Activity from '@/api/mock_activity'; import GithubCorner from '@/views/components/Dashboard/GithubCorner.vue'; import PanelGroup from '@/views/components/Dashboard/PanelGroup.vue'; import OptionChart from '@/views/components/Dashboard/OptionChart.vue'; -import DWidget from '@/views/components/Dashboard/DWidget.vue'; +import AppWidget from '@/views/layout/components/AppWidget.vue'; import PlainTable from '@/views/components/Dashboard/PlainTable.vue'; import PlainTableOrder from '@/views/components/Dashboard/PlainTableOrder.vue'; @@ -91,7 +91,7 @@ export default { OptionChart, PlainTable, PlainTableOrder, - DWidget + AppWidget }, data: () => ({ lineChartData: lineChartData.newVisitis diff --git a/src/views/components/I18n.vue b/src/views/components/I18n.vue index 01b7038..7e1df55 100644 --- a/src/views/components/I18n.vue +++ b/src/views/components/I18n.vue @@ -16,7 +16,12 @@ - +
- + @@ -93,12 +98,12 @@ import { locales, changeLocale } from '@/locale'; import { mapGetters } from 'vuex'; import { headers, desserts } from '@/api/mock_table'; -import VWidget from '@/views/components/Dashboard/DWidget.vue'; +import AppWidget from '@/views/layout/components/AppWidget.vue'; export default { name: 'I18n', components: { - VWidget + AppWidget }, data: () => ({ locales, diff --git a/src/views/components/Theme.vue b/src/views/components/Theme.vue index 3cf6d1c..b077a8c 100644 --- a/src/views/components/Theme.vue +++ b/src/views/components/Theme.vue @@ -16,7 +16,12 @@ - +
{{ $t('components.theme') }} @@ -26,7 +31,7 @@
- + @@ -80,11 +85,11 @@ - - diff --git a/src/views/components/Dashboard/DWidget.vue b/src/views/layout/components/AppWidget.vue similarity index 97% rename from src/views/components/Dashboard/DWidget.vue rename to src/views/layout/components/AppWidget.vue index 2d4242f..a1def5a 100644 --- a/src/views/components/Dashboard/DWidget.vue +++ b/src/views/layout/components/AppWidget.vue @@ -23,7 +23,7 @@