@forter/calendar - npm Package Compare versions

Comparing version 1.3.5 to 1.3.6

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.3.6](https://github.com/forter/web-components/compare/@forter/calendar@1.3.5...@forter/calendar@1.3.6) (2022-04-14)
+
+
+### Bug Fixes
+
+* **calendar:** fix js error when passing options ([#899](https://github.com/forter/web-components/issues/899)) ([9ff9287](https://github.com/forter/web-components/commit/9ff9287))
+
+
+
+
+
 ## [1.3.5](https://github.com/forter/web-components/compare/@forter/calendar@1.3.4...@forter/calendar@1.3.5) (2022-04-05)
@@ -8,0 +19,0 @@

FcCalendar.js

@@ -7,2 +7,4 @@ import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
 
+const deepClone = d => JSON.parse(JSON.stringify(d));
+
 const DEFAULT_OPTIONS = {
@@ -44,2 +46,11 @@ element: {},
  * </fc-calendar>
+ * ## Examples
+ *
+ * ```html
+ *
+ * <!-- Sample: max year and date -->
+ *
+ * <fc-calendar pickerOptions='{"dropdowns": {"maxYear": 2024, "minYear": 2015, "months": true, "years": true}, "maxDate": "2024-04-04"}'>
+ * </fc-calendar>
+ *
  * ```
@@ -72,2 +83,3 @@ *
       this.calendars = [];
+      this.options = deepClone(DEFAULT_OPTIONS);
       this.init();
@@ -180,5 +192,4 @@ }
       value: function init() {
-        // eslint-disable-next-line prefer-object-spread
-        this.options = {};
-        Object.assign(this.options, DEFAULT_OPTIONS, this.pickerOptions);
+        Object.assign(this.options, this.pickerOptions); // eslint-disable-next-line prefer-object-spread
+
         let [startValue, endValue] = [];
@@ -185,0 +196,0 @@

package.json

 {
   "name": "@forter/calendar",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "calendar from Forter Components",
@@ -54,3 +54,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "e0cffce3c670fab66cfda2b9557870e7d7844cbd"
+  "gitHead": "cd686673981d26249295fd5e04b3c947abdf8e8c"
 }

README.md

@@ -15,2 +15,11 @@ # fc-calendar
 </fc-calendar>
+## Examples
+
+```html
+
+<!-- Sample: max year and date -->
+
+<fc-calendar pickerOptions='{"dropdowns": {"maxYear": 2024, "minYear": 2015, "months": true, "years": true}, "maxDate": "2024-04-04"}'>
+</fc-calendar>
+
 ```
@@ -26,2 +35,3 @@
 | `fullYearHtml`  |                 | `"" \| TemplateResult` |              |                                                 |
+| `options`       |                 | `any`                  |              |                                                 |
 | `pickerOptions` | `pickerOptions` | `{}`                   | {}           | Options for litepicker to override the defaults |
@@ -28,0 +38,0 @@ | `single`        | `single`        | `boolean`              |              | Toggle single date or date-range. example: true |

src/FcCalendar.js

@@ -6,2 +6,4 @@ import { LitElement, html, property } from 'lit-element';
 
+const deepClone = d => JSON.parse(JSON.stringify(d));
+
 const DEFAULT_OPTIONS = {
@@ -44,2 +46,11 @@ element: {},
  * </fc-calendar>
+ * ## Examples
+ *
+ * ```html
+ *
+ * <!-- Sample: max year and date -->
+ *
+ * <fc-calendar pickerOptions='{"dropdowns": {"maxYear": 2024, "minYear": 2015, "months": true, "years": true}, "maxDate": "2024-04-04"}'>
+ * </fc-calendar>
+ *
  * ```
@@ -68,2 +79,3 @@ *
     this.calendars = [];
+    this.options = deepClone(DEFAULT_OPTIONS);
     this.init();
@@ -131,5 +143,4 @@ }
   init() {
+    Object.assign(this.options, this.pickerOptions);
     // eslint-disable-next-line prefer-object-spread
-    this.options = {};
-    Object.assign(this.options, DEFAULT_OPTIONS, this.pickerOptions);
     let [startValue, endValue] = [];
@@ -136,0 +147,0 @@

web-components.json

@@ -6,4 +6,4 @@ {
       "name": "fc-calendar",
-      "description": "An element by Forter\n<!-- Author: dondrich <[e-mail]> -->\n\n## Usage\n\n```html\n<script>\n   import '@forter/calendar';\n</script>\n\n<fc-calendar>\n</fc-calendar>\n```",
-      "jsDoc": "/**\n * An element by Forter\n * <!-- Author: dondrich <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/calendar';\n * </script>\n *\n * <fc-calendar>\n * </fc-calendar>\n * ```\n *\n * @element fc-calendar\n * @cssprop --fc-calendar-bg-color - background color. example: `pink`\n * @cssprop --fc-calendar-month-button - next/previous month color. example: `pink`\n * @cssprop --fc-calendar-month-button-hover - next/previous month arrow hover color. example: `pink`\n * @cssprop --fc-calendar-month-weekday-color - weekday color. example: `pink`\n * @cssprop --fc-calendar-day-color - day color. example: `pink`\n * @cssprop --fc-calendar-day-color-hover - day hover color. example: `pink`\n * @cssprop --fc-calendar-day-is-today-color - today day color. example: `pink`\n * @cssprop --fc-calendar-day-is-in-range - selected range background color. example: `pink`\n * @cssprop --fc-calendar-day-is-start-color - start day range text color. example: `pink`\n * @cssprop --fc-calendar-day-is-start-bg - start day range background color. example: `pink`\n * @cssprop --fc-calendar-day-is-end-color - end day range text color. example: `pink`\n * @cssprop --fc-calendar-day-is-end-bg - end day range background color. example: `pink`\n * @cssprop --fc-calendar-day-width - calendar day width. example: `10px`\n * @event change - when dates picked. example: `[]` method: `fireDatePickedEvent`\n */",
+      "description": "An element by Forter\n<!-- Author: dondrich <[e-mail]> -->\n\n## Usage\n\n```html\n<script>\n   import '@forter/calendar';\n</script>\n\n<fc-calendar>\n</fc-calendar>\n## Examples\n\n```html\n\n<!-- Sample: max year and date -->\n\n<fc-calendar pickerOptions='{\"dropdowns\": {\"maxYear\": 2024, \"minYear\": 2015, \"months\": true, \"years\": true}, \"maxDate\": \"2024-04-04\"}'>\n</fc-calendar>\n\n```",
+      "jsDoc": "/**\n * An element by Forter\n * <!-- Author: dondrich <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/calendar';\n * </script>\n *\n * <fc-calendar>\n * </fc-calendar>\n * ## Examples\n *\n * ```html\n *\n * <!-- Sample: max year and date -->\n *\n * <fc-calendar pickerOptions='{\"dropdowns\": {\"maxYear\": 2024, \"minYear\": 2015, \"months\": true, \"years\": true}, \"maxDate\": \"2024-04-04\"}'>\n * </fc-calendar>\n *\n * ```\n *\n * @element fc-calendar\n * @cssprop --fc-calendar-bg-color - background color. example: `pink`\n * @cssprop --fc-calendar-month-button - next/previous month color. example: `pink`\n * @cssprop --fc-calendar-month-button-hover - next/previous month arrow hover color. example: `pink`\n * @cssprop --fc-calendar-month-weekday-color - weekday color. example: `pink`\n * @cssprop --fc-calendar-day-color - day color. example: `pink`\n * @cssprop --fc-calendar-day-color-hover - day hover color. example: `pink`\n * @cssprop --fc-calendar-day-is-today-color - today day color. example: `pink`\n * @cssprop --fc-calendar-day-is-in-range - selected range background color. example: `pink`\n * @cssprop --fc-calendar-day-is-start-color - start day range text color. example: `pink`\n * @cssprop --fc-calendar-day-is-start-bg - start day range background color. example: `pink`\n * @cssprop --fc-calendar-day-is-end-color - end day range text color. example: `pink`\n * @cssprop --fc-calendar-day-is-end-bg - end day range background color. example: `pink`\n * @cssprop --fc-calendar-day-width - calendar day width. example: `10px`\n * @event change - when dates picked. example: `[]` method: `fireDatePickedEvent`\n */",
       "attributes": [
@@ -41,2 +41,6 @@ {
         {
+          "name": "options",
+          "type": "any"
+        },
+        {
           "name": "pickerOptions",
@@ -43,0 +47,0 @@ "description": "Options for litepicker to override the defaults",

No alert changes

Improved metrics

Total package byte prevSize

229513

increased by1.09%

Number of package files

40

increased by5.26%

Lines of code

3349

increased by0.75%

Number of lines in readme file

61

increased by19.61%

No dependency changes