-
-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(common)!: migrate from Flatpickr to Vanilla-Calendar (#1466)
* feat!: migrate from Flatpickr to Vanilla-Calendar
- Loading branch information
1 parent
12661a3
commit fb6e950
Showing
75 changed files
with
1,142 additions
and
1,397 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
docs/column-functionalities/editors/date-editor-(vanilla-calendar).md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| ##### index | ||
| - [Editor Options](#editor-options) | ||
| - [Custom Validator](#custom-validator) | ||
| - See the [Editors - Wiki](../Editors.md) for more general info about Editors (validators, event handlers, ...) | ||
|
|
||
| ### Information | ||
| The Date Editor is provided through an external library named [Vanilla-Calendar-Picker](https://github.com/ghiscoding/vanilla-calendar-picker) (a fork of [Vanilla-Calendar-Pro](https://vanilla-calendar.pro)) and all options from that library can be added to your `editorOptions` (see below), so in order to add things like minimum date, disabling dates, ... just review all the [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/docs/reference/additionally/settings) and then add them into `editorOptions`. Also just so you know, `editorOptions` is use by all other editors as well to expose external library like Autocompleter, Multiple-Select, etc... | ||
|
|
||
| ### Demo | ||
| [Demo Page](https://ghiscoding.github.io/slickgrid-universal/#/example12) | [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts) | ||
|
|
||
| ### Editor Options | ||
| You can use any of the Vanilla-Calendar [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) by adding them to `editorOptions` as shown below. | ||
|
|
||
| > **Note** for easier implementation, you should import `VanillaCalendarOption` from Slickgrid-Universal common package. | ||
| ```ts | ||
| import { type VanillaCalendarOption } from '@slickgrid-universal/common'; | ||
|
|
||
| prepareGrid() { | ||
| this.columnDefinitions = [ | ||
| { | ||
| id: 'title', name: 'Title', field: 'title', | ||
| editor: { | ||
| model: Editors.date, | ||
| editorOptions: { | ||
| range: { | ||
| max: 'today', | ||
| disabled: ['2022-08-15', '2022-08-20'], | ||
| } | ||
| } as VanillaCalendarOption, | ||
| }, | ||
| }, | ||
| ]; | ||
| } | ||
| ``` | ||
|
|
||
| #### Grid Option `defaultEditorOptions | ||
| You could also define certain options as a global level (for the entire grid or even all grids) by taking advantage of the `defaultEditorOptions` Grid Option. Note that they are set via the editor type as a key name (`autocompleter`, `date`, ...) and then the content is the same as `editorOptions` (also note that each key is already typed with the correct editor option interface), for example | ||
|
|
||
| ```ts | ||
| this.gridOptions = { | ||
| defaultEditorOptions: { | ||
| date: { range: { min: 'today' } }, // typed as VanillaCalendarOption | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Custom Validator | ||
| You can add a Custom Validator from an external function or inline (inline is shown below and comes from [Example 12](https://ghiscoding.github.io/slickgrid-universal/#/example12)) | ||
| ```ts | ||
| initializeGrid() { | ||
| this.columnDefinitions = [ | ||
| { | ||
| id: 'title', name: 'Title', field: 'title', | ||
| editor: { | ||
| model: Editors.date, | ||
| required: true, | ||
| validator: (value, args) => { | ||
| const dataContext = args && args.item; | ||
| if (dataContext && (dataContext.completed && !value)) { | ||
| return { valid: false, msg: 'You must provide a "Finish" date when "Completed" is checked.' }; | ||
| } | ||
| return { valid: true, msg: '' }; | ||
| } | ||
| }, | ||
| }, | ||
| ]; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 34 additions & 44 deletions
78
docs/column-functionalities/filters/Styling-Filled-Filters.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,45 @@ | ||
| You can style any (or all) of the Filter(s) when they have value, the lib will automatically add a `filled` CSS class which you can style as your wish. There is no style by default, if you wish to add styling, you will be required to add your own. | ||
| You can style any (or all) of the Filter(s) when they have value, the lib will automatically add a `filled` CSS class which you can style as your wish. There is no style by default, if you wish to add styling, you will be required to add your own. | ||
|
|
||
| ## Styled Example | ||
| ## Styled Example | ||
|  | ||
|
|
||
| ## Code example | ||
| For example, the print screen shown earlier was styled using this piece of SASS (`.scss`) code. Also note that the demo adds a Font-Awesome icon which can be used with `font-family: "FontAwesome"` and the relevent unicode character, for example the filter icon is `content: " \f0b0"`. You can basically add a lot of different styling to your populated filters. | ||
| For example, the print screen shown earlier was styled using this piece of SASS (`.scss`) code. You can customize the styling to your liking. | ||
|
|
||
| ```scss | ||
| $filter-filled-bg-color: darkorange; | ||
|
|
||
| .search-filter.filled { | ||
| // color: rgb(189, 104, 1); | ||
| // font-weight: bold; | ||
| background-color: $filter-filled-bg-color; | ||
| .ms-choice { | ||
| // color: rgb(189, 104, 1); | ||
| // font-weight: bold; | ||
| background-color: $filter-filled-bg-color; | ||
| } | ||
|
|
||
|
|
||
| input, input.flatpickr-input { | ||
| // border: 1px solid darken(rgb(204, 204, 204), 15%) !important; | ||
| // color: rgb(189, 104, 1); | ||
| // font-weight: bold; | ||
| background-color: $filter-filled-bg-color !important; | ||
| $slick-filled-filter-color: $slick-form-control-focus-border-color; | ||
| $slick-filled-filter-border: $slick-form-control-border; | ||
| $slick-filled-filter-box-shadow: $slick-form-control-focus-border-color; | ||
| $slick-filled-filter-font-weight: 400; | ||
|
|
||
| .slick-headerrow { | ||
| input.search-filter.filled, | ||
| .search-filter.filled input, | ||
| .search-filter.filled .date-picker input, | ||
| .search-filter.filled .input-group-addon.slider-value, | ||
| .search-filter.filled .input-group-addon.slider-range-value, | ||
| .search-filter.filled .input-group-addon select { | ||
| color: $slick-filled-filter-color; | ||
| font-weight: $slick-filled-filter-font-weight; | ||
| border: $slick-filled-filter-border; | ||
| box-shadow: $slick-filled-filter-box-shadow; | ||
| &.input-group-prepend { | ||
| border-right: 0; | ||
| } | ||
| &.input-group-append { | ||
| border-left: 0; | ||
| } | ||
| } | ||
| /* | ||
| &.ms-parent, .flatpickr > input, .input-group > input { | ||
| border: 1px solid darken(rgb(204, 204, 204), 15%) !important; | ||
| } | ||
| */ | ||
|
|
||
| div.flatpickr:after, button > div:after, & + span:after, .input-group > span:after { | ||
| font-family: "FontAwesome"; | ||
| font-size: 75%; | ||
| content: " \f0b0"; | ||
| position: absolute; | ||
| top: 2px; | ||
| right: 5px; | ||
| z-index: 1000; | ||
| color: #ca880f; | ||
| } | ||
|
|
||
| .ms-choice > div:after { | ||
| top: -4px; | ||
| right: 16px; | ||
| .search-filter.filled .input-group-prepend select { | ||
| border-right: 0; | ||
| } | ||
| & + span:after { | ||
| top: 6px; | ||
| right: 10px; | ||
| .search-filter.filled .ms-choice { | ||
| box-shadow: $slick-filled-filter-box-shadow; | ||
| border:$slick-filled-filter-border; | ||
| span { | ||
| font-weight: $slick-filled-filter-font-weight; | ||
| color: $slick-filled-filter-color; | ||
| } | ||
| } | ||
| } | ||
| ``` |
Oops, something went wrong.