Initial

slanatech · Dec 7, 2019 · dbf4525 · dbf4525
1 parent 2a4ddc9
commit dbf4525
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -43,7 +43,8 @@
     "release-it": "^12.4.3",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-quasar": "^2.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "webpack-bundle-analyzer": "^3.6.0"
   },
   "eslintConfig": {
     "root": true,

diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
@@ -66,7 +66,7 @@
 
 <script>
 import { mapActions, mapState } from 'vuex';
-import { DbColors } from 'dashblocks';
+import { dbColors } from 'dashblocks';
 
 export default {
   name: 'SwsUxLayout',
@@ -160,7 +160,7 @@ export default {
     }
   },
   mounted() {
-    this.testColors = DbColors.getColors(true); // TEMP TODO REMOVE
+    this.testColors = dbColors.getColors(true); // TEMP TODO REMOVE
     this.$q.dark.set(this.dark);
     this.initRefresh();
   },

diff --git a/src/main.js b/src/main.js
@@ -3,11 +3,102 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 
+import {
+  DashBlocks,
+  DbDashboard,
+  DbHorizon,
+  DbSunburst,
+  DbSankey,
+  DbRidgeline,
+  DbChartjsBar,
+  DbChartjsHorizontalBar,
+  DbChartjsDoughnut,
+  DbChartjsLine,
+  DbChartjsPie,
+  DbChartjsPolarArea,
+  DbChartjsRadar,
+  DbChartjsBubble,
+  DbChartjsScatter,
+  DbNumber,
+  DbEasyPie,
+  DbTrendLine,
+  DbTrendBar,
+  DbSparkline,
+  DbDygraphsBar,
+  DbDygraphsLine,
+  DbDygraphsSparkLine,
+  DbDygraphsDateTimeHistogram
+} from 'dashblocks';
+
+Vue.use(DashBlocks, {
+  components: {
+    DbDashboard,
+    DbHorizon,
+    DbSunburst,
+    DbSankey,
+    DbRidgeline,
+    DbChartjsBar,
+    DbChartjsHorizontalBar,
+    DbChartjsDoughnut,
+    DbChartjsLine,
+    DbChartjsPie,
+    DbChartjsPolarArea,
+    DbChartjsRadar,
+    DbChartjsBubble,
+    DbChartjsScatter,
+    DbNumber,
+    DbEasyPie,
+    DbTrendLine,
+    DbTrendBar,
+    DbSparkline,
+    DbDygraphsBar,
+    DbDygraphsLine,
+    DbDygraphsSparkLine,
+    DbDygraphsDateTimeHistogram
+  }
+  //components: dashblocksComponents
+});
+
+// Sample: to import all
+/*
+import { DashBlocks } from 'dashblocks';
+import * as dashblocksComponents from 'dashblocks';
+Vue.use(DashBlocks, {
+  components: dashblocksComponents
+});
+*/
+
+/*
+  DbHorizon,
+  DbSunburst,
+  DbSankey,
+  DbRidgeline,
+  DbChartjsBar,
+  DbChartjsHorizontalBar,
+  DbChartjsDoughnut,
+  DbChartjsLine,
+  DbChartjsPie,
+  DbChartjsPolarArea,
+  DbChartjsRadar,
+  DbChartjsBubble,
+  DbChartjsScatter,
+  DbNumber,
+  DbEasyPie,
+  DbTrendLine,
+  DbTrendBar,
+  DbSparkline,
+  DbDygraphsBar,
+  DbDygraphsLine,
+  DbDygraphsSparkLine,
+  DbDygraphsDateTimeHistogram
+*/
+
 // Dashblocks CSS
 import 'dashblocks/dist/dashblocks.css';
+
 import './quasar';
 
-Vue.config.productionTip = false;
+//Vue.config.productionTip = false;
 
 new Vue({
   router,

diff --git a/src/quasar.js b/src/quasar.js
@@ -3,20 +3,82 @@ import Vue from 'vue';
 import './styles/quasar.scss';
 import '@quasar/extras/roboto-font/roboto-font.css';
 import '@quasar/extras/material-icons/material-icons.css';
-import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';
-import '@quasar/extras/material-icons-round/material-icons-round.css';
-import '@quasar/extras/material-icons-sharp/material-icons-sharp.css';
-import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
-import '@quasar/extras/ionicons-v4/ionicons-v4.css';
-import { Quasar } from 'quasar';
+//import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';
+//import '@quasar/extras/material-icons-round/material-icons-round.css';
+//import '@quasar/extras/material-icons-sharp/material-icons-sharp.css';
+//import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
+//import '@quasar/extras/ionicons-v4/ionicons-v4.css';
+
+import {
+  Quasar,
+  Ripple,
+  LoadingBar,
+  QLayout,
+  QHeader,
+  QDrawer,
+  QPageContainer,
+  QPage,
+  QPageSticky,
+  QToolbar,
+  QToolbarTitle,
+  QBtn,
+  QIcon,
+  QList,
+  QItem,
+  QItemSection,
+  QItemLabel,
+  QSplitter,
+  QScrollArea,
+  QExpansionItem,
+  QAvatar,
+  QBtnToggle,
+  QSeparator,
+  QTooltip,
+  QTable,
+  QCard,
+  QCardSection,
+  QSelect,
+  QToggle,
+  QBadge,
+  QSpace
+} from 'quasar';
 
 Vue.use(Quasar, {
   config: {},
   components: {
-    /* not needed if importStrategy is not 'manual' */
+    QLayout,
+    QHeader,
+    QDrawer,
+    QPageContainer,
+    QPage,
+    QPageSticky,
+    QToolbar,
+    QToolbarTitle,
+    QBtn,
+    QIcon,
+    QList,
+    QItem,
+    QItemSection,
+    QItemLabel,
+    QSplitter,
+    QScrollArea,
+    QExpansionItem,
+    QAvatar,
+    QBtnToggle,
+    QSeparator,
+    QTooltip,
+    QTable,
+    QCard,
+    QCardSection,
+    QSelect,
+    QToggle,
+    QBadge,
+    QSpace
   },
   directives: {
-    /* not needed if importStrategy is not 'manual' */
+    Ripple
   },
-  plugins: {}
+  plugins: {
+    LoadingBar
+  }
 });
diff --git a/src/styles/quasar.scss b/src/styles/quasar.scss
@@ -2,6 +2,10 @@
 @import '~quasar-styl';
 // @import '~quasar-addon-styl'
 
+// ???
+//@import 'dashblocks/src/assets/scss/dashblocks.scss';
+
+
 body.body--dark {
   color: $grey-6;
 }

diff --git a/src/views/DashblocksShowcase.vue b/src/views/DashblocksShowcase.vue
@@ -5,14 +5,16 @@
 </template>
 
 <script>
-import { DbData, DbDashboard } from 'dashblocks';
+import { DbData, DbColors } from 'dashblocks';
 import { demodashboard } from '../mixins/demodashboard';
 
 export default {
   name: 'DashblocksShowcase',
+  /*
   components: {
     DbDashboard
   },
+  */
   mixins: [demodashboard],
   data() {
     return {

diff --git a/src/views/SampleDashboard.vue b/src/views/SampleDashboard.vue
@@ -3,13 +3,10 @@
 </template>
 
 <script>
-import { DbData, DbDashboard } from 'dashblocks';
+import { DbData } from 'dashblocks';
 
 export default {
   name: 'SampleDashboard',
-  components: {
-    DbDashboard
-  },
   data() {
     return {
       isDark: false,

diff --git a/vue.config.js b/vue.config.js
@@ -1,19 +1,23 @@
 // vue.config.js
 const webpack = require('webpack');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
 module.exports = {
   publicPath: '/dashblocks-template/',
 
   configureWebpack: {
     plugins: [
       // Ignore all locale files of moment.js
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+      //new BundleAnalyzerPlugin({ analyzerMode: 'static' })
     ]
   },
 
   pluginOptions: {
     quasar: {
-      importStrategy: 'kebab',
-      rtlSupport: false
+      importStrategy: 'manual',
+      rtlSupport: false,
+      treeShake: true
     }
   },