You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-renderless-calendar

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-renderless-calendar - npm Package Compare versions

Comparing version

1.1.1
to
1.1.2

11

package.json
{
"name": "vue-renderless-calendar",
"version": "1.1.1",
"version": "1.1.2",
"module": "./dist/index.js",
"author": "Seitmagambet Olzhas <seit7magambet@gmail.com>",
"description": "vue scoped-slots calendar",
"description": "Zero dependency Vue renderless calendar with scoped-slots API",
"keywords": [
"vue",
"renderless",
"calendar",
"datepicker",
"scoped-slots"
],
"license": "MIT",

@@ -8,0 +15,0 @@ "repository": {

111

README.md
# WIP: vue-renderless-calendar 📆
> Vue renderless calendar with scoped-slots API
> Zero dependency Vue renderless calendar with scoped-slots API

@@ -18,9 +18,14 @@ ## Install

> Available locales
## Components
- English `locale/en`
- Russian `locale/ru`
### RenderlessCalendar
#### Props
## RenderlessCalendar
> Main wrapper component which contains state of the calendar and other helpful data
### Props
| Prop | Required | Type | Default | Description

@@ -39,35 +44,81 @@ |----------------------|-------------|------------|---------| ---------------------------------

#### Scoped-slots properties
### Scoped-slots properties
| Property | Type | Arguments | Description
|-------------------|-----------------------|---------------|------------
| weekDayNames | Array | |
| monthNames | Array | |
| monthsList | Array | |
| calendar | Array\<CalendarDate\> | |
| selectedDates | Array | |
| Property | Type | Description |
|-------------------|-----------------------|---------------|
| weekDayNames | Array | List of week days with short and full titles from `locale` object |
| monthNames | Array | List of months with short and full titles from `locale` object |
| monthsList | Array | List of months which can be used for rendering months with possibility for changing current month view of calendar using `setMonth` method |
| calendar | Array | Array of months with `month`, `year` number and array of `dates` |
| selectedDates | Array\<CalendarDate\> | Array of current selected dates|
| currentMonth | Number | |
| currentYear | Number | |
| isBetween | Boolean | |
| canGoToPrevMonth | Function | |
| canGoToNexMonth | Function | |
| canGoToPrevMonth | Boolean | |
| canGoToNexMonth | Boolean | |
#### Scoped-slots Methods
| Property | Type | Arguments | Description
|-------------------|----------|---------------|-------------
| prevPage | Function | | Go to previous view iteration
| nextPage | Function | | Go to next view iteration
| resetDates | Function | | Set `selectedDates` to []
| setMonth | Function | monthListItem | Update views current active month
| onDateMouseOut | Function | | Reset current hovered date
| onDateMouseOver | Function | CalendarDate | Set current hovered date
| onDateSelect | Function | CalendarDate | Append selected date to `selectedDates` array using "date select strategy"
### Scoped-slots Methods
| Property | Arguments | Description |
|-------------------|---------------|-------------|
| prevPage | - | Go to previous view iteration |
| nextPage | - | Go to next view iteration |
| resetDates | - | Set `selectedDates` to [] |
| setMonth | monthListItem | Update views current active month |
| isBetween | CalendarDate | Returning true if date between selected dates or hovered date |
| onDateMouseOut | - | Reset current hovered date |
| onDateMouseOver | CalendarDate | Set current hovered date |
| onDateSelect | CalendarDate | Append selected date to `selectedDates` array using "date select strategy" |
#### Events
### Events
| Event name | Payload
|--------------|------------------------
| onDateChange | Array\<CalendarDate\>
| Event name | Payload |
|--------------|-----------------------|
| onDateChange | Array\<CalendarDate\> |
### RenderlessDate
## RenderlessDate
> Wrapper component for calendar cell containing usefull modifiers which can be used for computing styles
### Props
| Prop | Required | Type | Default | Description |
|----------------------|-------------|-----------------------|---------| ---------------------------------|
| selectedDates | true | Array\<CalendarDate\> | | Array of current selected dates |
| date | true | CalendarDate | | CalendarDate object containing useful information and methods |
| minDate | false | String | '' | Minimal valid date (`YYYY-MM-DDD`) |
| maxDate | false | String | '' | Maximal valid date (`YYYY-MM-DDD`) |
| disabledDates | false | Array<String> | [] | Array of `YYYY-MM-DDD` strings containing dates that can't be selected |
| markedDates | false | Array<String> | [] | Array of `YYYY-MM-DDD` strings with special meaning, that later will be accessed via `isMarked` scoped-slots property |
### Scoped-slots properties
| Property | Type | Description
|----------------------|----------|---------------
| isSelected | Boolean |
| isDisabled | Boolean |
| isMarked | Boolean |
| isFirst | Boolean | is first selected date
| isLast | Boolean | is last selected date
| isOneDayAfter | Boolean | is one day after selected date
| isOneDayBefore | Boolean | is one date before selected date
| isOneDayBeforeFirst | Boolean |
| isOneDayAfterFirst | Boolean |
| isOneDayBeforeLast | Boolean |
| isOneDayAfterLast | Boolean |
## CalendarDate
> Class representing information about date
### Properties
| Property | Type | Description |
|-------------------|---------|-------------|
| year | Number | |
| month | Number | 0-11 |
| day | Number | 1-31 |
| actualMonthNumber | Number | Number of month with index correction |
| formatted | String | YYYY-MM-DD |
| isWeekend | Boolean | |
| isToday | Boolean | |
| isOtherMonthDay | Boolean | This field can be used to find out that this is the date from previous or next month |