@lemonadejs/calendar 3.0.3 → 3.1.0

package/README.md

@@ -1,81 +1,78 @@
-# LemonadeJS Calendar
-
-[Official website and documentation is here](https://lemonadejs.net/components/calendar)
-
-Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
-
-The LemonadeJS Calendar Component is a lightweight and agile calendar solution that empowers developers with efficient date management capabilities. With seamless navigation between months and years, intuitive day selection, and the ability to attach values and events, this highly customizable component provides a versatile foundation for scheduling applications, booking systems, and more. Its optimized codebase ensures fast performance, while its responsive design guarantees a consistent user experience across devices. Streamline your date management with the LemonadeJS Calendar Component and unlock enhanced productivity for your users.
-
-## Features
-
--   Lightweight: The JavaScript Calendar is only about 2 KBytes;
--   Integration: It can be used as a standalone library or integrated with any modern framework;
-
-## Getting Started
-
-You can install using NPM or using directly from a CDN.
-
-### npm Installation
-
-To install it in your project using npm, run the following command:
-
-```bash
-$ npm install @lemonadejs/calendar
-```
-
-### CDN
-
-To use calendar via a CDN, include the following script tags in your HTML file:
-
-```html
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/index.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/style.min.css" />
-```
-
-### Usage
-
-Quick example with Lemonade
-
-```javascript
-import Calendar from "@lemonadejs/calendar";
-import "@lemonadejs/calendar/dist/style.css"
-
-export default function App() {
-    const self = this;
-
-    return `<Calendar />`;
-}
-```
-
-### Configuration
-
-You can configure things such as calendar starting date, calendar events, and customize functions.
-
-#### Calendar Properties
-
-| Property | Type | Description |
-| -------- | ---- | ----------- |
-| value | date | The value currently attached to the calendar. |
-| range | array | Defines a restricted range of selectable dates within the calendar. Example: ['2023-06-20', '2023-06-25']. |
-| closed | boolean | Control when the calendar modal is open or closed. |
-| time | boolean | Enables time selection into the calendar. |
-| type | string | |
-
-### Calendar Events
-
-| Event | Type | Description |
-| -------- | ---- | ----------- |
-| onopen? | () => void | Called when modal opens. |
-| onclose? | () => void | Called when modal closes. |
-| onupdate? | (instance.value) => void | Called when value updates. |
-| onchange? | (instance.value) => void | Called when some state inside the component changes. |
-
-## License
-
-The [LemonadeJS](https://lemonadejs.net) Calendar is released under the MIT.
-
-## Other Tools
-
--   [jSuites](https://jsuites.net/v4/)
--   [Jspreadsheet](https://jspreadsheet.com)
+# LemonadeJS Calendar
+
+[Official website and documentation is here](https://lemonadejs.net/components/calendar)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+
+The LemonadeJS Calendar Component is a lightweight and agile calendar solution that empowers developers with efficient date management capabilities. With seamless navigation between months and years, intuitive day selection, and the ability to attach values and events, this highly customizable component provides a versatile foundation for scheduling applications, booking systems, and more. Its optimized codebase ensures fast performance, while its responsive design guarantees a consistent user experience across devices. Streamline your date management with the LemonadeJS Calendar Component and unlock enhanced productivity for your users.
+
+## Features
+
+-   Lightweight: The JavaScript Calendar is only about 2 KBytes;
+-   Integration: It can be used as a standalone library or integrated with any modern framework;
+
+## Getting Started
+
+You can install using NPM or using directly from a CDN.
+
+### npm Installation
+
+To install it in your project using npm, run the following command:
+
+```bash
+$ npm install @lemonadejs/calendar
+```
+
+### CDN
+
+To use calendar via a CDN, include the following script tags in your HTML file:
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/style.min.css" />
+```
+
+### Usage
+
+Quick example with Lemonade
+
+```javascript
+import Calendar from "@lemonadejs/calendar";
+import "@lemonadejs/calendar/dist/style.css"
+
+export default function App() {
+    const self = this;
+
+    return `<Calendar type="inline" />`;
+}
+```
+
+### Configuration
+
+You can configure things such as calendar starting date, calendar events, and customize functions.
+
+#### Calendar Properties
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| value | date | The value currently attached to the calendar. |
+| range | Boolean | Activates the range mode in the calendar, enabling users to select two dates and represent the range between them as a value. |
+| type | string | Specifies the parameters for controlling the rendering behavior of the calendar. |
+| numeric | boolean | Enables the use of numeric dates, treating them as serial numbers. |
+| input? | HTML element | An optional reference to control the calendar opening. The value is automatically bound when using this property. |
+
+### Calendar Events
+
+| Event | Type | Description |
+| -------- | ---- | ----------- |
+| onupdate?: (self, value) => void | Called when a new date is selected. |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) Calendar is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net/v4/)
+-   [Jspreadsheet](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -1,24 +1,35 @@
-/**
- * Official Type definitions for LemonadeJS plugins
- * https://lemonadejs.net
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- */
-
-interface Calendar {
-    (): any
-    [key: string]: any
-}
-
-interface options {
-    range?: boolean;
-    type?: 'default' | 'inline';
-    value?: number | string;
-    numeric?: boolean;
-    input?: HTMLElement;
-}
-
-interface instance {
-
-}
-
-export declare function Calendar(el: HTMLElement, options?: options): instance;
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+declare function Calendar(el: HTMLElement, options?: Calendar.Options): Calendar.Instance;
+
+declare namespace Calendar {
+    interface Options {
+        /** Range picker */
+        range?: boolean;
+        /** Calendar type */
+        type?: 'default' | 'inline';
+        /** Calendar value will be a excel-like number or a ISO string. Default false */
+        numeric?: boolean;
+        /** Value */
+        value?: number | string;
+        /** Bind the calendar to na HTML input element */
+        input?: HTMLElement;
+    }
+
+    interface Instance {
+        /** Range picker */
+        range?: boolean;
+        /** Calendar type */
+        type?: 'default' | 'inline';
+        /** Calendar value will be a excel-like number or a ISO string. Default false */
+        numeric?: boolean;
+        /** Value */
+        value?: number | string;
+    }
+}
+
+export default Calendar;