feat(QDate): add event rendering function quasarframework#7076, quasa…

…rframework#7290
pdanpdan · Jun 24, 2020 · cf65669 · cf65669
1 parent 5cbd538
commit cf65669
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 4 deletions.
diff --git a/ui/dev/src/pages/form/date.vue b/ui/dev/src/pages/form/date.vue
@@ -131,6 +131,14 @@
           :event-color="eventColor"
           :style="style"
         />
+
+        <q-date
+          v-model="date"
+          v-bind="props"
+          :events="eventFn"
+          :event-render-fn="eventRenderFn"
+          :style="style"
+        />
       </div>
 
       <div class="text-h6">
@@ -327,8 +335,25 @@
   </div>
 </template>
 
+<style lang="sass">
+.test-date__event-container
+  position: absolute
+  bottom: -4px
+  left: 50%
+  height: 12px
+  transform: translate3d(-50%, 0, 0)
+
+  .test-date__event
+    width: 12px
+    border-radius: 6px
+    margin: 0 1px
+</style>
+
 <script>
 import languages from 'quasar/lang/index.json'
+import { event, QMenu, QTooltip } from 'quasar'
+
+const { stopAndPrevent } = event
 
 const localeOptions = languages.map(lang => ({
   label: lang.nativeName,
@@ -430,6 +455,44 @@ export default {
       return date[9] % 2 === 0 ? 'teal' : 'orange'
     },
 
+    eventRenderFn (h, date) {
+      if (date[9] % 2 === 0) {
+        return h('div', { staticClass: 'test-date__event-container row no-wrap' }, [
+          h('div', {
+            staticClass: 'test-date__event bg-red',
+            on: {
+              click: stopAndPrevent
+            }
+          }, [
+            h(QMenu, {
+              props: {
+                contentClass: 'q-pa-md',
+                anchor: 'bottom middle',
+                self: 'top middle',
+                offset: [ 32, 0 ]
+              }
+            }, [
+              h('strong', [ `Event on ${date}` ])
+            ])
+          ]),
+          h('div', { staticClass: 'test-date__event bg-green' })
+        ])
+      }
+      return h('div', { staticClass: 'test-date__event-container row no-wrap' }, [
+        h('div', { staticClass: 'test-date__event bg-orange' }, [
+          h(QTooltip, {
+            props: {
+              anchor: 'bottom middle',
+              self: 'top middle',
+              offset: [ 32, 0 ]
+            }
+          }, [
+            h('strong', [ `Event on ${date}` ])
+          ])
+        ])
+      ])
+    },
+
     optionsFn (date) {
       return date[9] % 3 === 0
     },

diff --git a/ui/src/components/date/QDate.js b/ui/src/components/date/QDate.js
@@ -49,6 +49,7 @@ export default Vue.extend({
 
     events: [Array, Function],
     eventColor: [String, Function],
+    eventRenderFn: Function,
 
     options: [Array, Function],
 
@@ -198,7 +199,7 @@ export default Vue.extend({
     evtColor () {
       return typeof this.eventColor === 'function'
         ? this.eventColor
-        : date => this.eventColor
+        : () => this.eventColor
     },
 
     isSelectable () {
@@ -362,14 +363,14 @@ export default Vue.extend({
         }
         else {
           const event = this.events !== void 0 && this.evtFn(day) === true
-            ? this.evtColor(day)
+            ? (this.eventRenderFn === void 0 ? this.evtColor(day) : this.eventRenderFn)
             : false
 
           const flat = rangeFlags === void 0 ||
             rangeFlags.outline === true ||
             (rangeFlags.start !== true && rangeFlags.end !== true)
 
-          const config = { i, in: true, flat, event, range }
+          const config = { i, day, in: true, flat, event, range }
 
           if (flat === false) {
             config.unelevated = true
@@ -683,7 +684,9 @@ export default Vue.extend({
                       mouseenter: () => { this.__selectionEndHover(day.i) }
                     })
                   }, day.event !== false ? [
-                    h('div', { staticClass: 'q-date__event bg-' + day.event })
+                    typeof day.event === 'function'
+                      ? day.event(h, day.day)
+                      : h('div', { staticClass: 'q-date__event bg-' + day.event })
                   ] : null)
                   : h('div', [ day.i ])
               ])))

diff --git a/ui/src/components/date/QDate.json b/ui/src/components/date/QDate.json
@@ -89,6 +89,15 @@
       "category": "style"
     },
 
+    "event-render-fn": {
+      "type": "Function",
+      "desc": "Render function for the events, it receives the createElement (h) as first parameter and the date as a String and must return a VNode",
+      "examples": [
+        ":event-render-fn=\"(h, date) => h('div', { staticClass: 'absolute-top-left text-red' }, [ '⋆' ])\""
+      ],
+      "category": "content"
+    },
+
     "options": {
       "type": [ "Array", "Function" ],
       "desc": "Optionally configure the days that are selectable; If using a function, it receives the date as a String and must return a Boolean (is date acceptable or not); If using a function then for best performance, reference it from your scope and do not define it inline",