@lion/calendar - npm Package Compare versions

Comparing version 0.13.1 to 0.14.0

CHANGELOG.md

 # Change Log
 
+## 0.14.0
+
+### Minor Changes
+
+- f3e54c56: Publish documentation with a format for Rocket
+- 5db622e9: BREAKING: Align exports fields. This means no more wildcards, meaning you always import with bare import specifiers, extensionless. Import components where customElements.define side effect is executed by importing from '@lion/package/define'. For multi-component packages this defines all components (e.g. radio-group + radio). If you want to only import a single one, do '@lion/radio-group/define-radio' for example for just lion-radio.
+
+### Patch Changes
+
+- Updated dependencies [f3e54c56]
+- Updated dependencies [5db622e9]
+  - @lion/core@0.15.0
+  - @lion/localize@0.17.0
+
 ## 0.13.1
@@ -4,0 +18,0 @@

package.json

 {
   "name": "@lion/calendar",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Standalone calendar",
@@ -27,7 +27,8 @@ "license": "MIT",
   "scripts": {
-    "custom-elements-manifest": "custom-elements-manifest analyze --litelement --exclude 'docs/**/*' 'test-helpers/**/*'",
+    "custom-elements-manifest": "custom-elements-manifest analyze --litelement --exclude \"docs/**/*\" \"test-helpers/**/*\"",
     "debug": "cd ../../ && npm run debug -- --group calendar",
     "debug:firefox": "cd ../../ && npm run debug:firefox -- --group calendar",
     "debug:webkit": "cd ../../ && npm run debug:webkit -- --group calendar",
-    "prepublishOnly": "../../scripts/npm-prepublish.js && npm run custom-elements-manifest",
+    "publish-docs": "node ../../packages-node/publish-docs/src/cli.js --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../",
+    "prepublishOnly": "npm run publish-docs && npm run custom-elements-manifest",
     "test": "cd ../../ && npm run test:browser -- --group calendar"
@@ -39,4 +40,4 @@ },
   "dependencies": {
-    "@lion/core": "0.14.1",
-    "@lion/localize": "0.16.1"
+    "@lion/core": "0.15.0",
+    "@lion/localize": "0.17.0"
   },
@@ -54,5 +55,7 @@ "keywords": [
     ".": "./index.js",
-    "./lion-calendar": "./lion-calendar.js",
-    "./test-helpers": "./test-helpers.js"
+    "./define": "./lion-calendar.js",
+    "./translations/*": "./translations/*",
+    "./test-helpers": "./test-helpers/index.js",
+    "./docs/": "./docs/"
   }
 }

README.md

@@ -1,2 +0,2 @@
-# Calendar
+# Inputs >> Calendar >> Overview ||10
 
@@ -7,15 +7,3 @@ `lion-calendar` is a reusable and accessible calendar view.
 import { html, css } from '@lion/core';
-import './lion-calendar.js';
-
-export default {
-  title: 'Others/Calendar',
-};
-
-const calendarDemoStyle = css`
-  .demo-calendar {
-    border: 1px solid #adadad;
-    box-shadow: 0 0 16px #ccc;
-    max-width: 500px;
-  }
-`;
+import '@lion/calendar/define';
 ```
@@ -27,3 +15,7 @@
     <style>
-      ${calendarDemoStyle}
+      .demo-calendar {
+        border: 1px solid #adadad;
+        box-shadow: 0 0 16px #ccc;
+        max-width: 500px;
+      }
     </style>
@@ -51,6 +43,4 @@ <lion-calendar class="demo-calendar"></lion-calendar>
 
-## How to use
+## Installation
 
-### Installation
-
 ```bash
@@ -61,164 +51,3 @@ npm i --save @lion/calendar
 ```js
-import '@lion/calendar/lion-calendar.js';
+import '@lion/calendar/define';
 ```
-
-### Example
-
-```html
-<lion-calendar></lion-calendar>
-```
-
-## Move to the selected date
-
-The `selectedDate` is the date which is currently marked as selected.
-You usually select a date by clicking on it with the mouse or hitting Enter on the keyboard.
-
-The `selectedDate` might not be within the dates in the current month view.
-
-```js preview-story
-export const selectedDate = () => html`
-  <style>
-    ${calendarDemoStyle}
-  </style>
-  <lion-calendar class="demo-calendar" .selectedDate=${new Date(1988, 2, 5)}></lion-calendar>
-`;
-```
-
-## Central Date
-
-The `centralDate` defines which day will be focused when keyboard moves the focus to the current month grid.
-By default it is set to today, or the enabled day of the current month view that is closest to today's date.
-
-The next and previous months' buttons work by changing the `centralDate` with plus or minus one month.
-Changing the `centralDate` may mean a different view will be displayed to your users if it is in a different month.
-Usually if you change only the day, "nothing" happens as it's already currently in view.
-
-The `centralDate` can be different from `selectedDate` as you can have today as actively selected but still look at date that is years ago.
-When the `selectedDate` changes, it will sync its value to the `centralDate`.
-
-```js preview-story
-export const centralDate = () => {
-  const today = new Date();
-  const centralDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
-  return html`
-    <style>
-      ${calendarDemoStyle}
-    </style>
-    <lion-calendar class="demo-calendar" .centralDate="${centralDate}"></lion-calendar>
-  `;
-};
-```
-
-## Controlling focus
-
-You can control the focus by calling the following methods
-
-- `focusCentralDate()`
-- `focusSelectedDate()`
-- `focusDate(dateInstanceToFocus)`
-
-Be aware that the central date changes when a new date is focused.
-
-```js preview-story
-export const controllingFocus = () => {
-  const today = new Date();
-  const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
-  const centralDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
-  return html`
-    <style>
-      ${calendarDemoStyle}
-    </style>
-    <lion-calendar
-      id="js-demo-calendar"
-      class="demo-calendar"
-      .selectedDate="${selectedDate}"
-      .centralDate="${centralDate}"
-    ></lion-calendar>
-    <p>
-      Focus
-      <button @click="${() => document.querySelector('#js-demo-calendar').focusCentralDate()}">
-        Central date
-      </button>
-      <button @click="${() => document.querySelector('#js-demo-calendar').focusSelectedDate()}">
-        Selected date
-      </button>
-      <button @click="${() => document.querySelector('#js-demo-calendar').focusDate(today)}">
-        Today
-      </button>
-    </p>
-  `;
-};
-```
-
-## Limiting selectable values
-
-### Providing a lower limit
-
-To give a lower limit you can bind a date to the `minDate` property.
-
-```js preview-story
-export const providingLowerLimit = () => {
-  const minDate = new Date();
-  return html`
-    <style>
-      ${calendarDemoStyle}
-    </style>
-    <lion-calendar class="demo-calendar" .minDate="${minDate}"></lion-calendar>
-  `;
-};
-```
-
-### Provide a higher limit
-
-To give a higher limit you can bind a date to the `maxDate` property. In this example, we show how to create an offset of + 2 days.
-
-```js preview-story
-export const providingHigherLimit = () => {
-  const today = new Date();
-  const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2);
-  return html`
-    <style>
-      ${calendarDemoStyle}
-    </style>
-    <lion-calendar class="demo-calendar" .maxDate="${maxDate}"></lion-calendar>
-  `;
-};
-```
-
-### Provide a list of disabled dates
-
-In some cases a specific date or day of the week needs to be disabled, supply those days to the `disableDates` property.
-
-```js preview-story
-export const disabledDates = () => html`
-  <style>
-    ${calendarDemoStyle}
-  </style>
-  <lion-calendar
-    class="demo-calendar"
-    .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
-  ></lion-calendar>
-`;
-```
-
-### Combined disable dates
-
-To limit the scope of possible dates further, combine the methods mentioned above.
-
-```js preview-story
-export const combinedDisabledDates = () => {
-  const today = new Date();
-  const maxDate = new Date(today.getFullYear(), today.getMonth() + 2, today.getDate());
-  return html`
-    <style>
-      ${calendarDemoStyle}
-    </style>
-    <lion-calendar
-      class="demo-calendar"
-      .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
-      .minDate="${new Date()}"
-      .maxDate="${maxDate}"
-    ></lion-calendar>
-  `;
-};
-```

src/LionCalendar.js

@@ -36,8 +36,8 @@ import { html, LitElement } from '@lion/core';
             case 'bg-BG':
-              return import('../translations/bg.js');
+              return import('@lion/calendar/translations/bg.js');
             case 'cs-CZ':
-              return import('../translations/cs.js');
+              return import('@lion/calendar/translations/cs.js');
             case 'de-AT':
             case 'de-DE':
-              return import('../translations/de.js');
+              return import('@lion/calendar/translations/de.js');
             case 'en-AU':
@@ -47,29 +47,29 @@ case 'en-GB':
             case 'en-US':
-              return import('../translations/en.js');
+              return import('@lion/calendar/translations/en.js');
             case 'es-ES':
-              return import('../translations/es.js');
+              return import('@lion/calendar/translations/es.js');
             case 'fr-FR':
             case 'fr-BE':
-              return import('../translations/fr.js');
+              return import('@lion/calendar/translations/fr.js');
             case 'hu-HU':
-              return import('../translations/hu.js');
+              return import('@lion/calendar/translations/hu.js');
             case 'it-IT':
-              return import('../translations/it.js');
+              return import('@lion/calendar/translations/it.js');
             case 'nl-BE':
             case 'nl-NL':
-              return import('../translations/nl.js');
+              return import('@lion/calendar/translations/nl.js');
             case 'pl-PL':
-              return import('../translations/pl.js');
+              return import('@lion/calendar/translations/pl.js');
             case 'ro-RO':
-              return import('../translations/ro.js');
+              return import('@lion/calendar/translations/ro.js');
             case 'ru-RU':
-              return import('../translations/ru.js');
+              return import('@lion/calendar/translations/ru.js');
             case 'sk-SK':
-              return import('../translations/sk.js');
+              return import('@lion/calendar/translations/sk.js');
             case 'uk-UA':
-              return import('../translations/uk.js');
+              return import('@lion/calendar/translations/uk.js');
             case 'zh-CN':
-              return import('../translations/zh.js');
+              return import('@lion/calendar/translations/zh.js');
             default:
-              return import('../translations/en.js');
+              return import('@lion/calendar/translations/en.js');
           }
@@ -76,0 +76,0 @@ },

test/lion-calendar.test.js

 import { html } from '@lion/core';
-import '@lion/core/test-helpers/keyboardEventShimIE.js';
+import '@lion/core/test-helpers';
 import { localize } from '@lion/localize';
@@ -7,3 +7,3 @@ import { localizeTearDown } from '@lion/localize/test-helpers';
 import sinon from 'sinon';
-import '../lion-calendar.js';
+import '@lion/calendar/define';
 import { isSameDate } from '../src/utils/isSameDate.js';
@@ -10,0 +10,0 @@ import { CalendarObject, DayObject } from '../test-helpers.js';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

279515

increased by1.24%

Number of package files

94

increased by3.3%

Lines of code

7715

increased by0.04%

Worsened metrics

Number of lines in readme file

50

decreased by-77.38%

Dependency changes

• + Added@lion/core@0.15.0(transitive)

• + Added@lion/localize@0.17.0(transitive)

• + Addedsingleton-manager@1.4.0(transitive)

• - Removed@lion/core@0.14.1(transitive)

• - Removed@lion/localize@0.16.1(transitive)

• - Removedsingleton-manager@1.3.0(transitive)

• Updated@lion/core@0.15.0

• Updated@lion/localize@0.17.0