feat(calendardatepicker): initial implementation (#106)

* feat(calendardatepicker): initial implementation

Author: arturmiz

__tests__/Vuent.test.js

@@ -4,6 +4,7 @@ import { isInstalled, countInstalledPlugins } from './utils';
 import {
   VntAutosuggest,
   VntButton,
+  VntCalendarDatepicker,
   VntCheckbox,
   VntDialog,
   VntHeader,
@@ -40,6 +41,7 @@ describe('Vuent', () => {
     test('installs all components', () => {
       expect(isInstalled(localVue, VntAutosuggest)).toBe(true);
       expect(isInstalled(localVue, VntButton)).toBe(true);
+      expect(isInstalled(localVue, VntCalendarDatepicker)).toBe(true);
       expect(isInstalled(localVue, VntCheckbox)).toBe(true);
       expect(isInstalled(localVue, VntDialog)).toBe(true);
       expect(isInstalled(localVue, VntHeader)).toBe(true);
@@ -56,7 +58,7 @@ describe('Vuent', () => {
       expect(isInstalled(localVue, VntToggle)).toBe(true);
       expect(isInstalled(localVue, VntTooltip)).toBe(true);
 
-      expect(countInstalledPlugins(localVue)).toBe(17);
+      expect(countInstalledPlugins(localVue)).toBe(18);
     });
 
     test('has $vuent instance object', () => {

__tests__/__snapshots__/calendardatepicker.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CalendarDatePicker by default renders correctly 1`] = `
+<label class="vnt-input">
+  <!---->
+  <input type="date" placeholder="" class="vnt-input__control">
+</label>
+`;
+
+exports[`CalendarDatePicker can be disabled renders correctly 1`] = `
+<label class="vnt-input" disabled="disabled">
+  <!---->
+  <input disabled="disabled" type="date" placeholder="" class="vnt-input__control">
+</label>
+`;

__tests__/calendardatepicker.test.js

@@ -0,0 +1,73 @@
+import { createLocalVue, mount } from '@vue/test-utils';
+import { VntCalendarDatepicker } from '@/components';
+import { isInstalled } from './utils';
+
+describe('CalendarDatePicker', () => {
+  let localVue, wrapper;
+
+  beforeAll(() => {
+    localVue = createLocalVue();
+    localVue.use(VntCalendarDatepicker);
+  });
+
+  test('can be installed separately', () => {
+    expect(isInstalled(localVue, VntCalendarDatepicker)).toBe(true);
+  });
+
+  describe('by default', () => {
+
+    beforeAll(() => {
+      wrapper = mount(VntCalendarDatepicker);
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('value is empty', () => {
+      expect(wrapper.vm.value).toBe('');
+    });
+
+  });
+
+  describe('can be disabled', () => {
+
+    beforeAll(() => {
+      wrapper = mount(VntCalendarDatepicker, {
+        propsData: {
+          disabled: true
+        }
+      });
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+  });
+
+  describe('updates passed value', () => {
+
+    beforeAll(async () => {
+      wrapper = mount(VntCalendarDatepicker, {
+        propsData: {
+          value: '12345'
+        }
+      });
+      const input = wrapper.find('input');
+      input.setValue('123456');
+    });
+
+    test('event is emitted', () => {
+      expect(wrapper.emitted().input).toHaveLength(1);
+    });
+
+    test('entered value is emitted', () => {
+      wrapper.vm.input('123456');
+
+      expect(wrapper.emitted().input[1]).toEqual(['123456']);
+    });
+
+  });
+
+});

commitlint.config.js

@@ -5,6 +5,7 @@ module.exports = {
       [
         'autosuggest',
         'button',
+        'calendardatepicker',
         'checkbox',
         'dialog',
         'header',

docs/.vuepress/components/calendar-datepicker-basic.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="playground">
+    <vnt-calendar-datepicker v-model="date" />
+    <div class="result">date: {{ date }}</div>
+  </div>
+</template>
+
+<script>
+import { VntCalendarDatepicker } from "../../../src/components";
+
+export default {
+  name: "CalendarDatepickerBasic",
+  components: {
+    VntCalendarDatepicker
+  },
+  data() {
+    return {
+      date: ''
+    };
+  }
+};
+</script>

docs/.vuepress/components/calendar-datepicker-disabled.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="playground">
+    <vnt-calendar-datepicker v-model="date" disabled />
+    <div class="result">date: {{ date }}</div>
+  </div>
+</template>
+
+<script>
+import { VntCalendarDatepicker } from "../../../src/components";
+
+export default {
+  name: "CalendarDatepickerBasic",
+  components: {
+    VntCalendarDatepicker
+  },
+  data() {
+    return {
+      date: "2020-04-05"
+    };
+  }
+};
+</script>

docs/.vuepress/config.js

@@ -32,6 +32,7 @@ module.exports = {
           '/components/autosuggest',
           '/components/button',
           '/components/checkbox',
+          '/components/calendardatepicker',
           '/components/dialog',
           '/components/header',
           '/components/icon',

docs/components/calendardatepicker.md

@@ -0,0 +1,23 @@
+# Calendar DatePicker
+
+[[toc]]
+
+## Basic
+
+<calendar-datepicker-basic />
+
+```html
+<vnt-calendar-datepicker v-model="date" />
+```
+
+## Disabled
+
+<calendar-datepicker-disabled />
+
+```html
+<vnt-calendar-datepicker v-model="date" disabled />
+```
+
+## Configuration
+
+Same as for [Input](/components/input.html#configuration) component.

src/components/calendardatepicker/CalendarDatePicker.vue

@@ -0,0 +1,37 @@
+<template>
+  <vnt-input v-model="localValue"
+             v-bind="$attrs"
+             type="date"
+             @input="input" />
+</template>
+
+<script>
+import VntInput from '../input/Input.vue';
+
+export default {
+  name: 'VntCalendarDatepicker',
+
+  components: {
+    VntInput
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      localValue: this.value
+    };
+  },
+
+  methods: {
+    input(value) {
+      this.$emit('input', value);
+    }
+  }
+};
+</script>

src/components/calendardatepicker/README.md

@@ -0,0 +1,9 @@
+# CalendarDatePicker
+
+## How to use
+
+(Similar to the <vnt-input /> as it's a wrapper around it for `type` being set to `date`)
+
+```html
+<vnt-calendar-datepicker v-model="[prop]" label="Text field" />
+```

src/components/calendardatepicker/index.js

@@ -0,0 +1,7 @@
+import CalendarDatePicker from './CalendarDatePicker.vue';
+
+CalendarDatePicker.install = function (Vue) {
+  Vue.component(CalendarDatePicker.name, CalendarDatePicker);
+};
+
+export default CalendarDatePicker;

src/components/index.js

@@ -1,6 +1,7 @@
 import './Vnt.vue';
 export { default as VntAutosuggest } from './autosuggest';
 export { default as VntButton } from './button';
+export { default as VntCalendarDatepicker } from './calendardatepicker';
 export { default as VntCheckbox } from './checkbox';
 export { default as VntDialog } from './dialog';
 export { default as VntHeader } from './header';

stories/components/calendardatepicker.stories.js

@@ -0,0 +1,40 @@
+import { storiesOf } from '@storybook/vue';
+
+/* eslint no-undef: 0 */
+storiesOf('CalendarDatePicker', module)
+  .add('default', () => ({
+    data() {
+      return {
+        date: ''
+      };
+    },
+    template: `
+      <div>
+        <vnt-calendar-datepicker v-model="date" />
+        <p class="result">date: {{ date }}</p>
+      </div>`
+  }))
+  .add('disabled', () => ({
+    data() {
+      return {
+        date: '2020-01-15'
+      };
+    },
+    template: `
+      <div>
+        <vnt-calendar-datepicker v-model="date" disabled />
+        <p class="result">date: {{ date }}</p>
+      </div>`
+  }))
+  .add('with date', () => ({
+    data() {
+      return {
+        date: '2020-01-15'
+      };
+    },
+    template: `
+      <div>
+        <vnt-calendar-datepicker v-model="date" />
+        <p class="result">date: {{ date }}</p>
+      </div>`
+  }));