✨(VDPickerCustomInput): Allows to use an icon slot

mathieustan · Nov 16, 2020 · 694f6b9 · 694f6b9
1 parent 8978544
commit 694f6b9
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 15 deletions.
diff --git a/dist/vue-datepicker.esm.js b/dist/vue-datepicker.esm.js
diff --git a/dist/vue-datepicker.min.css b/dist/vue-datepicker.min.css
diff --git a/dist/vue-datepicker.min.js b/dist/vue-datepicker.min.js
diff --git a/dist/vue-datepicker.umd.js b/dist/vue-datepicker.umd.js
diff --git a/doc-src/public/index.html b/doc-src/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
+    <script defer src="https://use.fontawesome.com/releases/v5.15.1/js/solid.js" integrity="sha384-oKbh94nlFq571cjny1jaIBlQwzTJW4KYExGYjslYSoG/J/w68zUI+KHPRveXB6EY" crossorigin="anonymous"></script>
+<script defer src="https://use.fontawesome.com/releases/v5.15.1/js/fontawesome.js" integrity="sha384-v0OPwyxrMWxEgAVlmUqvjeEr48Eh/SOZ2DRtVYJCx1ZNDfWBfNMWUjwUwBCJgfO4" crossorigin="anonymous"></script>
     <title>vue-datepicker</title>
   </head>
   <body>

diff --git a/doc-src/src/App.vue b/doc-src/src/App.vue
@@ -258,6 +258,11 @@ export default  {
           Try to keep cursor on a day`,
         filename: 'daySlot',
       },
+      slotInputIcon: {
+        title: '# Custom input-icon slot',
+        description: `Allows to change icon appaearance`,
+        filename: 'slot-input-icon',
+      },
       // -- Misc
       birthdayPicker: {
         title: 'Birthday picker',

diff --git a/doc-src/src/examples/slot-input-icon.vue b/doc-src/src/examples/slot-input-icon.vue
@@ -0,0 +1,15 @@
+<template>
+  <VueDatePicker v-model="date">
+    <template #input-icon>
+      <i class="fa fa-calendar-week" />
+    </template>
+  </VueDatePicker>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    date: new Date(),
+  }),
+};
+</script>
diff --git a/src/components/VDPicker/VDPickerCustomInput/VDPickerCustomInput.js b/src/components/VDPicker/VDPickerCustomInput/VDPickerCustomInput.js
@@ -7,9 +7,16 @@ import colorable from '../../../mixins/colorable';
 // Components
 import VDIcon from '../../VDIcon';
 
-export default {
+// Helpers
+import mixins from '../../../utils/mixins';
+
+const baseMixins = mixins(
+  colorable,
+);
+
+export default baseMixins.extend({
   name: 'VDPickerCustomInput',
-  mixins: [colorable],
+  inject: ['VDPicker'],
   props: {
     clearable: { type: Boolean },
     closeOnClickOutside: { type: Boolean, default: true },
@@ -54,15 +61,21 @@ export default {
     // Generate Template
     // ------------------------------
     genCalendarIcon () {
-      const icon = this.$createElement(VDIcon, {
-        props: {
-          disabled: this.disabled,
-        },
-      }, ['calendarAlt']);
+      let children = [];
+
+      if (this.VDPicker.$slots['input-icon']) {
+        children.push(this.VDPicker.$slots['input-icon']);
+      } else {
+        children.push(this.$createElement(VDIcon, {
+          props: {
+            disabled: this.disabled,
+          },
+        }, ['calendarAlt']));
+      }
 
       const iconWrapper = this.$createElement('div', {
         staticClass: 'vd-picker__input-icon__wrapper',
-      }, [icon]);
+      }, children);
 
       return this.$createElement('div', {
         staticClass: 'vd-picker__input-icon',
@@ -133,4 +146,4 @@ export default {
       this.clearable && this.genClearIcon(),
     ]);
   },
-};
+});
diff --git a/src/components/VDPicker/VDPickerCustomInput/VDPickerCustomInput.scss b/src/components/VDPicker/VDPickerCustomInput/VDPickerCustomInput.scss
@@ -22,7 +22,7 @@
     pointer-events: none;
 
     input,
-    .vd-icon.vd-icon--disabled {
+    .vd-picker__input-icon__wrapper {
       opacity: .38;
     }
   }

diff --git a/tests/unit/components/VDPicker/VDPickerCustomInput.spec.js b/tests/unit/components/VDPicker/VDPickerCustomInput.spec.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import dayjs from 'dayjs';
 import { mount } from '@vue/test-utils';
 import VDPickerCustomInput from '@/components/VDPicker/VDPickerCustomInput';
@@ -6,12 +7,21 @@ jest.useFakeTimers();
 
 describe('VDPickerCustomInput', () => {
   let mountComponent;
+  let vm = new Vue();
+
   const dummyDate = dayjs(new Date([2019, 5, 16]));
+  const defaultVDPickerProvider = { $scopedSlots: {}, $slots: {} };
 
   beforeEach(() => {
-    mountComponent = ({ props = {} } = {}) =>
+    mountComponent = ({
+      props = {},
+      provide = {
+        VDPicker: defaultVDPickerProvider,
+      },
+    } = {}) =>
       mount(VDPickerCustomInput, {
         propsData: props,
+        provide,
       });
   });
 
@@ -101,5 +111,21 @@ describe('VDPickerCustomInput', () => {
       expect(wrapper.emitted().clearDate).toBeTruthy();
     });
 
+    it('should have an input-icon slot', () => {
+      const VDPickerProviderWithIcon = {
+        $scopedSlots: {},
+        $slots: {
+          'input-icon': vm.$createElement('div', { staticClass: 'icon-slot' }),
+        },
+      };
+      const wrapper = mountComponent({
+        provide: {
+          VDPicker: VDPickerProviderWithIcon,
+        },
+      });
+
+      expect(wrapper.find('.icon-slot').exists()).toBeTruthy();
+    });
+
   });
 });