🚀 [feature] Add clear button (#146)

* 🚀 [feature] Add clear button * correct spacing * 🏗️ Build docs 2.0.9 * ⏫ Update version to 2.0.9 * Change cross color
chronotruck · Mar 15, 2019 · f972e91 · f972e91
1 parent 18e7ebd
commit f972e91
Show file tree

Hide file tree

Showing 15 changed files with 75 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -127,6 +127,7 @@ Here is an example of UMD implementation: https://codepen.io/louismazel/pen/jQWN
 | disabled-weekly (11) | Array`<integer>` | no | [] |
 | no-keyboard (12) | Boolean | no | false |
 | right (13) | Boolean | no | false |
+| noClearButton | Boolean | no | false |
 
 (1) hint : Is a text that replaces the label/placeholder (Ex : Error designation)
 

diff --git a/docs/css/app.1263f480.css b/docs/css/app.1263f480.css
diff --git a/docs/css/app.e806c27b.css b/docs/css/app.e806c27b.css
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.e806c27b.css rel=preload as=style><link href=js/app.33970e5c.js rel=preload as=script><link href=js/chunk-vendors.ee611b34.js rel=preload as=script><link href=css/app.e806c27b.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.ee611b34.js></script><script src=js/app.33970e5c.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.1263f480.css rel=preload as=style><link href=js/app.a0695fb6.js rel=preload as=script><link href=js/chunk-vendors.ee611b34.js rel=preload as=script><link href=css/app.1263f480.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.ee611b34.js></script><script src=js/app.a0695fb6.js></script></body></html>
diff --git a/docs/js/app.33970e5c.js b/docs/js/app.33970e5c.js
diff --git a/docs/js/app.33970e5c.js.map b/docs/js/app.33970e5c.js.map
diff --git a/docs/js/app.a0695fb6.js b/docs/js/app.a0695fb6.js
diff --git a/docs/js/app.a0695fb6.js.map b/docs/js/app.a0695fb6.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ctk-date-time-picker",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "A vue component for select date & time (by Chronotruck)",
   "author": "Louis Mazel <[email protected]>",
   "scripts": {

diff --git a/src/App.vue b/src/App.vue
@@ -211,6 +211,7 @@
                 :no-value-to-custom-elem="demo.options.noValueToCustomElem"
                 :disabled-weekly="demo.options.disabledWeekly"
                 :right="demo.options.right"
+                :no-clear-button="demo.options.noClearButton"
               >
                 <input
                   v-if="demo.options && demo.options.slot && demo.options.slot.type === 'input'"
@@ -246,7 +247,7 @@
         booleanOptions: [
           'noHeader', 'autoClose', 'error', 'dark', 'overlay', 'noWeekendDays', 'noShortcuts',
           'noButton', 'onlyDate', 'range', 'onlyTime', 'inline', 'persistent', 'disabled', 'noButtonNow', 'noValueToCustomElem',
-          'noKeyboard', 'right'
+          'noKeyboard', 'right', 'noClearButton'
         ],
         stringOptions: [
           'id', 'label', 'hint', 'color', 'buttonColor', 'position', 'format', 'formatted', 'outputFormat',

diff --git a/src/VueCtkDateTimePicker/_subs/CustomButton.vue b/src/VueCtkDateTimePicker/_subs/CustomButton.vue
@@ -1,10 +1,16 @@
 <template>
   <button
     class="custom-button flex align-center justify-content-center"
-    :class="{'is-dark': dark, 'with-border': withBorder, 'is-hover': hover, 'is-selected': selected}"
+    :class="{
+      'is-dark': dark,
+      'with-border': withBorder,
+      'is-hover': hover,
+      'is-selected': selected,
+      'round': round
+    }"
     tabindex="-1"
     type="button"
-    @click="$emit('click')"
+    @click.stop="$emit('click')"
     @focus="$emit('focus')"
     @blur="$emit('blur')"
     @mouseover="$emit('mouseover')"
@@ -31,7 +37,8 @@
       dark: { type: Boolean, default: false },
       withBorder: { type: Boolean, default: false },
       hover: { type: Boolean, default: false },
-      selected: { type: Boolean, default: false }
+      selected: { type: Boolean, default: false },
+      round: { type: Boolean, default: false }
     },
     computed: {
       colorStyle () {
@@ -125,5 +132,15 @@
         fill: white !important;
       }
     }
+    &.round {
+      padding: 0;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      .custom-button-effect {
+        border-radius: 50%;
+        height: 24px;
+      }
+    }
   }
 </style>
diff --git a/src/VueCtkDateTimePicker/_subs/CustomInput.vue b/src/VueCtkDateTimePicker/_subs/CustomInput.vue
@@ -8,7 +8,7 @@
       'is-disabled': disabled,
       'is-dark': dark
     }, inputSize]"
-    class="field"
+    class="field flex align-center"
     @click="focusInput"
   >
     <input
@@ -20,6 +20,7 @@
       :style="[borderStyle]"
       type="text"
       class="field-input"
+      :class="{ 'no-clear-button': noClearButton }"
       readonly
       @focus="$emit('focus')"
       @blur="$emit('blur')"
@@ -35,12 +36,29 @@
     >
       {{ hint || label }}
     </label>
+    <CustomButton
+      v-if="hasClearButton"
+      :color="dark ? '#757575' : 'rgba(0, 0, 0, 0.54)'"
+      :dark="dark"
+      class="field-clear-button"
+      round
+      @click="$emit('clear')"
+    >
+      <span class="fs-16">
+        ✕
+      </span>
+    </CustomButton>
   </div>
 </template>
 
 <script>
+  import CustomButton from './CustomButton'
+
   export default {
     name: 'CustomInput',
+    components: {
+      CustomButton
+    },
     props: {
       isFocus: { type: Boolean, default: false },
       value: { type: [String, Object], required: false, default: null },
@@ -51,7 +69,8 @@
       disabled: { type: Boolean, default: false },
       dark: { type: Boolean, default: false },
       id: { type: String, default: 'CustomInput' },
-      inputSize: { type: String, default: String }
+      inputSize: { type: String, default: String },
+      noClearButton: { type: Boolean, default: false }
     },
     computed: {
       borderStyle () {
@@ -65,6 +84,9 @@
         return cond
           ? { color: `${this.color}` }
           : null
+      },
+      hasClearButton () {
+        return !this.noClearButton && !this.disabled && this.value
       }
     },
     methods: {
@@ -93,7 +115,7 @@
         }
       }
     }
-    .field-label{
+    &-label{
       position: absolute;
       top: 5px;
       cursor: pointer;
@@ -106,7 +128,7 @@
       font-size: 11px;
       color: rgba(0, 0, 0, 0.54);
     }
-    .field-input{
+    &-input{
       cursor: pointer;
       background-color: #FFF;
       -webkit-transition-duration: 0.3s;
@@ -115,14 +137,22 @@
       width: 100%;
       height: 42px;
       min-height: 42px;
-      padding: 0 12px;
+      padding-left: 12px;
+      padding-right: 44px;
       font-weight: 400;
       -webkit-appearance: none;
       outline: none;
       border: 1px solid rgba(0, 0, 0, 0.2);
       border-radius: 4px;
       font-size: 14px;
       z-index: 0;
+      &.no-clear-button {
+        padding: 0 12px;
+      }
+    }
+    &-clear-button {
+      position: absolute;
+      right: 12px;
     }
     &.has-error {
       .field-input {

diff --git a/src/VueCtkDateTimePicker/index.vue b/src/VueCtkDateTimePicker/index.vue
@@ -18,7 +18,9 @@
       :color="color"
       :label="label"
       :input-size="inputSize"
+      :no-clear-button="noClearButton"
       @focus="toggleDatePicker(true)"
+      @clear="$emit('input', null)"
     />
     <slot v-else />
     <div
@@ -148,7 +150,8 @@
       customShortcuts: { type: Array, default: Array },
       noValueToCustomElem: { type: Boolean, default: false },
       noKeyboard: { type: Boolean, default: false },
-      right: { type: Boolean, default: false }
+      right: { type: Boolean, default: false },
+      noClearButton: { type: Boolean, default: false }
     },
     data () {
       return {

diff --git a/tests/unit/CustomButton.spec.js b/tests/unit/CustomButton.spec.js
@@ -34,4 +34,10 @@ describe('CustomButton.vue', () => {
     wrapper.setProps({ selected: true })
     expect(wrapper.classes('is-selected')).toBe(true)
   })
+  it('has round class when have round prop', () => {
+    const wrapper = shallowMount(CustomButton)
+    expect(wrapper.classes('round')).toBe(false)
+    wrapper.setProps({ round: true })
+    expect(wrapper.classes('round')).toBe(true)
+  })
 })
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.e806c27b.css rel=preload as=style><link href=js/app.33970e5c.js rel=preload as=script><link href=js/chunk-vendors.ee611b34.js rel=preload as=script><link href=css/app.e806c27b.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.ee611b34.js></script><script src=js/app.33970e5c.js></script></body></html>
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.1263f480.css rel=preload as=style><link href=js/app.a0695fb6.js rel=preload as=script><link href=js/chunk-vendors.ee611b34.js rel=preload as=script><link href=css/app.1263f480.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.ee611b34.js></script><script src=js/app.a0695fb6.js></script></body></html>