From c0efaa974ba098769740e28412a03b8cac250a3b Mon Sep 17 00:00:00 2001
From: sirbeagle <cbenjamin@stormseed.com>
Date: Sat, 2 Mar 2019 21:08:53 -0500
Subject: [PATCH] All changes as of 2019-03-02 moving towards v1.0. Affects
 #50.

---
 package-lock.json                             | 154 +++--
 package.json                                  |   6 +-
 src/components/calendar/Calendar.vue          |  23 +-
 .../calendar/CalendarEventDetail.vue          | 605 ++++++++++--------
 src/components/calendar/fields/FieldDate.vue  |  52 ++
 src/components/calendar/fields/FieldTime.vue  |  52 ++
 src/components/calendar/fields/index.js       |   7 +
 src/layouts/LayoutDefault.vue                 |  92 +--
 8 files changed, 574 insertions(+), 417 deletions(-)
 create mode 100644 src/components/calendar/fields/FieldDate.vue
 create mode 100644 src/components/calendar/fields/FieldTime.vue
 create mode 100644 src/components/calendar/fields/index.js

diff --git a/package-lock.json b/package-lock.json
index 664c883..e87dc9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -79,16 +79,17 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.3.2.tgz",
-      "integrity": "sha512-tdW8+V8ceh2US4GsYdNVNoohq5uVwOf9k6krjwW4E1lINcHgttnWcNqgdoessn12dAy8QkbezlbQh2nXISNY+A==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.3.4.tgz",
+      "integrity": "sha512-uFpzw6L2omjibjxa8VGZsJUPL5wJH0zzGKpoz0ccBkzIa6C8kWNUbiBmQ0rgOKWlHJ6qzmfa6lTiGchiV8SC+g==",
       "dev": true,
       "requires": {
         "@babel/helper-function-name": "^7.1.0",
         "@babel/helper-member-expression-to-functions": "^7.0.0",
         "@babel/helper-optimise-call-expression": "^7.0.0",
         "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-replace-supers": "^7.2.3"
+        "@babel/helper-replace-supers": "^7.3.4",
+        "@babel/helper-split-export-declaration": "^7.0.0"
       }
     },
     "@babel/helper-define-map": {
@@ -211,15 +212,64 @@
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.2.3.tgz",
-      "integrity": "sha512-GyieIznGUfPXPWu0yLS6U55Mz67AZD9cUk0BfirOWlPrXlBcan9Gz+vHGz+cPfuoweZSnPzPIm67VtQM0OWZbA==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.3.4.tgz",
+      "integrity": "sha512-pvObL9WVf2ADs+ePg0jrqlhHoxRXlOa+SHRHzAXIz2xkYuOHfGl+fKxPMaS4Fq+uje8JQPobnertBBvyrWnQ1A==",
       "dev": true,
       "requires": {
         "@babel/helper-member-expression-to-functions": "^7.0.0",
         "@babel/helper-optimise-call-expression": "^7.0.0",
-        "@babel/traverse": "^7.2.3",
-        "@babel/types": "^7.0.0"
+        "@babel/traverse": "^7.3.4",
+        "@babel/types": "^7.3.4"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.3.4.tgz",
+          "integrity": "sha512-8EXhHRFqlVVWXPezBW5keTiQi/rJMQTg/Y9uVCEZ0CAF3PKtCCaVRnp64Ii1ujhkoDhhF1fVsImoN4yJ2uz4Wg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.3.4",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.11",
+            "source-map": "^0.5.0",
+            "trim-right": "^1.0.1"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.3.4.tgz",
+          "integrity": "sha512-tXZCqWtlOOP4wgCp6RjRvLmfuhnqTLy9VHwRochJBCP2nDm27JnnuFEnXFASVyQNHk36jD1tAammsCEEqgscIQ==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.3.4.tgz",
+          "integrity": "sha512-TvTHKp6471OYEcE/91uWmhR6PrrYywQntCHSaZ8CM8Vmp+pjAusal4nGB2WCCQd0rvI7nOMKn9GnbcvTUz3/ZQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "@babel/generator": "^7.3.4",
+            "@babel/helper-function-name": "^7.1.0",
+            "@babel/helper-split-export-declaration": "^7.0.0",
+            "@babel/parser": "^7.3.4",
+            "@babel/types": "^7.3.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.11"
+          }
+        },
+        "@babel/types": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.3.4.tgz",
+          "integrity": "sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.17.11",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-simple-access": {
@@ -355,9 +405,9 @@
       }
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.3.2.tgz",
-      "integrity": "sha512-DjeMS+J2+lpANkYLLO+m6GjoTMygYglKmRe6cDTbFv3L9i6mmiE8fe6B8MtCSLZpVXscD5kn7s6SgtHrDoBWoA==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.3.4.tgz",
+      "integrity": "sha512-j7VQmbbkA+qrzNqbKHrBsW3ddFnOeva6wzSe/zB7T+xaxGc+RCpwo44wCmRixAIGRoIpmVgvzFzNJqQcO3/9RA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0",
@@ -504,9 +554,9 @@
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.2.0.tgz",
-      "integrity": "sha512-CEHzg4g5UraReozI9D4fblBYABs7IM6UerAVG7EJVrTLC5keh00aEuLUT+O40+mJCEzaXkYfTCUKIyeDfMOFFQ==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.3.4.tgz",
+      "integrity": "sha512-Y7nCzv2fw/jEZ9f678MuKdMo99MFDJMT/PvD9LisrR5JDFcJH6vYeH6RnjVt3p5tceyGRvTtEN0VOlU+rgHZjA==",
       "dev": true,
       "requires": {
         "@babel/helper-module-imports": "^7.0.0",
@@ -524,19 +574,19 @@
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.2.0.tgz",
-      "integrity": "sha512-vDTgf19ZEV6mx35yiPJe4fS02mPQUUcBNwWQSZFXSzTSbsJFQvHt7DqyS3LK8oOWALFOsJ+8bbqBgkirZteD5Q==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.3.4.tgz",
+      "integrity": "sha512-blRr2O8IOZLAOJklXLV4WhcEzpYafYQKSGT3+R26lWG41u/FODJuBggehtOwilVAcFu393v3OFj+HmaE6tVjhA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0",
-        "lodash": "^4.17.10"
+        "lodash": "^4.17.11"
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.3.3.tgz",
-      "integrity": "sha512-n0CLbsg7KOXsMF4tSTLCApNMoXk0wOPb0DYfsOO1e7SfIb9gOyfbpKI2MZ+AXfqvlfzq2qsflJ1nEns48Caf2w==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.3.4.tgz",
+      "integrity": "sha512-J9fAvCFBkXEvBimgYxCjvaVDzL6thk0j0dBvCeZmIUDBwyt+nv6HfbImsSrWsYXfDNDivyANgJlFXDUWRTZBuA==",
       "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.0.0",
@@ -544,7 +594,7 @@
         "@babel/helper-function-name": "^7.1.0",
         "@babel/helper-optimise-call-expression": "^7.0.0",
         "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/helper-replace-supers": "^7.1.0",
+        "@babel/helper-replace-supers": "^7.3.4",
         "@babel/helper-split-export-declaration": "^7.0.0",
         "globals": "^11.1.0"
       }
@@ -647,9 +697,9 @@
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.2.0.tgz",
-      "integrity": "sha512-aYJwpAhoK9a+1+O625WIjvMY11wkB/ok0WClVwmeo3mCjcNRjt+/8gHWrB5i+00mUju0gWsBkQnPpdvQ7PImmQ==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.3.4.tgz",
+      "integrity": "sha512-VZ4+jlGOF36S7TjKs8g4ojp4MEI+ebCQZdswWb/T9I4X84j8OtFAyjXjt/M16iIm5RIZn0UMQgg/VgIwo/87vw==",
       "dev": true,
       "requires": {
         "@babel/helper-hoist-variables": "^7.0.0",
@@ -706,12 +756,12 @@
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.0.0.tgz",
-      "integrity": "sha512-sj2qzsEx8KDVv1QuJc/dEfilkg3RRPvPYx/VnKLtItVQRWt1Wqf5eVCOLZm29CiGFfYYsA3VPjfizTCV0S0Dlw==",
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.3.4.tgz",
+      "integrity": "sha512-hvJg8EReQvXT6G9H2MvNPXkv9zK36Vxa1+csAVTpE1J3j0zlHplw76uudEbJxgvqZzAq9Yh45FLD4pk5mKRFQA==",
       "dev": true,
       "requires": {
-        "regenerator-transform": "^0.13.3"
+        "regenerator-transform": "^0.13.4"
       }
     },
     "@babel/plugin-transform-runtime": {
@@ -906,9 +956,9 @@
       "dev": true
     },
     "@quasar/app": {
-      "version": "1.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/@quasar/app/-/app-1.0.0-beta.8.tgz",
-      "integrity": "sha512-T3ovwode3/1kHcXsNn5a/cNRDQLgaTX60bGAE1juLuG8DKKSdwEv8cu0VooEtF2CkAhUfvfLw8xb4I0TIAczVw==",
+      "version": "1.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/@quasar/app/-/app-1.0.0-beta.9.tgz",
+      "integrity": "sha512-AQzzVs6mJYMxjJnSM2Nyix1QExVRo0Ml0Qtb9LlXdYQEq9KBdGJYAz4sIC1Lu+YdLEnAK9XW3aNz70hnSy5amA==",
       "dev": true,
       "requires": {
         "@quasar/babel-preset-app": "1.0.1",
@@ -2997,9 +3047,9 @@
       "dev": true
     },
     "default-gateway": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.0.1.tgz",
-      "integrity": "sha512-JnSsMUgrBFy9ycs+tmOvLHN1GpILe+hNSUrIVM8mXjymfcBH9a7LJjOdoHLuUqKGuCUk6mSIPJjZ11Zszrg3oQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.1.2.tgz",
+      "integrity": "sha512-xhJUAp3u02JsBGovj0V6B6uYhKCUOmiNc8xGmReUwGu77NmvcpxPVB0pCielxMFumO7CmXBG02XjM8HB97k8Hw==",
       "dev": true,
       "requires": {
         "execa": "^1.0.0",
@@ -5309,9 +5359,9 @@
       },
       "dependencies": {
         "readable-stream": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
-          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.2.0.tgz",
+          "integrity": "sha512-RV20kLjdmpZuTF1INEb9IA3L68Nmi+Ri7ppZqo78wj//Pn62fCoJyV9zalccNzDD/OuJpMG4f+pfMl8+L6QdGw==",
           "dev": true,
           "requires": {
             "inherits": "^2.0.3",
@@ -5407,12 +5457,12 @@
       "dev": true
     },
     "icss-utils": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.0.0.tgz",
-      "integrity": "sha512-bA/xGiwWM17qjllIs9X/y0EjsB7e0AV08F3OL8UPsoNkNRibIuu8f1eKTnQ8QO1DteKKTxTUAn+IEWUToIwGOA==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.0.tgz",
+      "integrity": "sha512-3DEun4VOeMvSczifM3F2cKQrDQ5Pj6WKhkOq6HD4QTnDUAq8MQRxy5TX6Sy1iY6WPBe4gQ3p5vTECjbIkglkkQ==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.5"
+        "postcss": "^7.0.14"
       }
     },
     "ieee754": {
@@ -7078,9 +7128,9 @@
       "dev": true
     },
     "pako": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.8.tgz",
-      "integrity": "sha512-6i0HVbUfcKaTv+EG8ZTr75az7GFXcLYk9UyLEg7Notv/Ma+z/UG3TCoz6GiNeOrn1E/e63I0X/Hpw18jHOTUnA==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
+      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
       "dev": true
     },
     "parallel-transform": {
@@ -7911,9 +7961,9 @@
       "dev": true
     },
     "quasar": {
-      "version": "1.0.0-beta.4",
-      "resolved": "https://registry.npmjs.org/quasar/-/quasar-1.0.0-beta.4.tgz",
-      "integrity": "sha512-MybY/A4MAtxyKmiD9lrw+QrSELgDP4MpOci6N2DpmSy8ICq2VDe8Tm85Oj9IJf3eMCE6KZGn41Ldfry/MJzG6w=="
+      "version": "1.0.0-beta.7",
+      "resolved": "https://registry.npmjs.org/quasar/-/quasar-1.0.0-beta.7.tgz",
+      "integrity": "sha512-C7lXjABwTZCELOjF/n44shzJ6BH0d0Ci+YTB3JcuCVpvWPSaaHm/sCiD39/nUf8O4tHe3mLubY1tA+JaPgE+eg=="
     },
     "querystring": {
       "version": "0.2.0",
@@ -8923,9 +8973,9 @@
       },
       "dependencies": {
         "readable-stream": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
-          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.2.0.tgz",
+          "integrity": "sha512-RV20kLjdmpZuTF1INEb9IA3L68Nmi+Ri7ppZqo78wj//Pn62fCoJyV9zalccNzDD/OuJpMG4f+pfMl8+L6QdGw==",
           "dev": true,
           "requires": {
             "inherits": "^2.0.3",
diff --git a/package.json b/package.json
index 550b52b..34788dd 100644
--- a/package.json
+++ b/package.json
@@ -33,13 +33,13 @@
     "build:pwa": "quasar build -m pwa"
   },
   "dependencies": {
-    "@quasar/extras": "^1.0.0",
+    "@quasar/extras": "^1.1.0",
     "lodash.has": "^4.5.2",
     "luxon": "^1.10.0",
-    "quasar": "^1.0.0-beta.4"
+    "quasar": "^1.0.0-beta.7"
   },
   "devDependencies": {
-    "@quasar/app": "^1.0.0-beta.0",
+    "@quasar/app": "^1.0.0-beta.9",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.10.0",
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index bfc47ef..438ef50 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -2,9 +2,9 @@
   <div class="calendar-test">
     <q-tabs
       v-model="currentTab"
-      class="calendar-tabs"
+      class="text-primary calendar-tabs"
       ref="fullCalendarTabs"
-      inverted
+      align="left"
     >
       <q-tab
         name="tab-month"
@@ -37,9 +37,10 @@
 
     <q-tab-panels
       v-model="currentTab"
+      class="calendar-tab-panels"
       animated
     >
-      <q-tab-panel name="tab-month" class="calendar-tab-pane-month">
+      <q-tab-panel name="tab-month" class="calendar-tab-panel-month">
         <calendar-month
           :ref="'month-' + thisRefName"
           :start-date="workingDate"
@@ -54,7 +55,7 @@
 
         />
       </q-tab-panel>
-      <q-tab-panel name="tab-week-component" class="calendar-tab-pane-week">
+      <q-tab-panel name="tab-week-component" class="calendar-tab-panel-week">
         <calendar-multi-day
           :ref="'week-' + thisRefName"
           :start-date="workingDate"
@@ -73,7 +74,7 @@
 
         />
       </q-tab-panel>
-      <q-tab-panel name="tab-days-component" class="calendar-tab-pane-week">
+      <q-tab-panel name="tab-days-component" class="calendar-tab-panel-week">
         <calendar-multi-day
           :ref="'days-' + thisRefName"
           :start-date="workingDate"
@@ -92,7 +93,7 @@
 
         />
       </q-tab-panel>
-      <q-tab-panel name="tab-single-day-component" class="calendar-tab-pane-week">
+      <q-tab-panel name="tab-single-day-component" class="calendar-tab-panel-week">
         <calendar-multi-day
           :ref="'day-' + thisRefName"
           :start-date="workingDate"
@@ -111,7 +112,7 @@
 
         />
       </q-tab-panel>
-      <q-tab-panel name="tab-agenda" class="calendar-tab-pane-agenda">
+      <q-tab-panel name="tab-agenda" class="calendar-tab-panel-agenda">
         <calendar-agenda
           :ref="'agenda-' + thisRefName"
           :start-date="workingDate"
@@ -246,13 +247,13 @@
 <style lang="stylus">
   @import 'calendar.vars.styl'
 
-  .calendar-tabs
-    .calendar-tab-pane-day,
-    .calendar-tab-pane-week
+  .calendar-tab-panels
+    .calendar-tab-panel-day,
+    .calendar-tab-panel-week
       height 60vh
       max-height 60vh
       overflow hidden
-    .q-tab-pane
+    .q-tab-panel
       border none
 
 </style>
diff --git a/src/components/calendar/CalendarEventDetail.vue b/src/components/calendar/CalendarEventDetail.vue
index e7ecc86..51f32d4 100644
--- a/src/components/calendar/CalendarEventDetail.vue
+++ b/src/components/calendar/CalendarEventDetail.vue
@@ -2,10 +2,11 @@
 
   <q-dialog
     v-model="modalIsOpen"
-    class="calendar-event-detail"
+    class="NOcalendar-event-detail"
     @hide="__close()"
     @escape-key="__close()"
   >
+    <!--
     <div :class="getTopColorClasses">
       <div class="absolute-top-right row justify-end items-start ced-toolbar">
         <q-btn
@@ -24,7 +25,7 @@
         </div>
         <q-input
           v-model="editEventObject.summary"
-          float-label="Summary"
+          stack-label="Summary"
           inverted-light
           :color="fieldColor"
           class="no-shadow"
@@ -53,280 +54,303 @@
       </div>
 
     </div>
+    -->
 
-    <div class="ced-content">
-      <div
-        v-if="isEditingAllowed && !inEditMode"
-        class="ced-edit-button-content-spacer"
-      ></div>
-      <q-list no-border>
-
-        <!-- date / time -->
-        <q-item multiline>
-          <q-item-section avatar>
-            <q-icon name="access_time"/>
-          </q-item-section>
-
-          <!-- edit mode -->
-          <q-item-section v-if="isEditingAllowed && inEditMode">
-
-            <div class="row items-center gutter-xs">
-              <div>
-                <q-field>
-                  <q-date
-                    v-model="startDateObject"
-                    inverted-light
-                    :color="fieldColor"
-                    class="no-shadow"
-                    format="MMM D, YYYY"
-                  />
-                </q-field>
-
-              </div>
-
-              <div v-if="!editEventObject.start.isAllDay">
-                <q-field>
-                  <q-time
-                    v-model="startTimeObject"
-                    type="time"
-                    inverted-light
-                    :color="fieldColor"
-                    class="no-shadow"
-                  />
-                </q-field>
+    <q-card class="calendar-event-detail">
+      <q-toolbar>
+        <q-toolbar-title>
+          <!--{{ eventObject.summary }}-->
+        </q-toolbar-title>
 
-              </div>
-              <div>to</div>
-              <div>
-                <q-field>
-                  <q-date
-                    v-model="endDateObject"
-                    inverted-light
-                    :color="fieldColor"
-                    class="no-shadow"
-                    format="MMM D, YYYY"
+        <q-btn
+          v-if="isEditingAllowed && !inEditMode"
+          flat
+          round
+          dense
+          icon="edit"
+          @click="startEditMode"
+        />
+        <div class="ced-close-button-left-spacer"></div>
+        <q-btn
+          flat
+          round
+          dense
+          icon="close"
+          v-close-dialog
+        />
+      </q-toolbar>
+
+      <q-card-section class="ced-q-card-main">
+        <div class="ced-content">
+          <q-list no-border>
+
+            <!-- title -->
+            <q-item>
+              <!-- left side color bar -->
+              <q-item-section
+                avatar
+                class="ced-avatar-column"
+              >
+                <div :class="getTopColorClasses"></div>
+              </q-item-section>
+              <q-item-section class="NOrow">
+                <div
+                  v-if="isEditingAllowed && inEditMode"
+                  class="ced-top-title ced-event-title"
+                >
+                  <q-input
+                    v-model="editEventObject.summary"
+                    label="Summary"
+                    stack-label
+                    filled
+                    bottom-slots
                   />
-                </q-field>
-
-              </div>
-
-              <div v-if="!editEventObject.start.isAllDay">
-                <q-field>
-                  <q-time
-                    v-model="endTimeObject"
-                    inverted-light
-                    :color="fieldColor"
-                    class="no-shadow"
+                </div>
+                <div
+                  v-else
+                  class="ced-event-title"
+                >
+                  {{ eventObject.summary }}
+                </div>
+
+                <!-- date/time edit mode -->
+                <template v-if="isEditingAllowed && inEditMode">
+                  <div class="row items-center q-gutter-x-md no-wrap">
+                    <field-date
+                      v-model="startDateObject"
+                      label="Start date"
+                      stack-label
+                    />
+                    <template v-if="!editEventObject.start.isAllDay">
+                      <field-time
+                        v-model="startTimeObject"
+                        label="Time"
+                        stack-label
+                      />
+                    </template>
+                  </div>
+                  <div class="row items-center q-gutter-x-md no-wrap">
+                    <field-date
+                      label="End date"
+                      stack-label
+                      v-model="endDateObject"
+                    />
+                    <template v-if="!editEventObject.start.isAllDay">
+                      <field-time
+                        v-model="endTimeObject"
+                        label="Time"
+                        stack-label
+                      />
+                    </template>
+                  </div>
+                  <!-- all-day -->
+                  <q-checkbox
+                    label="All day"
+                    v-model="editEventObject.start.isAllDay"
+                    @input="$forceUpdate()"
+                    :toggle-indeterminate="false"
                   />
-                </q-field>
-
-              </div>
-
-            </div>
-
-            <!-- all-day -->
-            <q-field>
-              <q-checkbox
-                label="All day"
-                v-model="editEventObject.start.isAllDay"
-                @input="$forceUpdate()"
-                :toggle-indeterminate="false"
-              />
-            </q-field>
-
-          </q-item-section>
-
-          <!-- display mode -->
-          <q-item-section v-else>
-            <div
-              v-if="eventObject.start && eventObject.start.dateObject"
-              class="ced-list-title"
-            >
-              {{ formatDate(eventObject.start.dateObject, 'DATE_HUGE', true) }}
-              <template
-                v-if="eventObject.end &&
-                  eventObject.end.dateObject &&
-                  eventObject.start.isAllDay &&
-                  formatDate(eventObject.start.dateObject, 'DATE_SHORT', true) !== formatDate(eventObject.end.dateObject, 'DATE_SHORT', true)"
-              >
-                -
-                {{ formatDate(eventObject.end.dateObject, 'DATE_HUGE', true) }}
-              </template>
-            </div>
-            <div
-              v-if="eventObject.end &&
-                eventObject.end.dateObject &&
-                eventObject.start.isAllDay !== true"
-              class="ced-list-subtitle"
+                </template>
+                <!-- date/time display mode -->
+                <template v-else>
+                  <div
+                    v-if="eventObject.start && eventObject.start.dateObject"
+                    class="ced-list-title"
+                  >
+                    {{ formatDate(eventObject.start.dateObject, 'DATE_HUGE', true) }}
+                    <template
+                      v-if="eventObject.end &&
+                        eventObject.end.dateObject &&
+                        eventObject.start.isAllDay &&
+                        formatDate(eventObject.start.dateObject, 'DATE_SHORT', true) !== formatDate(eventObject.end.dateObject, 'DATE_SHORT', true)"
+                    >
+                      -
+                      {{ formatDate(eventObject.end.dateObject, 'DATE_HUGE', true) }}
+                    </template>
+                  </div>
+                  <div
+                    v-if="eventObject.end &&
+                      eventObject.end.dateObject &&
+                      eventObject.start.isAllDay !== true"
+                    class="ced-list-subtitle"
+                  >
+                    {{ formatDate(eventObject.start.dateObject, 'TIME_SIMPLE', true) }}
+                    -
+                    {{ formatDate(eventObject.end.dateObject, 'TIME_SIMPLE', true) }}
+                  </div>
+                </template>
+
+                <!-- date / time -->
+              </q-item-section>
+            </q-item>
+
+            <!-- location -->
+            <q-item v-if="isEditingAllowed && inEditMode">
+              <q-item-section avatar>
+                <q-icon
+                  name="location_on"
+                  :color="eventColor"
+                />
+              </q-item-section>
+              <q-item-section class="ced-list-title">
+                <q-input
+                  v-model="editEventObject.location"
+                  label="Location"
+                  stack-label
+                  filled
+                />
+              </q-item-section>
+            </q-item>
+            <q-item v-else-if="textExists('location')">
+              <q-item-section avatar>
+                <q-icon
+                  name="location_on"
+                  :color="eventColor"
+                />
+              </q-item-section>
+              <q-item-section class="ced-list-title">
+                {{ eventObject.location }}
+              </q-item-section>
+            </q-item>
+
+            <!-- resources -->
+            <q-item
+              v-if="countResources > 0"
             >
-              {{ formatDate(eventObject.start.dateObject, 'TIME_SIMPLE', true) }}
-              -
-              {{ formatDate(eventObject.end.dateObject, 'TIME_SIMPLE', true) }}
-            </div>
-          </q-item-section>
-        </q-item>
-
-        <!-- location -->
-        <q-item v-if="isEditingAllowed && inEditMode">
-          <q-item-section avatar>
-            <q-icon name="location_on" />
-          </q-item-section>
-          <q-item-section class="ced-list-title">
-            <q-input
-              v-model="editEventObject.location"
-              float-label="Location"
-              inverted-light
-              :color="fieldColor"
-              class="no-shadow"
-            />
-          </q-item-section>
-        </q-item>
-        <q-item v-else-if="textExists('location')">
-          <q-item-section avatar>
-            <q-icon name="location_on" />
-          </q-item-section>
-          <q-item-section class="ced-list-title">
-            {{ eventObject.location }}
-          </q-item-section>
-        </q-item>
-
-        <!-- resources -->
-        <q-item
-          v-if="countResources > 0"
-        >
-          <q-item-section avatar>
-            <q-icon name="business"/>
-          </q-item-section>
-          <q-item-section>
-            <template v-if="thisAttendee.resource">
-              <template v-if="thisAttendee.resource">
-                <q-item
-                  dense
+              <q-item-section avatar>
+                <q-icon
+                  name="business"
+                  :color="eventColor"
+                />
+              </q-item-section>
+              <q-item-section>
+                <div
                   v-for="thisAttendee in eventObject.attendees"
                   :key="thisAttendee.id"
-                  class="ced-nested-item"
                 >
-                  {{ thisAttendee.displayName }}
-                </q-item>
-              </template>
-            </template>
-          </q-item-section>
-        </q-item>
-
-        <!-- attendees -->
-        <q-item
-          multiline
-          v-if="countAttendees > 0"
-        >
-          <q-item-section avatar>
-            <q-icon name="people" />
-          </q-item-section>
-          <q-item-section class="ced-list-title">
-
-            <q-item-section>
-              {{ countAttendees }} guest<template v-if="countAttendees > 1">s</template>
-            </q-item-section>
-
-            <!-- guest list -->
-            <q-item-section>
-              <template v-if="!thisAttendee.resource">
-                <q-item
-                  dense
+                  <q-item
+                    dense
+                    v-if="dashHas(thisAttendee, 'resource') && thisAttendee.resource"
+                    class="ced-nested-item"
+                  >
+                    {{ thisAttendee.displayName }}
+                  </q-item>
+                </div>
+              </q-item-section>
+            </q-item>
+
+            <!-- attendees -->
+            <q-item
+              multiline
+              v-if="countAttendees > 0"
+            >
+              <q-item-section avatar>
+                <q-icon
+                  name="people"
+                  :color="eventColor"
+                />
+              </q-item-section>
+              <q-item-section class="ced-list-title">
+
+                <div>
+                  {{ countAttendees }} guest<template v-if="countAttendees > 1">s</template>
+                </div>
+
+                <!-- guest list -->
+                <div class="row">
+                <template
                   v-for="thisAttendee in eventObject.attendees"
-                  :key="thisAttendee.id"
-                  class="ced-nested-item"
                 >
-                  <q-item-section
-                    avatar
-                    inverted
-                    class="ced-small-inverted-icon"
-                  />
-                  <q-icon name="person" />
-                  <q-item-section class="ced-list-title">
+                  <q-chip
+                    :key="thisAttendee.id"
+                    v-if="!(dashHas(thisAttendee, 'resource') && thisAttendee.resource)"
+                  >
+                    <q-avatar icon="person" :color="eventColor" />
                     <template v-if="thisAttendee.displayName && thisAttendee.displayName.length > 0">
                       {{ thisAttendee.displayName }}
                     </template>
                     <template v-else>
                       {{ thisAttendee.email }}
                     </template>
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-item-section>
-
-          </q-item-section>
-        </q-item>
-
-        <!-- description -->
-        <q-item v-if="isEditingAllowed && inEditMode">
-          <q-item-section avatar>
-            <q-icon name="format_align_left"/>
-          </q-item-section>
-          <q-item-section>
-            <q-field v-if="renderHtml">
-              <q-editor
-                v-model="editEventObject.description"
-                float-label="Description"
-                inverted-light
-                :color="fieldColor"
-                class="no-shadow"
-              />
-            </q-field>
-            <q-field v-else>
-              <q-input
-                v-model="editEventObject.description"
-                float-label="Description"
-                inverted-light
-                :color="fieldColor"
-                class="no-shadow"
-              />
-            </q-field>
+                  </q-chip>
+                </template>
+                </div>
+
+              </q-item-section>
+            </q-item>
+
+            <!-- description -->
+            <q-item v-if="isEditingAllowed && inEditMode">
+              <q-item-section avatar>
+                <q-icon
+                  name="format_align_left"
+                  :color="eventColor"
+                />
+              </q-item-section>
+              <q-item-section>
+                <template v-if="renderHtml">
+                  <q-editor v-model="editEventObject.description"/>
+                </template>
+                <template v-else>
+                  <q-input
+                    v-model="editEventObject.description"
+                    label="Description"
+                    stack-label
+                    type="textarea"
+                    filled
+                  />
+                </template>
+              </q-item-section>
+            </q-item>
+            <q-item
+              v-else-if="textExists('description')"
+              multiline
+            >
+              <q-item-section avatar>
+                <q-icon
+                  name="format_align_left"
+                  :color="eventColor"
+                />
+              </q-item-section>
+              <q-item-section class="ced-list-title">
+                <template v-if="renderHtml">
+                  <div v-html="eventObject.description"></div>
+                </template>
+                <template v-else>
+                  {{ eventObject.description }}
+                </template>
+              </q-item-section>
+            </q-item>
+
+          </q-list>
+        </div>
 
-          </q-item-section>
-        </q-item>
-        <q-item
-          v-else-if="textExists('description')"
-          multiline
+        <!-- editing close buttons -->
+        <div
+          v-if="isEditingAllowed && inEditMode"
+          class="row justify-end q-pa-md q-gutter-sm"
         >
-          <q-item-section avatar>
-            <q-icon icon="format_align_left"/>
-          </q-item-section>
-          <q-item-section class="ced-list-title">
-            <template v-if="renderHtml">
-              <div v-html="eventObject.description"></div>
-            </template>
-            <template v-else>
-              {{ eventObject.description }}
-            </template>
-          </q-item-section>
-        </q-item>
-
-      </q-list>
-    </div>
+          <div>
+            <q-btn
+              color="warning"
+              icon="cancel"
+              label="Cancel"
+              @click="__close()"
+            />
+          </div>
+          <div>
+            <q-btn
+              color="positive"
+              icon="check"
+              label="Save"
+              @click="__save()"
+            />
+          </div>
 
-    <!-- editing close buttons -->
-    <div
-      v-if="isEditingAllowed && inEditMode"
-      class="row justify-end q-pa-md gutter-sm"
-    >
-      <div>
-        <q-btn
-          color="warning"
-          icon="cancel"
-          label="Cancel"
-          @click="__close()"
-        />
-      </div>
-      <div>
-        <q-btn
-          color="positive"
-          icon="check"
-          label="Save"
-          @click="__save()"
-        />
-      </div>
+        </div>
+      </q-card-section>
 
-    </div>
+    </q-card>
 
   </q-dialog>
 
@@ -338,19 +362,31 @@
     QList,
     QItem,
     QItemSection,
+    QAvatar,
+    QChip,
     QIcon,
     QDialog,
+    CloseDialog,
+    QCard,
+    QCardSection,
+    QToolbar,
+    QToolbarTitle,
+    // QPopupProxy,
     QBtn,
-    QField,
+    // QField,
     QCheckbox,
-    QDate,
-    QTime,
+    // QDate,
+    // QTime,
     QInput,
     QEditor
   } from 'quasar'
   import {
     CalendarMixin, EventPropsMixin
   } from './mixins'
+  import {
+    FieldDate,
+    FieldTime
+  } from './fields'
   import DateTime from 'luxon/src/datetime'
   export default {
     name: 'CalendarEventDetail',
@@ -365,15 +401,27 @@
       QList,
       QItem,
       QItemSection,
+      QAvatar,
+      QChip,
       QIcon,
       QDialog,
+      QCard,
+      QCardSection,
+      QToolbar,
+      QToolbarTitle,
+      // QPopupProxy,
       QBtn,
-      QField,
+      // QField,
       QCheckbox,
-      QDate,
-      QTime,
+      // QDate,
+      // QTime,
       QInput,
-      QEditor
+      QEditor,
+      FieldDate,
+      FieldTime
+    },
+    directives: {
+      CloseDialog
     },
     data () {
       return {
@@ -388,12 +436,13 @@
     },
     computed: {
       countAttendees: function () {
+        console.debug('countAttendees called')
         if (!dashHas(this.eventObject, 'attendees')) {
           return 0
         }
         let count = this.eventObject.attendees.length
         for (let thisAttendee of this.eventObject.attendees) {
-          if (thisAttendee.resource) {
+          if (dashHas(thisAttendee, 'resource') && thisAttendee.resource) {
             count--
           }
         }
@@ -405,7 +454,8 @@
         }
         let count = 0
         for (let thisAttendee of this.eventObject.attendees) {
-          if (thisAttendee.resource) {
+          console.debug('thisAttendee = ', thisAttendee)
+          if (dashHas(thisAttendee, 'resource') && thisAttendee.resource) {
             count++
           }
         }
@@ -414,13 +464,20 @@
       getTopColorClasses: function () {
         return this.addCssColorClasses(
           {
-            'ced-top': true,
+            'full-width': true,
+            'full-height': true,
             'q-pr-md': true,
-            'q-py-md': true,
-            'relative-position': true
+            // 'q-py-md': true,
+            // 'q-py-none': true,
+            // 'q-mt-sm': true,
+            'relative-position': true,
+            'ced-top': true
           },
           this.eventObject)
       },
+      eventColor: function () {
+        return this.getEventColor(this.eventObject, 'color')
+      },
       getEventStyle: function () {
         return {
           // 'background-color': this.backgroundColor,
@@ -445,6 +502,7 @@
 
     },
     methods: {
+      dashHas: dashHas,
       textExists: function (fieldLocation) {
         return (
           dashHas(this.eventObject, fieldLocation) &&
@@ -538,11 +596,22 @@
   $forcedLeftMargin = $topSidePadding + $listSideItemWidth + $listSideItemSpace
 
   .calendar-event-detail
+    max-width 80vw !important
+    .ced-close-button-left-spacer
+      width 16px
+    .ced-event-title
+      font-size 1.5em
+      font-weight 500
     .ced-list-title
       font-size 1em
     .ced-list-subtitle
       font-size .8em
       opacity 0.8
+    .ced-q-card-main
+      padding-top 0
+    .ced-avatar-column
+      min-width 40px
+      margin-right 16px
     .ced-top
       /*padding .25em 0 1em*/
       .ced-top-title
diff --git a/src/components/calendar/fields/FieldDate.vue b/src/components/calendar/fields/FieldDate.vue
new file mode 100644
index 0000000..01efe4b
--- /dev/null
+++ b/src/components/calendar/fields/FieldDate.vue
@@ -0,0 +1,52 @@
+<template>
+  <q-input
+    v-bind:value="value"
+    v-on:input="$emit('input', $event.target.value)"
+    mask="date"
+    :rules="['date']"
+    :placeholder="placeholder"
+    :label="label"
+    :stack-label="stackLabel"
+    :dense="dense"
+    filled
+  >
+    <template v-slot:append>
+      <q-icon name="event" class="cursor-pointer">
+        <q-popup-proxy>
+          <q-date
+            v-bind:value="value"
+            v-on:input="$emit('input', $event.target.value)"
+          />
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script>
+  import {
+    QIcon,
+    QPopupProxy,
+    QDate,
+    QInput
+  } from 'quasar'
+  export default {
+    name: 'FieldDate',
+    props: {
+      value: { required: true },
+      placeholder: String,
+      label: String,
+      stackLabel: Boolean,
+      dense: Boolean
+    },
+    components: {
+      QIcon,
+      QPopupProxy,
+      QDate,
+      QInput
+    },
+    data () {
+      return {}
+    }
+  }
+</script>
diff --git a/src/components/calendar/fields/FieldTime.vue b/src/components/calendar/fields/FieldTime.vue
new file mode 100644
index 0000000..90b2ab7
--- /dev/null
+++ b/src/components/calendar/fields/FieldTime.vue
@@ -0,0 +1,52 @@
+<template>
+  <q-input
+    v-bind:value="value"
+    v-on:input="$emit('input', $event.target.value)"
+    mask="time"
+    :rules="['time']"
+    :placeholder="placeholder"
+    :label="label"
+    :stack-label="stackLabel"
+    :dense="dense"
+    filled
+  >
+    <template v-slot:append>
+      <q-icon name="access_time" class="cursor-pointer">
+        <q-popup-proxy>
+          <q-time
+            v-bind:value="value"
+            v-on:input="$emit('input', $event.target.value)"
+          />
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script>
+  import {
+    QIcon,
+    QPopupProxy,
+    QTime,
+    QInput
+  } from 'quasar'
+  export default {
+    name: 'FieldTime',
+    props: {
+      value: { required: true },
+      placeholder: String,
+      label: String,
+      stackLabel: Boolean,
+      dense: Boolean
+    },
+    components: {
+      QIcon,
+      QPopupProxy,
+      QTime,
+      QInput
+    },
+    data () {
+      return {}
+    }
+  }
+</script>
diff --git a/src/components/calendar/fields/index.js b/src/components/calendar/fields/index.js
new file mode 100644
index 0000000..f05df7a
--- /dev/null
+++ b/src/components/calendar/fields/index.js
@@ -0,0 +1,7 @@
+import FieldDate from './FieldDate'
+import FieldTime from './FieldTime'
+
+export {
+  FieldDate,
+  FieldTime
+}
diff --git a/src/layouts/LayoutDefault.vue b/src/layouts/LayoutDefault.vue
index 192e001..324a3d7 100644
--- a/src/layouts/LayoutDefault.vue
+++ b/src/layouts/LayoutDefault.vue
@@ -2,79 +2,14 @@
   <q-layout view="lHh Lpr lFf">
     <q-header elevated class="glossy">
       <q-toolbar>
-        <q-btn
-          flat
-          dense
-          round
-          @click="leftDrawerOpen = !leftDrawerOpen"
-          aria-label="Menu"
-        >
-          <q-icon name="menu" />
-        </q-btn>
 
         <q-toolbar-title>
-          Quasar App
+          Quasar Calendar v{{ calendarVersion }}
         </q-toolbar-title>
 
         <div>Quasar v{{ $q.version }}</div>
       </q-toolbar>
     </q-header>
-
-    <q-drawer
-      v-model="leftDrawerOpen"
-      bordered
-      content-class="bg-grey-2"
-    >
-      <q-list>
-        <q-item-label header>Essential Links</q-item-label>
-        <q-item clickable tag="a" target="_blank" href="http://v1.quasar-framework.org">
-          <q-item-section avatar>
-            <q-icon name="school" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Docs</q-item-label>
-            <q-item-label caption>v1.quasar-framework.org</q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
-          <q-item-section avatar>
-            <q-icon name="code" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Github</q-item-label>
-            <q-item-label caption>github.com/quasarframework</q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item clickable tag="a" target="_blank" href="http://chat.quasar-framework.org">
-          <q-item-section avatar>
-            <q-icon name="chat" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Discord Chat Channel</q-item-label>
-            <q-item-label caption>chat.quasar-framework.org</q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item clickable tag="a" target="_blank" href="https://forum.quasar-framework.org">
-          <q-item-section avatar>
-            <q-icon name="record_voice_over" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Forum</q-item-label>
-            <q-item-label caption>forum.quasar-framework.org</q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
-          <q-item-section avatar>
-            <q-icon name="rss_feed" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Twitter</q-item-label>
-            <q-item-label caption>@quasarframework</q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </q-drawer>
-
     <q-page-container>
       <router-view />
     </q-page-container>
@@ -86,39 +21,30 @@
     openURL,
     QLayout,
     QHeader,
-    QDrawer,
     QPageContainer,
     QToolbar,
-    QToolbarTitle,
-    QBtn,
-    QIcon,
-    QList,
-    QItem,
-    QItemSection,
-    QItemLabel
+    QToolbarTitle
   } from 'quasar'
-
+  const pckg = require('../../package.json')
   export default {
     name: 'LayoutDefault',
     components: {
       QLayout,
       QHeader,
-      QDrawer,
       QPageContainer,
       QToolbar,
-      QToolbarTitle,
-      QBtn,
-      QIcon,
-      QList,
-      QItem,
-      QItemSection,
-      QItemLabel
+      QToolbarTitle
     },
     data () {
       return {
         leftDrawerOpen: false
       }
     },
+    computed: {
+      calendarVersion: function () {
+        return pckg.version
+      }
+    },
     methods: {
       openURL
     }