fix padding label & refacto css & change prop name

chronotruck · Apr 19, 2019 · 95f00c7 · 95f00c7
1 parent 418407b
commit 95f00c7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 30 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -183,7 +183,7 @@
                 :button-color="demo.options.buttonColor"
                 :no-header="demo.options.noHeader"
                 :label="demo.options.label"
-                :label-show="demo.options.labelShow"
+                :no-label="demo.options.noLabel"
                 :auto-close="demo.options.autoClose"
                 :error="demo.options.error"
                 :hint="demo.options.hint"
@@ -248,7 +248,7 @@
         booleanOptions: [
           'noHeader', 'autoClose', 'error', 'dark', 'overlay', 'noWeekendDays', 'noShortcuts',
           'noButton', 'onlyDate', 'range', 'onlyTime', 'inline', 'persistent', 'disabled', 'noButtonNow', 'noValueToCustomElem',
-          'noKeyboard', 'right', 'noClearButton', 'labelShow'
+          'noKeyboard', 'right', 'noClearButton', 'noLabel'
         ],
         stringOptions: [
           'id', 'label', 'hint', 'color', 'buttonColor', 'position', 'format', 'formatted', 'outputFormat',
@@ -272,8 +272,7 @@
               format: 'YYYY-MM-DD HH:mm',
               id: 'DateTimePicker',
               minDate: '2018-04-05',
-              maxDate: '2018-04-24',
-              labelShow: true
+              maxDate: '2018-04-24'
             }
           },
           {
@@ -298,14 +297,13 @@
               format: 'YYYY-MM-DD',
               color: 'purple',
               label: 'Select date range',
-              id: 'RangeDatePicker',
-              labelShow: true
+              id: 'RangeDatePicker'
             }
           },
           {
             id: '3',
             title: 'Date Picker',
-            description: 'Date selector - right position - labelShow false - With large input (input-size="lg") - format: "MM-DD-YYYY" - formatted: "ll"',
+            description: 'Date selector - right position - noLabel true - With large input (input-size="lg") - format: "MM-DD-YYYY" - formatted: "ll"',
             editOption: false,
             initial: '14-01-2019',
             value: '14-01-2019',
@@ -319,7 +317,7 @@
               format: 'DD-MM-YYYY',
               formatted: 'll',
               right: true,
-              labelShow: false
+              noLabel: true
             }
           },
           {
@@ -338,7 +336,7 @@
               label: 'Select time',
               inputSize: 'sm',
               id: 'TimePicker',
-              labelShow: true
+              noLabel: true
             }
           },
           {
@@ -361,8 +359,7 @@
               range: true,
               id: 'InlinePicker',
               disabledWeekly: [0, 4, 6],
-              noKeyboard: true,
-              labelShow: true
+              noKeyboard: true
             }
           },
           {

diff --git a/src/VueCtkDateTimePicker/_subs/CustomInput.vue b/src/VueCtkDateTimePicker/_subs/CustomInput.vue
@@ -7,7 +7,7 @@
       'has-error': errorHint,
       'is-disabled': disabled,
       'is-dark': dark,
-      'label-not-show': !labelShow
+      'no-label': noLabel
     }, inputSize]"
     class="field flex align-center"
     @click="focusInput"
@@ -28,7 +28,7 @@
       @click="$emit('click')"
     >
     <label
-      v-if="labelShow"
+      v-if="!noLabel"
       ref="label"
       :for="id"
       :class="errorHint ? 'text-danger' : null"
@@ -65,7 +65,7 @@
       isFocus: { type: Boolean, default: false },
       value: { type: [String, Object], required: false, default: null },
       label: { type: String, default: 'Select date & time' },
-      labelShow: { type: Boolean, default: true },
+      noLabel: { type: Boolean, default: true },
       hint: { type: String, default: String },
       errorHint: { type: Boolean, default: Boolean },
       color: { type: String, default: String },
@@ -179,8 +179,10 @@
         transform: translateY(0);
         font-size: 11px;
       }
-      .field-input {
-        padding-top: 14px;
+      &:not(.no-label) {
+        .field-input {
+          padding-top: 14px;
+        }
       }
     }
     &.is-focused {
@@ -256,16 +258,11 @@
       .field-label {
         font-size: 10px;
       }
-      &.has-value {
+      &.has-value:not(.no-label) {
         .field-input {
           padding-top: 12px;
         }
       }
-      &.has-value.label-not-show{
-        .field-input {
-          padding-top: 0;
-        }
-      }
     }
     &.lg {
       .field-input {
@@ -276,16 +273,11 @@
       .field-label {
         font-size: 14px;
       }
-      &.has-value {
+      &.has-value:not(.no-label) {
         .field-input {
           padding-top: 16px;
         }
       }
-      &.has-value.label-not-show{
-        .field-input {
-          padding-top: 0;
-        }
-      }
     }
   }
 </style>
diff --git a/src/VueCtkDateTimePicker/index.vue b/src/VueCtkDateTimePicker/index.vue
@@ -17,7 +17,7 @@
       :is-focus="hasPickerOpen"
       :color="color"
       :label="label"
-      :label-show="labelShow"
+      :no-label="noLabel"
       :input-size="inputSize"
       :no-clear-button="noClearButton"
       @focus="toggleDatePicker(true)"
@@ -112,7 +112,7 @@
     props: {
       value: { type: [String, Object], default: null },
       label: { type: String, default: 'Select date & time' },
-      labelShow: { type: Boolean, default: true },
+      noLabel: { type: Boolean, default: false },
       hint: { type: String, default: String },
       error: { type: Boolean, default: Boolean },
       color: { type: String, default: 'dodgerblue' },