merge master

.eslintcache

@@ -1 +1 @@
-[{"/Users/shubhadipmaity/projects/vue3-datepicker/src/App.vue":"1","/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/DateInput.vue":"2","/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/PickerDay.vue":"3","/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/PickerMonth.vue":"4","/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/PickerYear.vue":"5","/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/Datepicker.vue":"6","/Users/shubhadipmaity/projects/vue3-datepicker/src/components/iconview/IconView.vue":"7","/Users/shubhadipmaity/projects/vue3-datepicker/types/index.d.ts":"8"},{"size":6749,"mtime":1605066040271,"results":"9","hashOfConfig":"10"},{"size":6993,"mtime":1605066080553,"results":"11","hashOfConfig":"10"},{"size":15101,"mtime":1605066040274,"results":"12","hashOfConfig":"10"},{"size":8872,"mtime":1605066040275,"results":"13","hashOfConfig":"10"},{"size":8788,"mtime":1605066040286,"results":"14","hashOfConfig":"10"},{"size":15540,"mtime":1605066040273,"results":"15","hashOfConfig":"10"},{"size":1644,"mtime":1605066040276,"results":"16","hashOfConfig":"10"},{"size":935,"mtime":1605066265052},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1h7m5qi",{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/shubhadipmaity/projects/vue3-datepicker/src/App.vue",[],"/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/DateInput.vue",[],"/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/PickerDay.vue",[],"/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/PickerMonth.vue",[],"/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/PickerYear.vue",[],"/Users/shubhadipmaity/projects/vue3-datepicker/src/components/datepicker/Datepicker.vue",[],"/Users/shubhadipmaity/projects/vue3-datepicker/src/components/iconview/IconView.vue",[]]
+[{"/Users/shubhadipmaity/projects/vue3-datepicker/src/App.vue":"1"},{"size":6748,"mtime":1605070530669,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1h7m5qi","/Users/shubhadipmaity/projects/vue3-datepicker/src/App.vue",[]]

.gitignore

@@ -2,4 +2,6 @@ node_modules
 .DS_Store
 .vscode
 dist/
-testumdbuild/
+testumdbuild/
+/demo
+/example/datepicker.js

package.json

@@ -7,20 +7,17 @@
     "src/*",
     "types/*"
   ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
   "main": "dist/datepicker.cjs.js",
   "module": "dist/datepicker.esm.js",
   "unpkg": "dist/datepicker.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
     "lint": "vue-cli-service lint --fix",
     "dev": "rollup -c build/rollup-dev.config.js --watch",
-    "build": "rimraf dist && rollup --config ./build/rollup.config.js",
+    "build:lib": "rimraf dist && rollup --config ./build/rollup.config.js",
     "test": "jest --config tests/unit/jest.conf.js --coverage ",
-    "prepublishOnly": "npm run lint && npm run build"
+    "prepublishOnly": "npm run lint && npm run build:lib"
   },
   "dependencies": {
     "vue": "^3.0.0",

postcss.config.js

@@ -2,7 +2,14 @@ const path = require('path');
 
 module.exports = {
   plugins: [
-    require('postcss-import')({}),
+    require('postcss-import')({
+      resolve(id, basedir) {
+        if (id.startsWith('@css')) {
+          return path.resolve('./src/assets/styles/css', id.slice(5));
+        }
+        return path.resolve(basedir, id);
+      },
+    }),
     require('postcss-simple-vars')({}),
     require('postcss-nested')({}),
     require('autoprefixer')({

src/App.vue

@@ -11,7 +11,7 @@
       <appdate-picker
         :full-month-name="true"
         input-class="customClass"
-        placeholder="Select Date"
+        placeholder="YYYY-MM-DD"
         :typeable="true"
         :hideInput="false"
         @input="dateSelected"
@@ -162,6 +162,12 @@
       </appdate-picker>
     </div>
 
+    <div class="ind">
+      <label>Calendar Color </label>
+      <appdate-picker :full-month-name="true" input-class="customClass" placeholder="Select Date" @input="dateSelected">
+      </appdate-picker>
+    </div>
+
     <div class="ind">
       <label>Inline </label>
       <appdate-picker :inline="true" @input="dateSelected"></appdate-picker>
@@ -228,7 +234,9 @@ export default defineComponent({
   },
 });
 </script>
-<style scoped>
+<style scoped lang="postcss">
+@import '@css/_settings.css';
+
 .page-head {
   background-color: #2f9668;
   text-align: center;

src/components/datepicker/DateInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'input-group': addBootstrapClass }">
+  <div :class="[addBootstrapClass ? 'input-group' : '']">
     <!-- Calendar Button -->
     <span
       v-if="calendarButton"
@@ -168,6 +168,10 @@ export default defineComponent({
       default: 16,
       type: [String, Number],
     },
+    theme: {
+      default: 'green',
+      type: String,
+    },
   },
   emits: ['show-calendar', 'typed-date', 'clear-date', 'close-calendar'],
   setup(props, { emit }) {
@@ -187,7 +191,7 @@ export default defineComponent({
       return props.inputClass;
     });
 
-    const formattedValue = computed(() => {
+    const formattedValue = computed((): string | Date | null | number => {
       if (!props.selectedDate) {
         return null;
       }

src/components/datepicker/Datepicker.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="vuejs3-datepicker"
-    :class="[wrapperClass, isRtl ? 'rtl' : '']"
+    :class="[isRtl ? 'rtl' : '', `vuejs3-${theme}`, wrapperClass]"
     v-clickoutside="{
       handler: inline ? null : closeOnClickOutside,
     }"
@@ -38,6 +38,7 @@
       :iconWidth="iconWidth"
       :iconHeight="iconHeight"
       :iconColor="iconColor"
+      :theme="theme"
     >
       <template v-slot:afterDateInput>
         <slot name="afterDateInput"></slot>
@@ -68,6 +69,7 @@
       :minimumView="minimumView"
       :maximumView="maximumView"
       :preventDisableDateSelection="preventDisableDateSelection"
+      :theme="theme"
     >
       <template v-slot:beforeCalendarHeader>
         <slot name="beforeCalendarHeader"></slot>
@@ -93,6 +95,7 @@
       @changedYear="setPageDate"
       :minimumView="minimumView"
       :maximumView="maximumView"
+      :theme="theme"
     >
       <template v-slot:beforeCalendarHeader>
         <slot name="beforeCalendarHeader"></slot>
@@ -117,6 +120,7 @@
       :fullMonthName="fullMonthName"
       :minimumView="minimumView"
       :maximumView="maximumView"
+      :theme="theme"
     >
       <template v-slot:beforeCalendarHeader>
         <slot name="beforeCalendarHeader"></slot>
@@ -262,6 +266,10 @@ export default defineComponent({
       default: 16,
       type: [String, Number],
     },
+    theme: {
+      default: 'green',
+      type: String,
+    },
   },
   emits: [
     'input',

src/components/datepicker/PickerDay.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[calendarClass, 'vuejs3-datepicker__calendar']"
+    :class="['vuejs3-datepicker__calendar', `vuejs3-${theme}`, calendarClass]"
     v-show="showDayView"
     :style="calendarStyle"
     @mousedown.prevent
@@ -133,6 +133,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    theme: {
+      default: 'green',
+      type: String,
+    },
   },
   emits: ['show-year-calendar', 'changed-month', 'show-month-calendar', 'selected-disabled', 'select-date'],
   setup(props, { emit }) {

src/components/datepicker/PickerMonth.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[calendarClass, 'vuejs3-datepicker__calendar']"
+    :class="['vuejs3-datepicker__calendar', `vuejs3-${theme}`, calendarClass]"
     v-show="showMonthView"
     :style="calendarStyle"
     @mousedown.prevent
@@ -104,6 +104,10 @@ export default defineComponent({
       type: String,
       default: 'year',
     },
+    theme: {
+      default: 'green',
+      type: String,
+    },
   },
   setup(props, { emit }) {
     /** ********************************** Methods  *********************************** */

src/components/datepicker/PickerYear.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[calendarClass, 'vuejs3-datepicker__calendar']"
+    :class="['vuejs3-datepicker__calendar', `vuejs3-${theme}`, calendarClass]"
     v-show="showYearView"
     :style="calendarStyle"
     @mousedown.prevent
@@ -97,6 +97,10 @@ export default defineComponent({
       type: String,
       default: 'year',
     },
+    theme: {
+      default: 'green',
+      type: String,
+    },
   },
   emits: ['select-year', 'changed-decade'],
   setup(props, { emit }) {

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import clickOutside from '@/directives/click-outside'
+import './assets/styles/css/_settings.css';
 
 const app = createApp(App)
 

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  outputDir: 'demo'
+}