quasar 2.1.0

package/src/components/date/QDate.json

@@ -0,0 +1,439 @@
+{
+  "mixins": [ "components/date/use-datetime" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/date"
+  },
+
+  "props": {
+    "model-value": {
+      "extends": "model-value",
+      "type": [ "String", "Array", "Object" ],
+      "desc": "Date(s) of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
+      "examples": [
+        "v-model=\"myDate\"",
+        "v-model=\"[myDate1, myDate2]\"",
+        "v-model=\"[{ from: myDateFrom, to: myDateTo }]\"",
+        "v-model=\"[myDate1, { from: myDateFrom, to: myDateTo }, myDate2]\""
+      ]
+    },
+
+    "title": {
+      "type": "String",
+      "desc": "When specified, it overrides the default header title; Makes sense when not in 'minimal' mode",
+      "examples": [ "Birthday" ],
+      "category": "content"
+    },
+
+    "subtitle": {
+      "type": "String",
+      "desc": "When specified, it overrides the default header subtitle; Makes sense when not in 'minimal' mode",
+      "examples": [ "John Doe" ],
+      "category": "content"
+    },
+
+    "default-year-month": {
+      "type": "String",
+      "desc": "The default year and month to display (in YYYY/MM format) when model is unfilled (undefined or null); Please ensure it is within the navigation min/max year-month (if using them)",
+      "examples": [ "1986/02" ],
+      "category": "model"
+    },
+
+    "mask": {
+      "default": "YYYY/MM/DD",
+      "examples": [ "YYYY-MM-DD", "MMMM Do, YYYY", "YYYY-MM-DD HH:mm:ss" ]
+    },
+
+    "default-view": {
+      "type": "String",
+      "desc": "The view which will be displayed by default",
+      "default": "Calendar",
+      "values": [ "Calendar", "Months", "Years" ],
+      "category": "model"
+    },
+
+    "years-in-month-view": {
+      "type": "Boolean",
+      "desc": "Show the years selector in months view",
+      "category": "behavior"
+    },
+
+    "events": {
+      "type": [ "Array", "Function" ],
+      "desc": "A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not); If using a function then for best performance, reference it from your scope and do not define it inline",
+      "examples": [
+        ":events=\"['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']\"",
+        ":events=\"date => date[9] % 3 === 0\""
+      ],
+      "category": "model"
+    },
+
+    "event-color": {
+      "type": [ "String", "Function" ],
+      "desc": "Color name (from the Quasar Color Palette); If using a function, it receives the date as a String and must return a String (color for the received date); If using a function then for best performance, reference it from your scope and do not define it inline",
+      "examples": [
+        "teal-10",
+        ":event-color=\"(date) => date[9] % 2 === 0 ? 'teal' : 'orange'\""
+      ],
+      "category": "style"
+    },
+
+    "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; Incompatible with 'range' prop",
+      "examples": [
+        ":options=\"['2018/11/05', '2018/11/12', '2018/11/19', '2018/11/26' ]\"",
+        ":options=\"date => date[9] % 3 === 0\"",
+        ":options=\"date => date >= '2018/11/03' && date <= '2018/11/15'\""
+      ],
+      "category": "model"
+    },
+
+    "navigation-min-year-month": {
+      "type": "String",
+      "desc": "Lock user from navigating below a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop",
+      "examples": [ "2020/07" ],
+      "category": "selection"
+    },
+
+    "navigation-max-year-month": {
+      "type": "String",
+      "desc": "Lock user from navigating above a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop",
+      "examples": [ "2020/10" ],
+      "category": "selection"
+    },
+
+    "no-unset": {
+      "type": "Boolean",
+      "desc": "Remove ability to unselect a date; It does not apply to selecting a range over already selected dates",
+      "category": "selection"
+    },
+
+    "first-day-of-week": {
+      "type": [ "String", "Number" ],
+      "desc": "Sets the day of the week that is considered the first day (0 - Sunday, 1 - Monday, ...); This day will show in the left-most column of the calendar",
+      "default": "(based on configured Quasar lang language)",
+      "examples": [
+        "first-day-of-week=\"1\"",
+        ":first-day-of-week=\"selectedFirstDayOfTheWeek\""
+      ],
+      "category": "model"
+    },
+
+    "today-btn": {
+      "type": "Boolean",
+      "desc": "Display a button that selects the current day",
+      "category": "content"
+    },
+
+    "minimal": {
+      "type": "Boolean",
+      "desc": "Don’t display the header",
+      "category": "content"
+    },
+
+    "multiple": {
+      "type": "Boolean",
+      "desc": "Allow multiple selection; Model must be Array",
+      "category": "model|selection"
+    },
+
+    "range": {
+      "type": "Boolean",
+      "desc": "Allow range selection; Partial compatibility with 'options' prop: selected ranges might also include 'unselectable' days",
+      "category": "model|selection"
+    },
+
+    "emit-immediately": {
+      "type": "Boolean",
+      "desc": "Emit model when user browses month and year too; ONLY for single selection (non-multiple, non-range)",
+      "category": "model"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "This is where additional buttons can go"
+    }
+  },
+
+  "events": {
+    "update:model-value": {
+      "extends": "update:model-value",
+      "params": {
+        "value": {
+          "type": [ "String", "Array", "Object" ]
+        },
+        "reason": {
+          "type": "String",
+          "desc": "Reason of the user interaction (what was picked)",
+          "values": [ "add-day", "remove-day", "add-range", "remove-range", "mask", "locale", "year", "month" ]
+        },
+        "details": {
+          "type": "Object",
+          "desc": "Object of properties on the new model",
+          "definition": {
+            "year": {
+              "type": "Number",
+              "desc": "The year of the date that the user has clicked/tapped on",
+              "__exemption": [ "examples" ]
+            },
+            "month": {
+              "type": "Number",
+              "desc": "The month of the date that the user has clicked/tapped on",
+              "__exemption": [ "examples" ]
+            },
+            "day": {
+              "type": "Number",
+              "desc": "The day of the month that the user has clicked/tapped on",
+              "__exemption": [ "examples" ]
+            },
+            "from": {
+              "type": "Object",
+              "desc": "Object of properties of the range starting point (only if range)",
+              "definition": {
+                "year": {
+                  "type": "Number",
+                  "desc": "The year",
+                  "__exemption": [ "examples" ]
+                },
+                "month": {
+                  "type": "Number",
+                  "desc": "The month",
+                  "__exemption": [ "examples" ]
+                },
+                "day": {
+                  "type": "Number",
+                  "desc": "The day of month",
+                  "__exemption": [ "examples" ]
+                }
+              }
+            },
+            "to": {
+              "type": "Object",
+              "desc": "Object of properties of the range ending point (only if range)",
+              "definition": {
+                "year": {
+                  "type": "Number",
+                  "desc": "The year",
+                  "__exemption": [ "examples" ]
+                },
+                "month": {
+                  "type": "Number",
+                  "desc": "The month",
+                  "__exemption": [ "examples" ]
+                },
+                "day": {
+                  "type": "Number",
+                  "desc": "The day of month",
+                  "__exemption": [ "examples" ]
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+
+    "navigation": {
+      "desc": "Emitted when user navigates to a different month or year (and even when the model changes from an outside source)",
+      "params": {
+        "view": {
+          "type": "Object",
+          "desc": "Definition of the current view (year, month)",
+          "definition": {
+            "year": {
+              "type": "Number",
+              "desc": "The year",
+              "__exemption": [ "examples" ]
+            },
+            "month": {
+              "type": "Number",
+              "desc": "The month",
+              "__exemption": [ "examples" ]
+            }
+          }
+        }
+      }
+    },
+
+    "range-start": {
+      "desc": "User has started a range selection",
+      "params": {
+        "from": {
+          "type": "Object",
+          "desc": "Definition of date from where the range begins",
+          "definition": {
+            "year": {
+              "type": "Number",
+              "desc": "The year",
+              "__exemption": [ "examples" ]
+            },
+            "month": {
+              "type": "Number",
+              "desc": "The month",
+              "__exemption": [ "examples" ]
+            },
+            "day": {
+              "type": "Number",
+              "desc": "The day of month",
+              "__exemption": [ "examples" ]
+            }
+          }
+        }
+      }
+    },
+
+    "range-end": {
+      "desc": "User has ended a range selection",
+      "params": {
+        "range": {
+          "type": "Object",
+          "desc": "Definition of the range",
+          "definition": {
+            "from": {
+              "type": "Object",
+              "desc": "Definition of date from where the range begins",
+              "definition": {
+                "year": {
+                  "type": "Number",
+                  "desc": "The year",
+                  "__exemption": [ "examples" ]
+                },
+                "month": {
+                  "type": "Number",
+                  "desc": "The month",
+                  "__exemption": [ "examples" ]
+                },
+                "day": {
+                  "type": "Number",
+                  "desc": "The day of month",
+                  "__exemption": [ "examples" ]
+                }
+              }
+            },
+            "to": {
+              "type": "Object",
+              "desc": "Definition of date to where the range ends",
+              "definition": {
+                "year": {
+                  "type": "Number",
+                  "desc": "The year",
+                  "__exemption": [ "examples" ]
+                },
+                "month": {
+                  "type": "Number",
+                  "desc": "The month",
+                  "__exemption": [ "examples" ]
+                },
+                "day": {
+                  "type": "Number",
+                  "desc": "The day of month",
+                  "__exemption": [ "examples" ]
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+
+  "methods": {
+    "setToday": {
+      "desc": "Change model to today"
+    },
+
+    "setView": {
+      "desc": "Change current view",
+      "params": {
+        "view": {
+          "type": "String",
+          "desc": "QDate view name",
+          "required": true,
+          "values": [ "Calendar", "Months", "Years" ]
+        }
+      }
+    },
+
+    "offsetCalendar": {
+      "desc": "Increment or decrement calendar view's month or year",
+      "params": {
+        "type": {
+          "type": "String",
+          "required": true,
+          "desc": "What to increment/decrement",
+          "values": [ "month", "year" ]
+        },
+        "descending": {
+          "type": "Boolean",
+          "desc": "Decrement?"
+        }
+      }
+    },
+
+    "setCalendarTo": {
+      "desc": "Change current year and month of the Calendar view; It gets corrected if using navigation-min/max-year-month and sets the current view to Calendar",
+      "params": {
+        "year": {
+          "type": "Number",
+          "desc": "The year",
+          "__exemption": [ "examples" ]
+        },
+        "month": {
+          "type": "Number",
+          "desc": "The month",
+          "__exemption": [ "examples" ]
+        }
+      }
+    },
+
+    "setEditingRange": {
+      "desc": "Configure the current editing range",
+      "params": {
+        "from": {
+          "type": "Object",
+          "desc": "Definition of date from where the range begins",
+          "definition": {
+            "year": {
+              "type": "Number",
+              "desc": "The year",
+              "__exemption": [ "examples" ]
+            },
+            "month": {
+              "type": "Number",
+              "desc": "The month",
+              "__exemption": [ "examples" ]
+            },
+            "day": {
+              "type": "Number",
+              "desc": "The day of month",
+              "__exemption": [ "examples" ]
+            }
+          }
+        },
+        "to": {
+          "type": "Object",
+          "desc": "Definition of date to where the range ends",
+          "definition": {
+            "year": {
+              "type": "Number",
+              "desc": "The year",
+              "__exemption": [ "examples" ]
+            },
+            "month": {
+              "type": "Number",
+              "desc": "The month",
+              "__exemption": [ "examples" ]
+            },
+            "day": {
+              "type": "Number",
+              "desc": "The day of month",
+              "__exemption": [ "examples" ]
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/date/QDate.sass

@@ -0,0 +1,249 @@
+.q-date
+  display: inline-flex
+  box-shadow: $shadow-2
+  border-radius: $generic-border-radius
+  background: #fff
+  width: 290px
+  min-width: 290px
+  max-width: 100%
+
+  &--bordered
+    border: 1px solid $separator-color
+
+  &__header
+    border-top-left-radius: inherit
+    color: #fff
+    background-color: var(--q-primary)
+    padding: 16px
+
+  &__actions
+    padding: 0 16px 16px
+
+  &__content, &__main
+    outline: 0
+
+  &__content .q-btn
+    font-weight: normal
+
+  &__header-link
+    opacity: .64
+    outline: 0
+    transition: opacity .3s ease-out
+    &--active, &:hover, &:focus
+      opacity: 1
+
+  &__header-subtitle
+    font-size: 14px
+    line-height: 1.75
+    letter-spacing: .00938em
+
+  &__header-title-label
+    font-size: 24px
+    line-height: 1.2
+    letter-spacing: .00735em
+
+  &__view
+    height: 100%
+    width: 100%
+    min-height: 290px
+    padding: 16px
+
+  &__navigation
+    height: 12.5%
+
+    > div:first-child
+      width: 8%
+      min-width: 24px
+      justify-content: flex-end
+    > div:last-child
+      width: 8%
+      min-width: 24px
+      justify-content: flex-start
+
+  &__calendar-weekdays
+    height: 12.5%
+    > div
+      opacity: .38
+      font-size: 12px
+
+  &__calendar-item
+    display: inline-flex
+    align-items: center
+    justify-content: center
+    vertical-align: middle
+    width: 14.285% !important
+    height: 12.5% !important
+    position: relative
+    padding: 1px
+
+    &:after
+      content: ''
+      position: absolute
+      pointer-events: none
+      top: 1px
+      right: 0
+      bottom: 1px
+      left: 0
+      border-style: dashed
+      border-color: transparent
+      border-width: 1px
+
+    > div, button
+      width: 30px
+      height: 30px
+      border-radius: 50%
+    > div
+      line-height: 30px
+      text-align: center
+
+    &--out
+      opacity: .18
+
+    &--fill
+      visibility: hidden
+
+  &__range, &__range-from, &__range-to
+
+    &:before
+      content: ''
+      background-color: currentColor
+      position: absolute
+      top: 1px
+      bottom: 1px
+      left: 0
+      right: 0
+      opacity: .3
+
+    &:nth-child(7n-6)
+      &:before
+        border-top-left-radius: 0
+        border-bottom-left-radius: 0
+
+    &:nth-child(7n)
+      &:before
+        border-top-right-radius: 0
+        border-bottom-right-radius: 0
+
+  &__range-from
+    &:before
+      left: 50%
+  &__range-to
+    &:before
+      right: 50%
+
+  &__edit-range
+    &:after
+      border-color: currentColor transparent
+
+    &:nth-child(7n-6)
+      &:after
+        border-top-left-radius: 0
+        border-bottom-left-radius: 0
+    &:nth-child(7n)
+      &:after
+        border-top-right-radius: 0
+        border-bottom-right-radius: 0
+
+    &-from, &-from-to
+      &:after
+        left: 4px
+        border-left-color: currentColor
+        border-top-color: currentColor
+        border-bottom-color: currentColor
+        border-top-left-radius: $button-rounded-border-radius
+        border-bottom-left-radius: $button-rounded-border-radius
+
+    &-to, &-from-to
+      &:after
+        right: 4px
+        border-right-color: currentColor
+        border-top-color: currentColor
+        border-bottom-color: currentColor
+        border-top-right-radius: $button-rounded-border-radius
+        border-bottom-right-radius: $button-rounded-border-radius
+
+  &__calendar-days-container
+    height: 75%
+    min-height: 192px
+
+  &__calendar-days > div
+    height: 16.66% !important
+
+  &__event
+    position: absolute
+    bottom: 2px
+    left: 50%
+    height: 5px
+    width: 8px
+    border-radius: 5px
+    background-color: var(--q-secondary)
+    transform: translate3d(-50%, 0, 0)
+
+  &__today
+    box-shadow: 0 0 1px 0 currentColor
+
+  &__years-content
+    padding: 0 8px
+
+  &__years-item, &__months-item
+    flex: 0 0 33.3333%
+
+  &.disabled, &--readonly
+    .q-date__header, .q-date__content
+      pointer-events: none
+
+  &--readonly .q-date__navigation
+    display: none
+
+  &--portrait
+    flex-direction: column
+
+  &--portrait-standard
+
+    .q-date__content
+      height: calc(100% - 86px) // workaround for iOS -- 86px is header height
+
+    .q-date__header
+      border-top-right-radius: inherit
+      height: 86px
+
+    .q-date__header-title
+      align-items: center
+      height: 30px
+
+  &--portrait-minimal
+
+    .q-date__content
+      height: 100% // workaround for iOS -- 86px is header height
+
+  &--landscape
+    flex-direction: row
+    align-items: stretch
+    min-width: 420px
+
+    > div
+      display: flex
+      flex-direction: column
+
+    .q-date__content
+      height: 100%
+
+  &--landscape-standard
+    min-width: 420px
+
+    .q-date__header
+      border-bottom-left-radius: inherit
+      min-width: 110px
+      width: 110px
+
+    .q-date__header-title
+      flex-direction: column
+    .q-date__header-today
+      margin-top: 12px
+      margin-left: -8px
+
+  &--landscape-minimal
+    width: 310px
+
+  &--dark
+    border-color: $separator-dark-color