diff --git a/.eslintrc.js b/.eslintrc.js index 9b10e0c..57a7178 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,8 +7,6 @@ module.exports = { rules: { "no-console": process.env.NODE_ENV === "production" ? "error" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", - }, - parserOptions: { - parser: "babel-eslint", + "vue/multi-word-component-names": "off", }, }; diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index b801c72..02db855 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -4,9 +4,9 @@ jobs: autoclose: runs-on: ubuntu-latest steps: - - name: Issue auto-closer - uses: roots/issue-closer-action@v1.1 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-material-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n๐Ÿ‘‰  https://www.creative-tim.com/bundles\n๐Ÿ‘‰  https://www.creative-tim.com\n\n\n
\n\n" - issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) + - name: Issue auto-closer + uses: roots/issue-closer-action@v1.1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-material-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n๐Ÿ‘‰  https://www.creative-tim.com/bundles\n๐Ÿ‘‰  https://www.creative-tim.com\n\n\n
\n\n" + issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) diff --git a/.jshintrc b/.jshintrc index 5db9558..2b6f469 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,3 +1,3 @@ { - "esversion": 6 + "esversion": 6 } diff --git a/.npmrc b/.npmrc index e9ee3cb..5c6c958 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,3 @@ -legacy-peer-deps=true \ No newline at end of file +legacy-peer-deps=true +auto-install-peers=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 18f982f..2fe2021 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Change Log +## [1.5.2] 2024-02-22 + +- Update dependencies and devDependencies. +- Fix installation issues. + ## [1.5.1] 2023-01-10 - Update dependencies and devDependencies. diff --git a/README.md b/README.md index 4adec80..22a274c 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ # [Vue Material Dashboard](https://demos.creative-tim.com/vue-material-dashboard) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/home?status=Vue%20Material%20Dashboard,%20a%20free%20Material%20Admin%20Template%20%E2%9D%A4%EF%B8%8F%20https%3A//bit.ly/2Nh5aVy%20%20%23vue%20%23material%20%23design%20%23developers%20%23freebie%20%20via%20%40CreativeTim) - - ![version](https://img.shields.io/badge/version-1.5.1-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-material-dashboard.svg?maxAge=2592000)](https://github.com/creativetimofficial/vue-material-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-material-dashboard.svg?maxAge=2592000)](https://github.com/creativetimofficial/vue-material-dashboard/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) - +![version](https://img.shields.io/badge/version-1.5.2-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-material-dashboard.svg?maxAge=2592000)](https://github.com/creativetimofficial/vue-material-dashboard/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-material-dashboard.svg?maxAge=2592000)](https://github.com/creativetimofficial/vue-material-dashboard/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) ![Product Gif](https://s3.amazonaws.com/creativetim_bucket/github/gif/vue-material-dashboard.gif) @@ -12,22 +10,19 @@ We have created it thinking about things you actually need in a dashboard. Vue M Let us know what you think and what we can improve below. And good luck with development! - ## Table of Contents -* [Versions](#versions) -* [Demo](#demo) -* [Quick Start](#quick-start) -* [Documentation](#documentation) -* [File Structure](#file-structure) -* [Browser Support](#browser-support) -* [Resources](#resources) -* [Reporting Issues](#reporting-issues) -* [Technical Support or Questions](#technical-support-or-questions) -* [Licensing](#licensing) -* [Useful Links](#useful-links) - - +- [Versions](#versions) +- [Demo](#demo) +- [Quick Start](#quick-start) +- [Documentation](#documentation) +- [File Structure](#file-structure) +- [Browser Support](#browser-support) +- [Resources](#resources) +- [Reporting Issues](#reporting-issues) +- [Technical Support or Questions](#technical-support-or-questions) +- [Licensing](#licensing) +- [Useful Links](#useful-links) ## Versions @@ -35,35 +30,36 @@ Let us know what you think and what we can improve below. And good luck with dev [](https://www.creative-tim.com/product/vue-material-dashboard) [](https://www.creative-tim.com/product/material-dashboard-angular2) +| HTML | React | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [![Material Dashboard HTML](https://s3.amazonaws.com/creativetim_bucket/products/50/thumb/opt_md_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard) | [![Material Dashboard React](https://s3.amazonaws.com/creativetim_bucket/products/71/thumb/opt_mdr_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-react) | -| HTML | React | -| --- | --- | -| [![Material Dashboard HTML](https://s3.amazonaws.com/creativetim_bucket/products/50/thumb/opt_md_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard) | [![Material Dashboard React](https://s3.amazonaws.com/creativetim_bucket/products/71/thumb/opt_mdr_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-react) - -| Vue | Angular | -| --- | --- | -| [![Vue Material Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/81/thumb/opt_md_vue_thumbnail.jpg)](https://www.creative-tim.com/product/vue-material-dashboard) | [![Material Dashboard Angular 2](https://s3.amazonaws.com/creativetim_bucket/products/53/thumb/opt_md_angular_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-angular2) - - +| Vue | Angular | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [![Vue Material Dashboard](https://s3.amazonaws.com/creativetim_bucket/products/81/thumb/opt_md_vue_thumbnail.jpg)](https://www.creative-tim.com/product/vue-material-dashboard) | [![Material Dashboard Angular 2](https://s3.amazonaws.com/creativetim_bucket/products/53/thumb/opt_md_angular_thumbnail.jpg)](https://www.creative-tim.com/product/material-dashboard-angular2) | ## Demo -| Dashboard | User Profile | Tables | Maps | Notification | -| --- | --- | --- | --- | --- | -| [![Start page](src/assets/github/dashboard.png)](https://demos.creative-tim.com/vue-material-dashboard) | [![User profile page](src/assets/github/user_profile.png)](https://demos.creative-tim.com/vue-material-dashboard/#/user) | [![Tables page ](src/assets/github/tables.png)](https://demos.creative-tim.com/vue-material-dashboard/#/table) | [![Maps Page](src/assets/github/maps.png)](https://demos.creative-tim.com/vue-material-dashboard/#/maps) | [![Notification page](src/assets/github/notification.png)](https://demos.creative-tim.com/vue-material-dashboard/#/notifications) +| Dashboard | User Profile | Tables | Maps | Notification | +| ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| [![Start page](src/assets/github/dashboard.png)](https://demos.creative-tim.com/vue-material-dashboard) | [![User profile page](src/assets/github/user_profile.png)](https://demos.creative-tim.com/vue-material-dashboard/#/user) | [![Tables page ](src/assets/github/tables.png)](https://demos.creative-tim.com/vue-material-dashboard/#/table) | [![Maps Page](src/assets/github/maps.png)](https://demos.creative-tim.com/vue-material-dashboard/#/maps) | [![Notification page](src/assets/github/notification.png)](https://demos.creative-tim.com/vue-material-dashboard/#/notifications) | [View More](https://demos.creative-tim.com/vue-material-dashboard). - ## Quick start ## :cloud: Build Setup ### install dependencies + `npm install` + ### serve with hot reload at localhost:8080 + `npm run dev` + ### build for production with minification + `npm run build` - [Download from Github](https://github.com/creativetimofficial/vue-material-dashboard/archive/master.zip). @@ -72,12 +68,12 @@ Let us know what you think and what we can improve below. And good luck with dev For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). - ## Documentation -The documentation for the Vue Material Dashboard is hosted at our [website](https://demos.creative-tim.com/vue-material-dashboard/documentation). +The documentation for the Vue Material Dashboard is hosted at our [website](https://demos.creative-tim.com/vue-material-dashboard/documentation). ## File Structure + Within the download you'll find the following directories and files: ``` @@ -141,21 +137,21 @@ vue-material-dashboard โ””โ”€โ”€ routes.js ``` - ## Browser Support At present, we officially aim to support the last two versions of the following browsers: - ## Resources + - Demo: - Download Page: - Documentation: - License Agreement: - Support: - Issues: [Github Issues Page](https://github.com/creativetimofficial/vue-material-dashboard/issues) + ## Reporting Issues We use GitHub Issues as the official bug tracker for the Vue Material Dashboard. Here are some advices for our users that want to report an issue: @@ -164,21 +160,16 @@ We use GitHub Issues as the official bug tracker for the Vue Material Dashboard. 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. - ## Technical Support or Questions If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us) instead of opening an issue. - - ## Licensing -- Copyright 2023 Creative Tim (https://www.creative-tim.com/) +- Copyright 2024 Creative Tim (https://www.creative-tim.com/) - Licensed under MIT (https://github.com/creativetimofficial/vue-material-dashboard/blob/master/LICENSE.md) - - ## Useful Links - [More products](https://www.creative-tim.com/bootstrap-themes) from Creative Tim diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 17da270..0e0e3ca 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,52 +1,62 @@ -const markdownParser = require('./markdownParser') -const path = require('path'); +const markdownParser = require("./markdownParser"); +const path = require("path"); module.exports = { - title: 'Vue Material Dashboard', - base: '/vue-material-dashboard/documentation/', + title: "Vue Material Dashboard", + base: "/vue-material-dashboard/documentation/", markdown: { - config: markdownParser + config: markdownParser, }, configureWebpack: (config, isServer) => { - config.resolve.alias['@'] = path.resolve(__dirname, '../../src') + config.resolve.alias["@"] = path.resolve(__dirname, "../../src"); }, head: [ - ['link', { rel: 'stylesheet', href: `https://fonts.googleapis.com/icon?family=Material+Icons` }], - ['link', { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon.png' }], - ['link', { rel: 'canonical', href: 'https://www.creative-tim.com/product/vue-material-dashboard' }] + [ + "link", + { + rel: "stylesheet", + href: `https://fonts.googleapis.com/icon?family=Material+Icons`, + }, + ], + [ + "link", + { rel: "icon", type: "image/png", sizes: "96x96", href: "/favicon.png" }, + ], + [ + "link", + { + rel: "canonical", + href: "https://www.creative-tim.com/product/vue-material-dashboard", + }, + ], ], themeConfig: { - repo: 'creativetimofficial/vue-material-dashboard', - nav: [ - { text: 'v1.3.2', link: '/' } - ], + repo: "creativetimofficial/vue-material-dashboard", + nav: [{ text: "v1.3.2", link: "/" }], sidebar: [ { - title: 'General Information', + title: "General Information", collapsable: false, - children: [ - '/', - '/component-docs/license' - ] + children: ["/", "/component-docs/license"], }, { - title: 'Components', + title: "Components", collapsable: false, children: [ - '/component-docs/buttons', - '/component-docs/cards', - '/component-docs/checkboxes', - '/component-docs/dropdown', - '/component-docs/inputs', - '/component-docs/textarea', - '/component-docs/maps', - '/component-docs/notifications', - '/component-docs/tables', - '/component-docs/tabs', - '/component-docs/tooltips', - '/component-docs/material-icons', - '/component-docs/toolbar' - ] - } - ] - } + "/component-docs/buttons", + "/component-docs/cards", + "/component-docs/checkboxes", + "/component-docs/dropdown", + "/component-docs/inputs", + "/component-docs/textarea", + "/component-docs/maps", + "/component-docs/notifications", + "/component-docs/tables", + "/component-docs/tabs", + "/component-docs/tooltips", + "/component-docs/material-icons", + "/component-docs/toolbar", + ], + }, + ], + }, }; diff --git a/docs/.vuepress/demo-block/demo-block.vue b/docs/.vuepress/demo-block/demo-block.vue index 559ce4e..87f912f 100755 --- a/docs/.vuepress/demo-block/demo-block.vue +++ b/docs/.vuepress/demo-block/demo-block.vue @@ -1,9 +1,10 @@ diff --git a/docs/.vuepress/docs.scss b/docs/.vuepress/docs.scss index b407651..6a8623d 100644 --- a/docs/.vuepress/docs.scss +++ b/docs/.vuepress/docs.scss @@ -1,11 +1,21 @@ -@import '../../src/assets/scss/md/variables'; +@import "../../src/assets/scss/md/variables"; .theme-container .page { min-height: 100vh; background-color: white; } -body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { +body, +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4 { font-weight: 300 !important; } @@ -30,122 +40,123 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { border: 0; } - -h1{ +h1 { font-size: 3rem !important; border-bottom: 1px solid #eaecef; } -h2{ +h2 { border: 0; } -p{ +p { font-size: 15px; } -.links .nav-links a{ - +.links .nav-links a { .icon.outbound, - &{ + & { color: $white-color !important; } } -.navbar{ +.navbar { display: flex; align-items: center; background-color: $brand-success !important; - box-shadow: 0 12px 20px -10px rgba(76,175,80,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(76,175,80,.2) !important; + box-shadow: 0 12px 20px -10px rgba(76, 175, 80, 0.28), + 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(76, 175, 80, 0.2) !important; border: 0 !important; height: 70px !important; - .links{ + .links { top: unset !important; background-color: transparent !important; - .search-box{ - .suggestions li a{ + .search-box { + .suggestions li a { color: $black-color; &:hover, - &:focus{ + &:focus { color: $brand-success !important; } } } } - .sidebar-button{ + .sidebar-button { top: 0.9rem; - svg path{ + svg path { fill: $white-color; } } - .site-name{ + .site-name { font-size: 1.125rem !important; color: $white-color !important; font-weight: 300 !important; } } -.sidebar{ - a.sidebar-link{ +.sidebar { + a.sidebar-link { color: $black-color !important; &:hover, - &:focus{ + &:focus { color: $brand-success !important; } - &.active{ + &.active { color: $brand-success !important; } } } -.page .page-nav{ +.page .page-nav { .next a, .next a:hover, .next a:focus, .prev a, .prev a:hover, - .prev a:focus{ + .prev a:focus { color: $brand-success !important; } } -.md-list{ +.md-list { width: 11%; } -.md-card{ - th, td, tr{ +.md-card { + th, + td, + tr { border: 0; } - tr:nth-child(2n){ + tr:nth-child(2n) { background-color: transparent; } } -#sizes + p + .demo-block .source{ +#sizes + p + .demo-block .source { display: flex; align-items: center; } -.md-toolbar .md-list{ +.md-toolbar .md-list { width: 100%; justify-content: flex-end; } -.demo-block .source .md-toolbar{ +.demo-block .source .md-toolbar { margin-bottom: 10px; } -.theme-container{ +.theme-container { height: 100vh; position: relative; } diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 40b1a4a..4ca81fe 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/docs/.vuepress/enhanceApp.js @@ -1,30 +1,30 @@ -import './docs.scss' -import '../../node_modules/vue-material/dist/vue-material.css' -import '@/assets/scss/material-dashboard.scss' -import DemoBlock from './demo-block/demo-block' +import "./docs.scss"; +import "../../node_modules/vue-material/dist/vue-material.css"; +import "@/assets/scss/material-dashboard.scss"; +import DemoBlock from "./demo-block/demo-block"; // Plugins -import GlobalComponents from '@/globalComponents' -import GlobalDirectives from '@/globalDirectives' -import Notifications from '@/components/NotificationPlugin' +import GlobalComponents from "@/globalComponents"; +import GlobalDirectives from "@/globalDirectives"; +import Notifications from "@/components/NotificationPlugin"; // MaterialDashboard plugin -import VueMaterial from '../../node_modules/vue-material' -import * as components from '@/components/index'; +import VueMaterial from "../../node_modules/vue-material"; +import * as components from "@/components/index"; export default ({ - Vue, // the version of Vue being used in the VuePress app - options, // the options for the root Vue instance - router, // the router instance for the app - siteData - }) => { - Vue.use(VueMaterial) + Vue, // the version of Vue being used in the VuePress app + options, // the options for the root Vue instance + router, // the router instance for the app + siteData, +}) => { + Vue.use(VueMaterial); Vue.use(GlobalComponents); Vue.use(GlobalDirectives); Vue.use(Notifications); - Vue.component('demo-block', DemoBlock); - Object.keys(components).forEach(compKey => { + Vue.component("demo-block", DemoBlock); + Object.keys(components).forEach((compKey) => { let componentInstance = components[compKey]; - if(componentInstance.name){ + if (componentInstance.name) { Vue.component(componentInstance.name, componentInstance); } }); -} +}; diff --git a/docs/.vuepress/markdownParser.js b/docs/.vuepress/markdownParser.js index 02ae338..0a2067b 100644 --- a/docs/.vuepress/markdownParser.js +++ b/docs/.vuepress/markdownParser.js @@ -1,31 +1,36 @@ function convert(str) { - str = str.replace(/(&#x)(\w{4});/gi, function($0) { - return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16)); + str = str.replace(/(&#x)(\w{4});/gi, function ($0) { + return String.fromCharCode( + parseInt( + encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, "$2"), + 16 + ) + ); }); return str; } -const striptags = require('./strip-tags'); -const markdownitContainer = require('markdown-it-container'); +const striptags = require("./strip-tags"); +const markdownitContainer = require("markdown-it-container"); -module.exports = md => { +module.exports = (md) => { // use more markdown-it plugins! - md.use(markdownitContainer, 'demo', { - validate: function(params) { + md.use(markdownitContainer, "demo", { + validate: function (params) { return params.trim().match(/^demo\s*(.*)$/); }, - render: function(tokens, idx) { + render: function (tokens, idx) { const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/); if (tokens[idx].nesting === 1) { - const description = (m && m.length > 1) ? m[1] : ''; + const description = m && m.length > 1 ? m[1] : ""; const content = tokens[idx + 1].content; - const html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1'); - const script = striptags.fetch(content, 'script'); - const style = striptags.fetch(content, 'style'); + const html = convert( + striptags.strip(content, ["script", "style"]) + ).replace(/(<[^>]*)=""(?=.*>)/g, "$1"); + const script = striptags.fetch(content, "script"); + const style = striptags.fetch(content, "style"); let jsfiddle = { html: html, script: script, style: style }; - const descriptionHTML = description - ? md.render(description) - : ''; + const descriptionHTML = description ? md.render(description) : ""; jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle)); return ` @@ -33,7 +38,7 @@ module.exports = md => { ${descriptionHTML}
`; } - return '
\n'; - } - }) -} + return "\n"; + }, + }); +}; diff --git a/docs/.vuepress/strip-tags.js b/docs/.vuepress/strip-tags.js index 802660d..abeb4ab 100644 --- a/docs/.vuepress/strip-tags.js +++ b/docs/.vuepress/strip-tags.js @@ -5,12 +5,12 @@ * Licensed under the MIT license. */ -'use strict'; +"use strict"; -const cheerio = require('cheerio'); +const cheerio = require("cheerio"); -exports.strip = function(str, tags) { - const $ = cheerio.load(str, {decodeEntities: false, xmlMode: true}); +exports.strip = function (str, tags) { + const $ = cheerio.load(str, { decodeEntities: false, xmlMode: true }); if (!tags || tags.length === 0) { return str; @@ -26,8 +26,8 @@ exports.strip = function(str, tags) { return $.html(); }; -exports.fetch = function(str, tag) { - const $ = cheerio.load(str, {decodeEntities: false}); +exports.fetch = function (str, tag) { + const $ = cheerio.load(str, { decodeEntities: false }); if (!tag) return str; return $(tag).html(); diff --git a/docs/README.md b/docs/README.md index af86688..f9e6aac 100644 --- a/docs/README.md +++ b/docs/README.md @@ -3,6 +3,7 @@ Vue Material Dashboard is a beautiful resource built over [Vue Material](https://vuematerial.io/) and [Vuejs](https://vuejs.org/v2/guide/). It will help you get started developing dashboards in no time. Vue Material Dashboard is the official Vuejs version of the Original [Material Dashboard](https://www.creative-tim.com/product/material-dashboard). Using the Dashboard is pretty simple but requires basic knowledge of Javascript, [Vue](https://vuejs.org/v2/guide/) and [Vue-Router](https://router.vuejs.org/en/). ### Getting Started + - Install Nodejs from [Nodejs Official Page](https://nodejs.org/en/) - Open your terminal - Navigate to the project @@ -11,6 +12,7 @@ Vue Material Dashboard is a beautiful resource built over [Vue Material](https:/ - A new tab will be opened in your browser You can also run additional npm tasks such as + - `npm run build` to build your app for production - `npm run lint` to run linting. @@ -22,4 +24,4 @@ to as little as possible. Almost everything is inside `package.json` + some othe ### Element-UI - Vue Material Dashboard also uses [element-ui](https://vuematerial.io/ui-elements/elevation) components and restyles them to achieve consistent and homogenous interface with the existing custom components and general UI of the dashboard. +Vue Material Dashboard also uses [element-ui](https://vuematerial.io/ui-elements/elevation) components and restyles them to achieve consistent and homogenous interface with the existing custom components and general UI of the dashboard. diff --git a/docs/component-docs/buttons.md b/docs/component-docs/buttons.md index 134071c..c016510 100644 --- a/docs/component-docs/buttons.md +++ b/docs/component-docs/buttons.md @@ -3,9 +3,7 @@ To use the custom button you don't need to import the custom made component, you can easily use it like this: ```html - - Button - + Button ``` ### Colors @@ -41,8 +39,10 @@ We has changed the predefined button styles from vuematerial.io, each serving it ```html Default Round -favorite With Icon -favorite +favorite With Icon +favorite Simple ``` diff --git a/docs/component-docs/cards.md b/docs/component-docs/cards.md index f5c6dfc..badec57 100644 --- a/docs/component-docs/cards.md +++ b/docs/component-docs/cards.md @@ -2,26 +2,24 @@ We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. - ```js -import {StatsCard} from 'src/components' -import {ChartCard} from 'src/components' +import { StatsCard } from "src/components"; +import { ChartCard } from "src/components"; ``` ### Local Usage ```js components: { - ChartCard, - StatsCard + ChartCard, StatsCard; } ``` ### Global Usage ```js -Vue.component(ChartCard) -Vue.component(StatsCard) +Vue.component(ChartCard); +Vue.component(StatsCard); ``` ``` ### StatsCard Attributes -| Attribute | Description | Type | Accepted values | Default | -|---------- |-------- |---------- |------------- |-------- | -| type | Card type | string | primary/danger/success/info/warning | primary | -| icon | Card icon | string | - | - | -| title | Card title | string | - | โ€” | -| subTitle | Card subtitle (displayed above with smaller font) | string | - | - | + +| Attribute | Description | Type | Accepted values | Default | +| --------- | ------------------------------------------------- | ------ | ----------------------------------- | ------- | +| type | Card type | string | primary/danger/success/info/warning | primary | +| icon | Card icon | string | - | - | +| title | Card title | string | - | โ€” | +| subTitle | Card subtitle (displayed above with smaller font) | string | - | - | ### StatsCard Slots -| Name | Description | -|---------- |-------- | -| icon | Content for card icon | -| default | Default card content | -| footer | Content for card footer | +| Name | Description | +| ------- | ----------------------- | +| icon | Content for card icon | +| default | Default card content | +| footer | Content for card footer | ### Chart card @@ -125,12 +123,12 @@ For the implementation of graphic charts, we used [Chartist.js](https://gionkunz :chart-options="dailySalesChart.options" chart-type="Line" data-background-color="green"> - + + ```html ``` ### ChartCard Attributes -| Attribute | Description | Type | Accepted values | Default | -|---------- |-------- |---------- |------------- |-------- | -| type | Chart type | string | line/bar/pie | - | -| options | Chart options | string | - | - | -| data | Chart data | string | - | - | -| title | Card title | string | - | โ€” | -| subTitle | Card subtitle (displayed above with smaller font) | string | - | - | + +| Attribute | Description | Type | Accepted values | Default | +| --------- | ------------------------------------------------- | ------ | --------------- | ------- | +| type | Chart type | string | line/bar/pie | - | +| options | Chart options | string | - | - | +| data | Chart data | string | - | - | +| title | Card title | string | - | โ€” | +| subTitle | Card subtitle (displayed above with smaller font) | string | - | - | ### ChartCard Slots -| Name | Description | -|---------- |-------- | -| default | Default card content | -| footer | Content for card footer | + +| Name | Description | +| ------- | ----------------------- | +| default | Default card content | +| footer | Content for card footer | diff --git a/docs/component-docs/checkboxes.md b/docs/component-docs/checkboxes.md index 7884277..9efdec8 100644 --- a/docs/component-docs/checkboxes.md +++ b/docs/component-docs/checkboxes.md @@ -1,6 +1,6 @@ ## Checkboxes -The checkboxes that are used in our Vue Material Dashboard are the standard checkboxes from [Vue Material](https://vuematerial.io/components/checkbox). We just re-styled them for a better visual effect. +The checkboxes that are used in our Vue Material Dashboard are the standard checkboxes from [Vue Material](https://vuematerial.io/components/checkbox). We just re-styled them for a better visual effect. ``` diff --git a/docs/component-docs/dropdown.md b/docs/component-docs/dropdown.md index 8ebb943..db6ba34 100644 --- a/docs/component-docs/dropdown.md +++ b/docs/component-docs/dropdown.md @@ -2,7 +2,6 @@ To use the custom dropdown you don't need to import the custom made component because it's global registered, so you can use it like this: - ### As List Item ```html @@ -28,16 +27,17 @@ To use the custom dropdown you don't need to import the custom made component be > Note: Drop-down uses a click outside directive internally. You will get a warning if the directive is not imported. You can find the declaration of this directive in **src/globalDirectives.js** - #### Dropdown Attributes -| Attribute | Description | Type | Accepted values | Default | -|---------- |-------- |---------- |------------- |-------- | -| position | drop down menu direction (up or down) | string | dropdown-menu-right/dropdown-menu-left | - | -| icon | Dropdown icon | string | - | - | -| tag | html tag that you want the dropdown to be rendered as | string | - | li | -| title | Dropdown title | string | - | โ€” | + +| Attribute | Description | Type | Accepted values | Default | +| --------- | ----------------------------------------------------- | ------ | -------------------------------------- | ------- | +| position | drop down menu direction (up or down) | string | dropdown-menu-right/dropdown-menu-left | - | +| icon | Dropdown icon | string | - | - | +| tag | html tag that you want the dropdown to be rendered as | string | - | li | +| title | Dropdown title | string | - | โ€” | #### Dropdown Slots -| Name | Description | -|---------- |-------- | -| title | Content for dropdown title | + +| Name | Description | +| ----- | -------------------------- | +| title | Content for dropdown title | diff --git a/docs/component-docs/inputs.md b/docs/component-docs/inputs.md index c24a3f2..6f9ed27 100644 --- a/docs/component-docs/inputs.md +++ b/docs/component-docs/inputs.md @@ -1,4 +1,5 @@ ## Inputs + To use the custom form group inputs you don't need to import the custom made component, you can use it like this: - ```html @@ -24,10 +24,10 @@ module.exports = { ``` diff --git a/docs/component-docs/license.md b/docs/component-docs/license.md index 791998d..f37e122 100644 --- a/docs/component-docs/license.md +++ b/docs/component-docs/license.md @@ -1,12 +1,12 @@ ## License - MIT License - Copyright (c) 2018 Creative Tim +MIT License +Copyright (c) 2018 Creative Tim - Coded by Creative Tim +Coded by Creative Tim - Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the โ€œSoftwareโ€), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the โ€œSoftwareโ€), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - THE SOFTWARE IS PROVIDED โ€œAS ISโ€, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +THE SOFTWARE IS PROVIDED โ€œAS ISโ€, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/docs/component-docs/maps.md b/docs/component-docs/maps.md index 6bf9809..3f8f91b 100644 --- a/docs/component-docs/maps.md +++ b/docs/component-docs/maps.md @@ -78,7 +78,8 @@ Follow these steps to get an API key: 2. Create or select a project. 3. Click Continue to enable the API and any related services. 4. On the Credentials page, get an API key. -> Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key. + + > Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key. 5. From the dialog displaying the API key, select Restrict key to set a browser restriction on the API key. 6. In the Key restriction section, select HTTP referrers (web sites), then follow the on-screen instructions to set referrers. diff --git a/docs/component-docs/notifications.md b/docs/component-docs/notifications.md index 82702b4..c1318fe 100644 --- a/docs/component-docs/notifications.md +++ b/docs/component-docs/notifications.md @@ -26,10 +26,6 @@ module.exports = { } - - - - We crafted a custom plugin inspired by **vue-notifyjs** which is simple yet effective. #### Usage @@ -37,8 +33,8 @@ We crafted a custom plugin inspired by **vue-notifyjs** which is simple yet effe To use the notification plugin, import it from the components folder. Note that this is already done in **src/main.js** ```js -import Notifications from './components/NotificationPlugin' -Vue.use(Notifications) +import Notifications from "./components/NotificationPlugin"; +Vue.use(Notifications); ``` #### Trigger Notifications @@ -69,28 +65,48 @@ Vue.use(Notifications) ```html - ``` -> Note: `````` can be declared only once anywhere in your app, preferably in your root component so the notification component is alive inside any other components. +> Note: `` can be declared only once anywhere in your app, preferably in your root component so the notification component is alive inside any other components. #### Notification options ```js -this.$notify( - { - message: 'Welcome to Material Dashboard - a beautiful freebie for every web developer.', - icon: 'add_alert', - horizontalAlign: horizontalAlign, - verticalAlign: verticalAlign, - type: this.type[color] - }) +this.$notify({ + message: + "Welcome to Material Dashboard - a beautiful freebie for every web developer.", + icon: "add_alert", + horizontalAlign: horizontalAlign, + verticalAlign: verticalAlign, + type: this.type[color], +}); ``` ### Notification (passed through the object sent to **$notify** method) diff --git a/docs/component-docs/tables.md b/docs/component-docs/tables.md index 8754782..63ee4cc 100644 --- a/docs/component-docs/tables.md +++ b/docs/component-docs/tables.md @@ -3,15 +3,15 @@ To use the table component, import it: ```js -import {SimpleTable} from 'src/components' -import {OrderedTable} from 'src/components' +import { SimpleTable } from "src/components"; +import { OrderedTable } from "src/components"; ``` #### Global Usage -```js -Vue.component(SimpleTable) -Vue.component(OrderedTable) +```js +Vue.component(SimpleTable); +Vue.component(OrderedTable); ``` #### For Local Usage @@ -20,9 +20,9 @@ Vue.component(OrderedTable) export default { components: { SimpleTable, - OrderedTable - } -} + OrderedTable, + }, +}; ``` > Note: For more details about the tables and which tables you can use in your project please see the **Table** section from [vuematerial.io](https://vuematerial.io/components/table) @@ -30,11 +30,14 @@ export default { ### Simple Table ::: demo + ```html - ``` + ::: ### Ordered Table ::: demo + ```html - ``` + ::: diff --git a/docs/component-docs/tabs.md b/docs/component-docs/tabs.md index c278369..6634306 100644 --- a/docs/component-docs/tabs.md +++ b/docs/component-docs/tabs.md @@ -5,30 +5,31 @@ If you have information that you don't need to show at once, we suggest you use In order to use the tabs, import the necessary components: ```js -import {NavTabsCard, NavTabsTable} from 'src/components' +import { NavTabsCard, NavTabsTable } from "src/components"; ``` #### Global Usage ```js -Vue.component(NavTabsCard) -Vue.component(NavTabsTable) +Vue.component(NavTabsCard); +Vue.component(NavTabsTable); ``` + #### For Local Usage ```js export default { components: { NavTabsCard, - NavTabsTable - } -} - + NavTabsTable, + }, +}; ``` ### Nav Tabs table ::: demo + ```html
@@ -36,7 +37,6 @@ export default {