npm pu

Author: TobyMosque

README.md

@@ -161,6 +161,49 @@ We need help translating the language files. Below are listed the available ones
 
 ---
 
+# change default icons at Runtime
+default icons are reactive, so all components will update properly if you change the $qdtp.icons object.
+
+example 01: in a boot
+```js
+import { boot } from 'quasar/wrappers'
+
+export default boot(function ({ app }) {
+  app.qdtp.icons.date = 'mdi-calendar'
+  app.qdtp.icons.time = 'mdi-clock-outline'
+})
+```
+
+example 02: in a component
+```js
+export default {
+  mounted () {
+    this.$qdtp.icons.date = 'mdi-calendar'
+    this.$qdtp.icons.time = 'mdi-clock-outline'
+  }
+}
+```
+
+example 03: in a vuex module
+```js
+export default {
+  actions: {
+    updateIcons () {
+      this.$qdtp.icons.date = 'mdi-calendar'
+      this.$qdtp.icons.time = 'mdi-clock-outline'
+    }
+  }
+}
+```
+
+example 04: everywhere else
+```js
+import { icons } from 'quasar-app-extension-qdatetimepicker/src/component'
+
+icons.date = 'mdi-calendar'
+icons.time = 'mdi-clock-outline'
+```
+
 # QDatetimePicker Vue Properties
 | Vue Property | Type	|  Description |
 |---|---|---|
@@ -192,7 +235,9 @@ We need help translating the language files. Below are listed the available ones
 | mode | String | Display Mode (`date`, `time`, `datetime`) (default: `date`) |
 | format24h | Boolean | Show the timepicker in 24 hour format. The masked value will not be affected. |
 | display-value | Boolean or String | If the value is `true` or a `string`, the internal QInput will be readonly. If the value is `true` the calendar and numeric system used to format the date will not be forced to be the gregorian calendar and latin numbers. If value is a `string`, the format function will be ignored and the `display-value` will be used directly in the `input` (default: `false`) |
-| icon | String | The icon of the picker (default: `access_time` when the mode is `time`, otherwise `event`) |
+| icon | String | The icon of the picker (default: `access_time` when the mode is `time`, otherwise `event`) (obs: `date-icon` and/or `time-icon` props has a high priority) |
+| date-icon | String | The icon of the picker when the mode is equals to `date` or `datetime` (default: `event`) |
+| time-icon | String | The icon of the picker when the mode is equals to `time` (default: `access_time`) |
 | landscape | Boolean | Show the picker in landscape mode (default: false) |
 | today-btn | Boolean | Display a button that selects the current day (`date` and `datetime` modes only) (default: false) |
 | now-btn | Boolean | Display a button that selects the current time (`time` and `datetime` modes only) (default: false) |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-app-extension-qdatetimepicker",
-  "version": "1.0.0-rc.15",
+  "version": "1.0.0-rc.16",
   "description": "QDatetimePicker for Quasar",
   "author": "Tobias Mesquita <[email protected]>",
   "main": "src/index.js",

src/boot/qdatetimepicker.js

@@ -1,6 +1,21 @@
 // import 'q-datetimepicker-styl'
-import QDatetimePicker from 'quasar-app-extension-qdatetimepicker/src/component/QDatetimePicker.js'
+import { QDatetimePicker, icons } from 'quasar-app-extension-qdatetimepicker/src/component'
 
-export default ({ Vue, ssrContext }) => {
+export default ({ Vue, app, store, ssrContext }) => {
+  const options = { icons }
+  app.qdtp = options
+  if (store) {
+    store.$qdtp = options
+  }
   Vue.component('q-datetime-picker', QDatetimePicker({ ssrContext }))
+  Vue.mixin({
+    beforeCreate () {
+      const options = this.$options
+      if (options.qdtp) {
+        this.$qdtp = options.qdtp
+      } else if (options.parent) {
+        this.$qdtp = options.parent.$qdtp
+      }
+    }
+  })
 }

src/component/QDatetimePicker.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import * as meta from 'quasar-app-extension-qdatetimepicker/src/services/meta.js'
 import * as date from 'quasar-app-extension-qdatetimepicker/src/services/date.js'
-import Render from 'quasar-app-extension-qdatetimepicker/src/services/render.js'
+import Render, { icons } from 'quasar-app-extension-qdatetimepicker/src/services/render.js'
 
 import {
   dom,
@@ -53,6 +53,14 @@ const { value, clearable, ...props } = {
     type: String,
     default: undefined
   },
+  dateIcon: {
+    type: String,
+    default: undefined
+  },
+  timeIcon: {
+    type: String,
+    default: undefined
+  },
   defaultStandard: {
     type: String,
     default: 'iso',
@@ -370,3 +378,5 @@ export default function ({ ssrContext }) {
     }
   })
 }
+
+export { icons }

src/component/QDatetimePicker.json

@@ -118,6 +118,14 @@
       "type": [ "String" ],
       "desc": "The icon of the picker (default: 'access_time' when the mode is 'time', otherwise 'event')"
     },
+    "date-icon": {
+      "type": [ "String" ],
+      "desc": "The icon of the picker when the mode is equals to date (default: 'event')"
+    },
+    "time-icon": {
+      "type": [ "String" ],
+      "desc": "The icon of the picker when the mode is equals to time (default: 'access_time')"
+    },
     "landscape": {
       "type": [ "Boolean" ],
       "desc": "Show the picker in landscape mode (default: 'false')"

src/component/index.js

@@ -1,5 +1,6 @@
-import QDatetimePicker from './QDatetimePicker.js'
+import QDatetimePicker, { icons } from './QDatetimePicker.js'
 
 export {
-  QDatetimePicker
+  QDatetimePicker,
+  icons
 }

src/services/render.js

@@ -14,6 +14,12 @@ import {
   QTabPanel
 } from 'quasar'
 
+import Vue from 'vue'
+const icons = new Vue.observable({
+  date: 'event',
+  time: 'access_time'
+})
+
 const Render = function (self, h) {
   this.h = h
   this.self = self
@@ -146,10 +152,12 @@ Render.prototype.suffix = function () {
 
 Render.prototype.trigger = function () {
   let { h, self } = this
+  let icon = self.mode === 'time' ? self.timeIcon : self.dateIcon;
+  let _default = self.mode === 'time' ? icons.time : icons.date
   let trigger = h(QIcon, {
     staticClass: 'cursor-pointer',
     props: {
-      name: self.icon || (self.mode === 'time' ? 'access_time' : 'event')
+      name: icon || self.icon || _default
     }
   }, [this.popup()])
   return trigger
@@ -295,14 +303,14 @@ Render.prototype.tabsTitle = function () {
     h(QTab, {
       props: {
         name: 'date',
-        icon: 'event',
+        icon: self.dateIcon || icons.date,
         label: self.isoLang.dateTimePicker.date
       }
     }, []),
     h(QTab, {
       props: {
         name: 'time',
-        icon: 'access_time',
+        icon: self.timeIcon || icons.time,
         label: self.isoLang.dateTimePicker.time
       }
     }, [])
@@ -377,3 +385,4 @@ Render.prototype.time = function () {
 }
 
 export default Render
+export { icons }

test/app/package.json

@@ -18,14 +18,15 @@
     "test:unit:ui": "majestic"
   },
   "dependencies": {
-    "@quasar/extras": "^1.8.1",
+    "@quasar/extras": "^1.9.13",
     "axios": "^0.18.0",
-    "quasar": "^1.12.2",
+    "core-js": "^3.0.0",
+    "quasar": "^1.15.0",
     "vue-i18n": "^7.3.3"
   },
   "devDependencies": {
-    "@quasar/app": "^1.9.3",
-    "@quasar/quasar-app-extension-testing": "^1.0.0",
+    "@quasar/app": "^2.1.14",
+    "@quasar/quasar-app-extension-testing": "^1.0.3",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.10.0",
@@ -34,17 +35,23 @@
     "majestic": "^1.2.24",
     "quasar-app-extension-qdatetimepicker": "link:../../",
     "strip-ansi": "=3.0.1",
-    "wallaby-vue-compiler": "^1.0.3"
+    "wallaby-vue-compiler": "^1.0.3",
+    "workbox-webpack-plugin": "^5.0.0"
   },
   "engines": {
     "node": ">= 8.9.0",
     "npm": ">= 5.6.0",
     "yarn": ">= 1.6.0"
   },
   "browserslist": [
-    "last 1 version, not dead, ie >= 11"
-  ],
-  "resolutions": {
-    "ajv": "6.8.1"
-  }
+    "last 10 Chrome versions",
+    "last 10 Firefox versions",
+    "last 4 Edge versions",
+    "last 7 Safari versions",
+    "last 8 Android versions",
+    "last 8 ChromeAndroid versions",
+    "last 8 FirefoxAndroid versions",
+    "last 10 iOS versions",
+    "last 5 Opera versions"
+  ]
 }