docs(usage): update readme and demo with additional features

svelte-plugins · Nov 23, 2023 · f33c5f3 · f33c5f3
1 parent 6221b28
commit f33c5f3
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -70,7 +70,8 @@ npm i -D @svelte-plugins/datepicker
 | showTimePicker	  |	If true, the picker will show the time picker.	                                      | `boolean` (default: `false`)
 | enableFutureDates	|	If true, the picker will allow the user to select future dates.                       | `boolean` (default: `false`)
 | enablePastDates	  |	If disabled, the picker will prevent the user from selecting anything prior to today.	| `boolean` (default: `true`)
-
+| theme             | The theme name that should be assigned to the theme data-attribute.                   | `string` (default: `''`)
+| presetRanges      | The array of present configs to replace the default set with.                         | `array` (default: [...])
 
 ## Theming
 You can customize DatePicker theme using several methods:
@@ -81,6 +82,9 @@ You can customize DatePicker theme using several methods:
 DatePicker CSS variables:
 
 ```css
+  /**
+   * Common
+   */
   --datepicker-border-color: #e8e9ea;
 
   --datepicker-border-radius-small: .125rem;
@@ -135,6 +139,9 @@ DatePicker CSS variables:
   --datepicker-padding-xxxlarge: calc(var(--datepicker-spacing) * 5);
   --datepicker-padding-jumbo: calc(var(--datepicker-spacing) * 6);
 
+  /**
+   * Container
+   */
   --datepicker-container-background: #fff;
   --datepicker-container-border: 1px solid var(--datepicker-border-color);
   --datepicker-container-border-radius: 12px;
@@ -145,13 +152,19 @@ DatePicker CSS variables:
   --datepicker-container-width: fit-content;
   --datepicker-container-zindex: 99;
 
+  /**
+   * Calendar
+   */
   --datepicker-calendar-border: 0;
   --datepicker-calendar-padding: var(--datepicker-padding-base) var(--datepicker-padding-large) var(--datepicker-padding-xlarge);
   --datepicker-calendar-position: relative;
   --datepicker-calendar-width: 310px;
 
   --datepicker-calendar-split-border: 1px solid var(--datepicker-border-color);
 
+  /**
+   * Calendar Header
+   */
   --datepicker-calendar-header-align-items: center;
   --datepicker-calendar-header-color: var(--datepicker-color);
   --datepicker-calendar-header-display: flex;
@@ -161,6 +174,9 @@ DatePicker CSS variables:
   --datepicker-calendar-header-padding: var(--datepicker-padding-large) var(--datepicker-padding-base);
   --datepicker-calendar-header-user-select: none;
 
+  /**
+   * Calendar Header Month Navigation
+   */
   --datepicker-calendar-header-month-nav-background: transparent;
   --datepicker-calendar-header-month-nav-background-hover: #f5f5f5;
   --datepicker-calendar-header-month-nav-border: 0;
@@ -175,18 +191,41 @@ DatePicker CSS variables:
   --datepicker-calendar-header-month-nav-text-align: center;
   --datepicker-calendar-header-month-nav-width: 32px;
 
+  --datepicker-calendar-header-month-nav-icon-next-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACLSURBVHgB7ZTLCYAwEERHbcASUpIlaAd2YDoxlmIX3ixFEwwYQQL5kCWwD94ph5mwywIMUzmLlYRBe1lXENBrT+oSgktwiepLNJ63EWkl3AOltBMCkHh/kEv5F9SCGN8IzKntEYfAdwQb0kYaHO4uoUJBBIdzOAoiKMMNQ47wDvEceA7Zrp3BMLVyA56LVFYQOkngAAAAAElFTkSuQmCC') no-repeat center center;
+  --datepicker-calendar-header-month-nav-icon-next-background-size: 16px 16px;
+  --datepicker-calendar-header-month-nav-icon-next-filter: invert(0);
+  --datepicker-calendar-header-month-nav-icon-next-height: 16px;
+  --datepicker-calendar-header-month-nav-icon-next-margin: auto;
+  --datepicker-calendar-header-month-nav-icon-next-width: 16px;
+
+  --datepicker-calendar-header-month-nav-icon-prev-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgB7ZbBDYAgDEW/xgEcgZHcQDYRJ5ER3EhHcAPtAQMHQwIiSNKXvAMH+CUNDQDDVM5kLMJCnsYBmXHDN1IgIxzO4QIZ+Ty8gT9cOuuZ3BHHQa4hGxTszVOpnoJaFMbXAk2OzvpNC+7zojYVewFcBBdRVRE9CqCR4EvWIR4JO5iC5jzD/IoLU/FXPXheCj0AAAAASUVORK5CYII=') no-repeat center center;
+  --datepicker-calendar-header-month-nav-icon-prev-background-size: 16px 16px;
+  --datepicker-calendar-header-month-nav-icon-prev-filter: invert(0);
+  --datepicker-calendar-header-month-nav-icon-prev-height: 16px;
+  --datepicker-calendar-header-month-nav-icon-prev-margin: auto;
+  --datepicker-calendar-header-month-nav-icon-prev-width: 16px;
+
+  /**
+   * Calendar Header Text
+   */
   --datepicker-calendar-header-text-align-items: center;
   --datepicker-calendar-header-text-color: var(--datepicker-color);
   --datepicker-calendar-header-text-display: flex;
   --datepicker-calendar-header-text-font-size: inherit;
   --datepicker-calendar-header-text-font-weight: var(--datepicker-font-weight-medium);
   --datepicker-calendar-header-text-gap: 8px;
 
+  /**
+   * Calendar Header Year Navigation Container
+   */
   --datepicker-calendar-header-year-align-items: center;
   --datepicker-calendar-header-year-display: flex;
   --datepicker-calendar-header-year-flex-direction: column;
   --datepicker-calendar-header-year-margin: 0;
 
+  /**
+   * Calendar Header Year Navigation Controls
+   */
   --datepicker-calendar-header-year-nav-display: block;
   --datepicker-calendar-header-year-nav-color: var(--datepicker-color);
   --datepicker-calendar-header-year-nav-height: 12px;
@@ -196,11 +235,31 @@ DatePicker CSS variables:
   --datepicker-calendar-header-year-nav-width: 12px;
   --datepicker-calendar-header-year-nav-icon-font-size: 13px;
 
+  --datepicker-calendar-header-year-nav-icon-next-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABuSURBVHgB7c7BCYAwDIXhBy7gKB2hm9Vx3UJzqCASRWOTHvo+yDG8HyAiGt2Ef7LcLLeigyK31SsIdh4Pj9DGwyKu40u9kAht/OAe8TTuHvFm3C3iy3jziGQYv4vIMMjGcS0iwSjBWN/on4hoADu88UW4KXFVfgAAAABJRU5ErkJggg==') no-repeat center center;
+  --datepicker-calendar-header-year-nav-icon-next-background-size: 12px 12px;
+  --datepicker-calendar-header-year-nav-icon-next-display: block;
+  --datepicker-calendar-header-year-nav-icon-next-filter: invert(0);
+  --datepicker-calendar-header-year-nav-icon-next-height: 12px;
+  --datepicker-calendar-header-year-nav-icon-next-width: 12px;
+
+  --datepicker-calendar-header-year-nav-icon-prev-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB3SURBVHgB7dTRCYAwDATQAxdwlI6QzZpx3UIrKJSC1aS2fngP7kvi3VcBIqK/m26+S8qcssBHWu5Dynokwi5m9wIHyX5gHRGL2wAndYwoyxWN1DDi9XLLiG7lT0Z0L6+NGFZ+NWJoeW2EYjD9svy0PzACIiJqsAHF2EaCcjFGaQAAAABJRU5ErkJggg==') no-repeat center center;
+  --datepicker-calendar-header-year-nav-icon-prev-background-size: 12px 12px;
+  --datepicker-calendar-header-year-nav-icon-prev-display: block;
+  --datepicker-calendar-header-year-nav-icon-prev-filter: invert(0);
+  --datepicker-calendar-header-year-nav-icon-prev-height: 12px;
+  --datepicker-calendar-header-year-nav-icon-prev-width: 12px;
+
+  /**
+   * Presets
+   */
   --datepicker-presets-border: 1px solid var(--datepicker-border-color);
   --datepicker-presets-padding: 24px;
   --datepicker-presets-minwidth: 180px;
   --datepicker-presets-maxwidth: 200px;
 
+  /**
+   * Presets Button
+   */
   --datepicker-presets-button-background: transparent;
   --datepicker-presets-button-background-hover: var(--datepicker-state-hover);
   --datepicker-presets-button-background-active: var(--datepicker-state-active);
@@ -227,29 +286,44 @@ DatePicker CSS variables:
   --datepicker-presets-button-text-align: left;
   --datepicker-presets-button-zindex-focus: 10;
 
+  /**
+   * Timepicker Container
+   */
   --datepicker-timepicker-container-align-items: center;
   --datepicker-timepicker-container-display: flex;
   --datepicker-timepicker-container-justify-content: space-around;
   --datepicker-timepicker-container-margin-bottom: var(--datepicker-margin-xlarge);
 
+  /**
+   * Timepicker Input
+   */
   --datepicker-timepicker-input-border: 1px solid var(--datepicker-border-color);
   --datepicker-timepicker-input-border-radius: var(--datepicker-border-radius-base);
   --datepicker-timepicker-input-display: block;
   --datepicker-timepicker-input-font-family: var(--datepicker-font-family);
   --datepicker-timepicker-input-margin: 0 auto;
   --datepicker-timepicker-input-padding: var(--datepicker-padding-small) var(--datepicker-padding-base);
 
+  /**
+   * Calendar DOW (Days of Week)
+   */
   --datepicker-calendar-dow-color: #8b9198;
   --datepicker-calendar-dow-font-size: var(--datepicker-font-size-base);
   --datepicker-calendar-dow-font-weight: var(--datepicker-font-weight-medium);
   --datepicker-calendar-dow-margin-bottom: var(--datepicker-margin-large);
   --datepicker-calendar-dow-text-align: center;
 
+  /**
+   * Calendar Month
+   */
   --datepicker-calendar-container-display: grid;
   --datepicker-calendar-container-grid-template-columns: repeat(7, 1fr);
   --datepicker-calendar-container-grid-gap: 0;
   --datepicker-calendar-container-width: fit-content;
 
+  /**
+   * Calendar Day Container
+   */
   --datepicker-calendar-day-container-appearance: none;
   --datepicker-calendar-day-container-background: inherit;
   --datepicker-calendar-day-container-border: 0;
@@ -258,14 +332,17 @@ DatePicker CSS variables:
   --datepicker-calendar-day-container-position: relative;
   --datepicker-calendar-day-container-text-align: center;
 
+  /**
+   * Calendar Day
+   */
   --datepicker-calendar-day-align-items: center;
   --datepicker-calendar-day-background-hover: #f5f5f5;
   --datepicker-calendar-day-border: 1px solid transparent;
   --datepicker-calendar-day-border: 1px solid transparent;
   --datepicker-calendar-day-border-radius: 100%;
-  --datepicker-calendar-day-color: ##232a32;
+  --datepicker-calendar-day-color: #232a32;
   --datepicker-calendar-day-color-disabled: #b9bdc1;
-  --datepicker-calendar-day-color-hover: ##232a32;
+  --datepicker-calendar-day-color-hover: #232a32;
   --datepicker-calendar-day-cursor: pointer;
   --datepicker-calendar-day-cursor-disabled: default;
   --datepicker-calendar-day-display: flex;
@@ -279,11 +356,24 @@ DatePicker CSS variables:
   --datepicker-calendar-day-width: 40px;
   --datepicker-calendar-day-zindex-focus: 12;
 
+  /**
+   * Calendar Days Outside of Month
+   */
+  --datepicker-calendar-day-other-border: 0;
+  --datepicker-calendar-day-other-box-shadow: none;
+  --datepicker-calendar-day-other-color: #d1d3d6;
+
+  /**
+   * Calendar Today
+   */
   --datepicker-calendar-today-background: transparent;
   --datepicker-calendar-today-border: 1px solid #232a32;
   --datepicker-calendar-today-cursor: default;
   --datepicker-calendar-today-font-weight: var(--datepicker-font-weight-bold);
 
+  /**
+   * Calendar Range
+   */
   --datepicker-calendar-range-background: var(--datepicker-state-hover);
   --datepicker-calendar-range-background-disabled: var(--datepicker-state-hover);
   --datepicker-calendar-range-border: 0;
@@ -293,13 +383,35 @@ DatePicker CSS variables:
   --datepicker-calendar-range-cursor: default;
   --datepicker-calendar-range-font-weight: var(--datepicker-font-weight-base);
 
-  --datepicker-calendar-range-start-box-shadow: inset 0 -1px #fff, inset -20px 0 0 var(--datepicker-state-hover);
-  --datepicker-calendar-range-end-box-shadow: inset 0 -1px #fff, inset 20px 0 0 var(--datepicker-state-hover);
+  /**
+   * Calendar Range Start & End
+   */
+  --datepicker-calendar-range-start-box-shadow: inset -20px 0 0 var(--datepicker-state-hover);
+  --datepicker-calendar-range-end-box-shadow: inset 20px 0 0 var(--datepicker-state-hover);
+  --datepicker-calendar-range-start-box-shadow-selected: inset -20px 0 0 #eceff1;
+  --datepicker-calendar-range-end-box-shadow-selected: inset 20px 0 0 #eceff1;
+
+  --datepicker-calendar-range-start-end-background: #f5f5f5;
+  --datepicker-calendar-range-start-end-color: #232a32;
 
+  /**
+   * Calendar Range Selected
+   */
   --datepicker-calendar-range-selected-background: var(--datepicker-state-active);
   --datepicker-calendar-range-selected-border-radius: 20px;
   --datepicker-calendar-range-selected-color: #fff;
   --datepicker-calendar-range-selected-font-weight: var(--datepicker-font-weight-medium);
+
+  --datepicker-calendar-range-selected-start-border-radius: 20px;
+
+  /**
+   * Calendar Range Hover
+   */
+  --datepicker-calendar-range-included-background: #eceff1;
+  --datepicker-calendar-range-included-box-shadow: inset 20px 0 0 #eceff1;
+  --datepicker-calendar-range-included-color: #232a32;
+  --datepicker-calendar-range-included-font-weight: var(--datepicker-font-weight-base);
+  --datepicker-calendar-range-included-height: var(--datepicker-calendar-day-height);
 ```
 
 ### Using the theme property
@@ -309,7 +421,17 @@ DatePicker CSS variables:
 
 <style>
   :global(.datepicker[data-picker-theme="custom-datepicker"]) {
-    --datepicker-container-background: hotpink;
+    --datepicker-state-active: pink;
+    --datepicker-container-background: #FF66AE;
+    --datepicker-calendar-header-text-color: #fff;
+    --datepicker-calendar-dow-color: #fff;
+    --datepicker-calendar-day-color: #fff;
+    --datepicker-calendar-day-color-disabled: pink;
+    --datepicker-calendar-range-selected-background: #ff1683;
+    --datepicker-calendar-header-month-nav-icon-next-filter: invert(100);
+    --datepicker-calendar-header-month-nav-icon-prev-filter: invert(100);
+    --datepicker-calendar-header-year-nav-icon-next-filter: invert(100);
+    --datepicker-calendar-header-year-nav-icon-prev-filter: invert(100);
   }
 </style>
 ```

diff --git a/docs/public/global.css b/docs/public/global.css
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
@@ -240,6 +240,19 @@
           <li>&nbsp;&nbsp;<code>"Last Year"</code></li>
         </ul>]
       </td>
+    </tr>
+		<tr>
+      <td valign="top">presetRanges</td>
+      <td valign="top"><code>array</code></td>
+      <td valign="top">An array of objects containing preset configurations.</td>
+      <td valign="top">
+        [&lbrace;&nbsp;&nbsp;
+        <ul class="clean">
+          <li>&nbsp;&nbsp;<code>"label": "string"</code>,</li>
+          <li>&nbsp;&nbsp;<code>"start": "Date"</code>,</li>
+          <li>&nbsp;&nbsp;<code>"end": "Date"</code></li>
+        </ul>&rbrace;]
+      </td>
     </tr>
   </table>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@svelte-plugins/datepicker",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "license": "MIT",
   "description": "A simple datepicker component designed for Svelte.",
   "author": "Kieran Boyle (https://github.com/dysfunc)",

diff --git a/src/datepicker.d.ts b/src/datepicker.d.ts
@@ -115,6 +115,11 @@ export interface ComponentProps {
    */
   presetLabels: string[];
 
+  /**
+   * An array of preset date ranges with labels and start/end timestamps.
+   */
+  presetRanges: Object[];
+
   /**
    * An array of day-of-week labels.
    */