feat: [Request] Date picker minimal prop #1818

quasarframework · Mar 26, 2018 · 39cb126 · 39cb126
1 parent efca853
commit 39cb126
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/components/datetime/QDatetimePicker.ios.vue b/src/components/datetime/QDatetimePicker.ios.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="q-datetime" :class="['type-' + type, disable ? 'disabled' : '', readonly ? 'readonly' : '', dark ? 'q-datetime-dark' : '']">
+  <div class="q-datetime" :class="classes">
     <slot></slot>
     <div class="q-datetime-content non-selectable">
       <div class="q-datetime-inner full-height flex justify-center" @touchstart.stop.prevent>
@@ -125,6 +125,14 @@ export default {
     }
   },
   computed: {
+    classes () {
+      const cls = ['type-' + this.type]
+      this.disable && cls.push('disabled')
+      this.readonly && cls.push('readonly')
+      this.dark && cls.push('q-datetime-dark')
+      this.minimal && cls.push('q-datetime-minimal')
+      return cls
+    },
     dayMin () {
       return this.pmin !== null && isSameDate(this.pmin, this.model, 'month')
         ? this.pmin.getDate()

diff --git a/src/components/datetime/QDatetimePicker.mat.vue b/src/components/datetime/QDatetimePicker.mat.vue
@@ -62,7 +62,7 @@
         </div>
       </div>
     </div>
-    <div class="q-datetime-content col-xs-12 col-md-8 column">
+    <div class="q-datetime-content col-xs-12 column" :class="contentClasses">
       <div ref="selector" class="q-datetime-selector auto row flex-center">
         <div
           v-if="view === 'year'"
@@ -284,9 +284,15 @@ export default {
       this.disable && cls.push('disabled')
       this.readonly && cls.push('readonly')
       this.dark && cls.push('q-datetime-dark')
+      this.minimal && cls.push('q-datetime-minimal')
       this.color && cls.push(`text-${this.color}`)
       return cls
     },
+    contentClasses () {
+      if (!this.minimal) {
+        return 'col-md-8'
+      }
+    },
     dateArrow () {
       const val = [ this.$q.icon.datetime.arrowLeft, this.$q.icon.datetime.arrowRight ]
       return this.$q.i18n.rtl ? val.reverse() : val

diff --git a/src/components/datetime/datetime.mat.styl b/src/components/datetime/datetime.mat.styl
@@ -261,3 +261,5 @@ for $pos in 0..23
       &.q-datetime-dark
         border 1px solid $dark
         border 1px solid var(--q-color-dark)
+  .q-datetime-minimal
+    width 320px