add new props

kenhyuwa · Mar 17, 2021 · 2e7bc57 · 2e7bc57
1 parent a4bf200
commit 2e7bc57
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,25 +15,32 @@ All notable changes to this project will be documented in this file.
 
 ## [1.0.2]
 
-- Expose `placeholder`, `clear` function to slot.
+- Expose `placeholder`, `clear` function to slot, work if using slot, [Example](https://litepie.com/#use-slot).
 
 ## [1.0.3]
 
 - Fix typo `inRangeDateBetween`.
 
 ## [1.0.4]
 
-- Fixed `shortcuts` when use custom.
+- Fixed `shortcuts` if custom, [Example](https://litepie.com/#custom-shortcuts).
 
 ## [1.0.5]
 
 - Added dayjs `customParseFormat` plugin, to correctly parse from `formatter` props ([#3](https://github.com/kenhyuwa/litepie-datepicker/pull/3)).
 - Added keyboard event `keyup` for update value ([#5](https://github.com/kenhyuwa/litepie-datepicker/pull/5)).
 
+## [1.0.6]
+
+- New props `footer`, [Example](https://litepie.com/#footer).
+- Redesign layout, for breakpoint `768 ~ 1024`.
+- Hide Next/Prev button if months active.
+
 [Released]: https://github.com/kenhyuwa/litepie-datepicker/
 [1.0.0]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.0
 [1.0.1]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.1
 [1.0.2]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.2
 [1.0.3]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.3
 [1.0.4]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.4
 [1.0.5]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.5
+[1.0.6]: https://github.com/kenhyuwa/litepie-datepicker/releases/tag/v1.0.6
diff --git a/dev/serve.vue b/dev/serve.vue
@@ -99,11 +99,11 @@ export default defineComponent({
       ];
     };
     onMounted(() => {
-      // dateValue.value = {
-      //   startDate: new Date(2021, 9, 1),
-      //   endDate: '2021-09-01'
-      // };
-      dateValue.value = [new Date(2019, 9, 8), new Date(2019, 9, 19)];
+      dateValue.value = {
+        startDate: '20 Mar 2021',
+        endDate: '20 Aug 2021'
+      };
+      // dateValue.value = [new Date(2019, 9, 8), new Date(2019, 9, 19)];
       // dateValue.value = `${new Date(2019, 9, 8).toString()} ~ ${new Date(
       //   2019,
       //   9,

diff --git a/docs/src/App.vue b/docs/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative min-h-screen overflow-hidden bg-light-blue-500">
-    <div class="absolute inset-0 bg-black bg-opacity-80"></div>
+    <div class="absolute inset-0 bg-black bg-opacity-85"></div>
     <div
       class="absolute right-1.5 top-1/3 mt-40 sm:mt-0 sm:top-0 bottom-0 w-full xl:w-1/2 bg-light-blue-500 shadow-2xl rounded-tl-3xl transform translate-x-10 sm:translate-x-24 translate-y-32 sm:translate-y-1/2 lg:translate-y-1/2 xl:translate-y-36 -rotate-6"
     ></div>
@@ -106,10 +106,14 @@
             <h1
               class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-white mt-10 mb-8 sm:mt-14 sm:mb-10"
             >
-              Litepie Datepicker
+              <span
+                class="bg-gradient-to-r bg-clip-text text-transparent from-gray-200 to-light-blue-400"
+              >
+                Litepie Datepicker
+              </span>
             </h1>
             <p
-              class="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 text-gray-300 font-medium tracking-tight mb-10 sm:mb-11"
+              class="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 text-gray-400 font-medium tracking-tight mb-10 sm:mb-11"
             >
               A date range picker component for Vue.js and Tailwind CSS,
               dependent to day.js.
@@ -940,6 +944,41 @@
                 </div>
               </div>
             </div>
+            <div id="footer" class="pt-6 sm:pt-8">
+              <h3 class="group flex items-center font-semibold">
+                <a
+                  href="#footer"
+                  class="absolute after:hash opacity-0 group-hover:opacity-100 -ml-4 text-light-blue-400"
+                  aria-label="Anchor"
+                ></a>
+                <span class="text-lg text-gray-900">
+                  Footer
+                </span>
+              </h3>
+              <div
+                class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-y-8 sm:gap-y-12 lg:gap-y-0 lg:gap-x-8"
+              >
+                <div class="w-full max-w-md">
+                  <litepie-datepicker
+                    :footer="{
+                      apply: 'OK',
+                      cancel: 'Close'
+                    }"
+                    :auto-apply="false"
+                    :formatter="playFormatter"
+                    v-model="dateValue.footer"
+                  />
+                </div>
+                <div class="col-span-2">
+                  <div class="rounded-xl overflow-hidden">
+                    <div class="bg-light-blue-500">
+                      <v-prims language="html" :code="playground.footer">
+                      </v-prims>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </section>
         <section
@@ -1256,6 +1295,7 @@ export default {
       disableInRange: [],
       trigger: [],
       slots: [],
+      footer: [],
       useArray: [],
       useObject: {
         startDate: '',

diff --git a/docs/src/content.js b/docs/src/content.js
@@ -465,6 +465,38 @@ export default {
 };
 </script>`;
 
+  const footer = `<template>
+  <div class="flex">
+    <litepie-datepicker
+      :footer="footerProps"
+      v-model="dateValue"
+    ></litepie-datepicker>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'MyComponent',
+  setup() {
+    const dateValue = ref([]);
+    const footerProps = {
+      apply: 'OK',
+      cancel: 'Close'
+    };
+
+    return {
+      dateValue,
+      footerProps
+    };
+  }
+};
+</script>`;
+
+  /**
+   * Advance
+   */
   const useArray = `<template>
   <div class="flex">
     <litepie-datepicker
@@ -543,7 +575,7 @@ export default {
   const customShortcuts = `<template>
   <div class="flex">
     <litepie-datepicker
-      :shortcuts='customShortcuts'
+      :shortcuts="customShortcuts"
       v-model="dateValue"
     ></litepie-datepicker>
   </div>
@@ -606,7 +638,8 @@ export default {
       disableDate,
       disableInRange,
       trigger,
-      useSlot
+      useSlot,
+      footer
     },
     advance: {
       useArray,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "litepie-datepicker",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A date range picker component for Vue.js and Tailwind CSS, dependent to day.js",
   "main": "dist/litepie-datepicker.ssr.js",
   "browser": "dist/litepie-datepicker.esm.js",

diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap -m-px py-1">
+  <div class="grid grid-cols-7 gap-y-0.5 my-1">
     <transition-group
       enter-from-class="opacity-0"
       enter-to-class="opacity-100"
@@ -8,16 +8,9 @@
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
     >
-      <div
-        v-for="(date, keyDate) in calendar.date()"
-        :key="keyDate"
-        :style="{
-          width: `calc(100% / ${weeks.length})`
-        }"
-        class="my-px"
-      >
+      <div v-for="(date, keyDate) in calendar.date()" :key="keyDate">
         <div
-          class="relative flex-1 flex justify-center"
+          class="relative"
           :class="{ 'litepie-tooltip': asRange && date.duration() }"
           :data-tooltip="`${date.duration()}`"
         >
@@ -37,7 +30,7 @@
           </transition>
           <button
             type="button"
-            class="litepie-datepicker-date relative w-full h-10 lg:w-9 lg:h-9 flex justify-center items-center text-xs 2xl:text-sm focus:outline-none"
+            class="litepie-datepicker-date relative w-12 h-12 lg:w-10 lg:h-10 flex justify-center items-center text-xs 2xl:text-sm focus:outline-none"
             :class="[
               datepickerClasses(date),
               asRange ? 'transition-all' : 'transition-colors'

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -3,7 +3,10 @@
     class="flex justify-between items-center px-2 py-1.5 rounded-md border border-black border-opacity-10 dark:border-litepie-secondary-700 dark:border-opacity-100"
   >
     <div class="flex-shrink-0">
-      <span class="inline-flex rounded-full">
+      <span
+        v-show="panel.calendar || panel.year"
+        class="inline-flex rounded-full"
+      >
         <button
           type="button"
           class="p-1.5 rounded-full bg-white text-litepie-secondary-600 transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
@@ -36,22 +39,25 @@
       <span class="flex-1 flex rounded-md">
         <button
           type="button"
-          class="px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
+          class="px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-semibold sm:font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
           v-text="calendar.month"
           @click="calendar.openMonth()"
         ></button>
       </span>
       <span class="flex-1 flex rounded-md">
         <button
           type="button"
-          class="px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
+          class="px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-semibold sm:font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"
           v-text="calendar.year"
           @click="calendar.openYear()"
         ></button>
       </span>
     </div>
     <div class="flex-shrink-0">
-      <span class="inline-flex rounded-full">
+      <span
+        v-show="panel.calendar || panel.year"
+        class="inline-flex rounded-full"
+      >
         <button
           type="button"
           class="p-1.5 rounded-full bg-white text-litepie-secondary-600 transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25"