Revert "feat(QDate): add day slot for content #7076, #7290 (#7315)"

This reverts commit 775e958.
quasarframework · Jul 10, 2020 · 84df8bf · 84df8bf
1 parent 4e2c448
commit 84df8bf
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 267 deletions.
diff --git a/docs/src/examples/QDate/DaySlot.vue b/docs/src/examples/QDate/DaySlot.vue
diff --git a/docs/src/pages/vue-components/date.md b/docs/src/pages/vue-components/date.md
@@ -108,12 +108,6 @@ The first example is using an array and the second example is using a function.
 
 <doc-example title="Event color" file="QDate/EventColor" overflow />
 
-### Day scoped slot
-
-You can use the `day` scoped slot to render custom event markers or tooltips specific to each day.
-
-<doc-example title="Day slot" file="QDate/DaySlot" overflow />
-
 ### Limiting options
 
 * You can use the `options` prop to limit user selection to certain times.

diff --git a/ui/dev/src/pages/form/date.vue b/ui/dev/src/pages/form/date.vue
@@ -133,35 +133,6 @@
         />
       </div>
 
-      <div class="text-h6">
-        Day slot
-      </div>
-      <div class="q-gutter-md">
-        <q-date
-          class="day-slot--test"
-          v-model="date"
-          v-bind="props"
-          :events="eventMultiFn"
-          :event-color="eventMultiDetails"
-          :style="style"
-        >
-          <template v-slot:day="day">
-            <small v-if="day.fill === true" class="text-grey-5">
-              {{ day.i }}
-            </small>
-            <div v-else-if="day.event" class="day-slot__events--test absolute-full">
-              <div
-                v-for="({ color, label, details }, index) in day.event"
-                :key="index"
-                :class="'bg-' + color"
-              >
-                <q-tooltip>{{ label }}</q-tooltip>
-              </div>
-            </div>
-          </template>
-        </q-date>
-      </div>
-
       <div class="text-h6">
         Limited options
       </div>
@@ -356,39 +327,6 @@
   </div>
 </template>
 
-<style lang="sass">
-.day-slot__events--test
-  border-radius: 50%
-  mix-blend-mode: overlay
-
-  > div
-    position: absolute
-    left: 0
-    right: 0
-    height: 50%
-
-  > div:first-child
-    top: 0
-    border-top-left-radius: 15px
-    border-top-right-radius: 15px
-
-  > div:last-child
-    bottom: 0
-    border-bottom-left-radius: 15px
-    border-bottom-right-radius: 15px
-
-  > div:first-child:last-child
-    height: 100%
-
-.day-slot--test
-  .q-btn--unelevated
-    .day-slot__events--test
-      border: 2px solid transparent
-
-  .q-date__calendar-item--fill
-    visibility: visible
-</style>
-
 <script>
 import languages from 'quasar/lang/index.json'
 
@@ -492,30 +430,6 @@ export default {
       return date[9] % 2 === 0 ? 'teal' : 'orange'
     },
 
-    eventMultiFn (date) {
-      return [ 1, 3 ].indexOf(date[9] % 6) > -1
-    },
-
-    eventMultiDetails (date) {
-      return date[9] % 6 === 1
-        ? [
-          {
-            color: 'red',
-            label: `Event on ${date}`
-          }
-        ]
-        : [
-          {
-            color: 'orange',
-            label: `Task on ${date}`
-          },
-          {
-            color: 'green',
-            label: `Recurring 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
@@ -230,14 +230,14 @@ export default Vue.extend({
         const day = prefix + pad(i)
 
         if (this.options !== void 0 && this.isInSelection(day) !== true) {
-          res.push({ i, day })
+          res.push({ i })
         }
         else {
           const event = this.events !== void 0 && this.evtFn(day) === true
             ? this.evtColor(day)
             : false
 
-          res.push({ i, day, in: true, flat: true, event })
+          res.push({ i, in: true, flat: true, event })
         }
       }
 
@@ -470,15 +470,6 @@ export default Vue.extend({
     },
 
     __getCalendarView (h) {
-      const dayContentFn = this.$scopedSlots.day !== void 0
-        ? this.$scopedSlots.day
-        : day => (day.event !== false ? [
-          h('div', { staticClass: 'q-date__event bg-' + day.event })
-        ] : null)
-      const dayFillContentFn = this.$scopedSlots.day !== void 0
-        ? this.$scopedSlots.day
-        : day => h('div', [ day.i ])
-
       return [
         h('div', {
           key: 'calendar-view',
@@ -533,8 +524,10 @@ export default Vue.extend({
                       tabindex: this.computedTabindex
                     },
                     on: cache(this, 'day#' + day.i, { click: () => { this.__setDay(day.i) } })
-                  }, dayContentFn(day))
-                  : dayFillContentFn(day)
+                  }, day.event !== false ? [
+                    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
@@ -131,60 +131,6 @@
     }
   },
 
-  "scopedSlots": {
-    "day": {
-      "desc": "Override default day content slot; Suggestion: tooltips and / or multiple event markers",
-      "scope": {
-        "i": {
-          "type": "Number",
-          "desc": "The day number in month",
-          "examples": [ 23 ]
-        },
-        "day": {
-          "type": "String",
-          "desc": "Full date in YYYY/MM/DD form",
-          "examples": [ "20/05/2020" ]
-        },
-        "fill": {
-          "type": "Boolean",
-          "desc": "The day does not belong to the currently displayed month / year (no QBtn and hidden by default)"
-        },
-        "in": {
-          "type": "Boolean",
-          "desc": "The day is selectable (QBtn is not disabled)"
-        },
-        "today": {
-          "type": "Boolean",
-          "desc": "The day is today"
-        },
-        "unelevated": {
-          "type": "Boolean",
-          "desc": "The day is selected"
-        },
-        "flat": {
-          "type": "Boolean",
-          "desc": "The day is not selected"
-        },
-        "color": {
-          "type": "String",
-          "desc": "The color of the QBtn used for the day",
-          "examples": [ "primary" ]
-        },
-        "textColor": {
-          "type": "String",
-          "desc": "The text color of the QBtn used for the day",
-          "examples": [ "orange-2" ]
-        },
-        "event": {
-          "type": [ "Boolean", "String", "Any" ],
-          "desc": "Boolean false if there is no event for the day; The event-color or the value returned by the event-color function",
-          "examples": [ "red" ]
-        }
-      },
-      "addedIn": "v1.12.9"
-    }
-  },
-
   "events": {
     "input": {
       "extends": "input",