@yuafox/easepick2-kbd-plugin 2.0.0

package/LICENSE.md

@@ -0,0 +1,5 @@
+# Software License Agreement
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). 
+
+Copyright © 2021-2022, [Rinat G.](https://github.com/wakirin)

package/README.md

@@ -0,0 +1,19 @@
+# @easepick/kbd-plugin
+
+[![npm version](https://badge.fury.io/js/@easepick%2Fkbd-plugin.svg)](https://www.npmjs.com/package/@easepick/kbd-plugin)
+
+> This package does not need to be installed if you are using [@easepick/bundle](https://easepick.com/packages/bundle).
+
+Adds keyboard navigation.
+
+## Documentation
+
+[https://easepick.com/packages/kbd-plugin](https://easepick.com/packages/kbd-plugin)
+
+
+## Options
+
+| Name | Type | Default | Description
+| --- | :---: | :---: | ---
+| unitIndex | number | 1 | `tabIndex` for elements except days elements.
+| dayIndex | number | 2 | `tabIndex` for days elements.

package/dist/index.d.ts

@@ -0,0 +1,81 @@
+import { BasePlugin, IPlugin } from '@yuafox/easepick2-base-plugin';
+import { RangePlugin } from '@yuafox/easepick2-range-plugin';
+import { IKbdPlugin } from './interface';
+import './index.scss';
+export declare class KbdPlugin extends BasePlugin implements IPlugin {
+    docElement: HTMLElement;
+    rangePlugin: RangePlugin;
+    binds: {
+        onView: any;
+        onKeydown: any;
+    };
+    options: IKbdPlugin;
+    /**
+     * Returns plugin name
+     *
+     * @returns String
+     */
+    getName(): string;
+    /**
+     * - Called automatically via BasePlugin.attach() -
+     * The function execute on initialize the picker
+     */
+    onAttach(): void;
+    /**
+     * - Called automatically via BasePlugin.detach() -
+     */
+    onDetach(): void;
+    /**
+     * Function `view` event
+     * Adds `tabIndex` to the picker elements
+     *
+     * @param event
+     */
+    private onView;
+    /**
+     * Function for `keydown` event
+     * Handle keys when the picker has focus
+     *
+     * @param event
+     */
+    private onKeydown;
+    /**
+     * Find closest day elements
+     *
+     * @param layout
+     * @param target
+     * @param isAllow
+     * @returns Boolean
+     */
+    private findAllowableDaySibling;
+    /**
+     * Switch month via buttons (previous month, next month)
+     *
+     * @param evt
+     */
+    private changeMonth;
+    /**
+     * Handle ArrowUp and ArrowDown keys
+     *
+     * @param evt
+     */
+    private verticalMove;
+    /**
+     * Handle ArrowLeft and ArrowRight keys
+     *
+     * @param evt
+     */
+    private horizontalMove;
+    /**
+     * Handle Enter and Space keys
+     *
+     * @param evt
+     */
+    private handleEnter;
+    /**
+     * Manually fire `mouseenter` event to display date range correctly
+     *
+     * @param evt
+     */
+    private onMouseEnter;
+}

package/dist/index.esm.js

@@ -0,0 +1 @@
+import{BasePlugin as e}from"@yuafox/easepick2-base-plugin";class t extends e{docElement=null;rangePlugin;binds={onView:this.onView.bind(this),onKeydown:this.onKeydown.bind(this)};options={unitIndex:1,dayIndex:2};getName(){return"KbdPlugin"}onAttach(){const e=this.picker.options.element,t=e.getBoundingClientRect();if(this.docElement=document.createElement("span"),this.docElement.style.position="absolute",this.docElement.style.top=`${e.offsetTop}px`,this.docElement.style.left=e.offsetLeft+t.width-25+"px",this.docElement.attachShadow({mode:"open"}),this.options.html)this.docElement.shadowRoot.innerHTML=this.options.html;else{const e=`\n      <style>\n      button {\n        border: none;\n        background: transparent;\n        font-size: ${window.getComputedStyle(this.picker.options.element).fontSize};\n      }\n      </style>\n\n      <button>&#128197;</button>\n      `;this.docElement.shadowRoot.innerHTML=e}const n=this.docElement.shadowRoot.querySelector("button");n&&(n.addEventListener("click",(e=>{e.preventDefault(),this.picker.show({target:this.picker.options.element})}),{capture:!0}),n.addEventListener("keydown",(e=>{"Escape"===e.code&&this.picker.hide()}),{capture:!0})),this.picker.options.element.after(this.docElement),this.picker.on("view",this.binds.onView),this.picker.on("keydown",this.binds.onKeydown)}onDetach(){this.docElement&&this.docElement.isConnected&&this.docElement.remove(),this.picker.off("view",this.binds.onView),this.picker.off("keydown",this.binds.onKeydown)}onView(e){const{view:t,target:n}=e.detail;if(n&&"querySelector"in n)if("CalendarDay"!==t||["locked","not-available"].some((e=>n.classList.contains(e)))){[...n.querySelectorAll(".unit:not(.day)")].forEach((e=>e.tabIndex=this.options.unitIndex))}else n.tabIndex=this.options.dayIndex}onKeydown(e){switch(this.onMouseEnter(e),e.code){case"ArrowUp":case"ArrowDown":this.verticalMove(e);break;case"ArrowLeft":case"ArrowRight":this.horizontalMove(e);break;case"Enter":case"Space":this.handleEnter(e);break;case"Escape":this.picker.hide()}}findAllowableDaySibling(e,t,n){const i=Array.from(e.querySelectorAll(`.day[tabindex="${this.options.dayIndex}"]`)),o=i.indexOf(t);return i.filter(((e,t)=>n(t,o)&&e.tabIndex===this.options.dayIndex))[0]}changeMonth(e){const t={ArrowLeft:"previous",ArrowRight:"next"},n=this.picker.ui.container.querySelector(`.${t[e.code]}-button[tabindex="${this.options.unitIndex}"]`);n&&!n.parentElement.classList.contains(`no-${t[e.code]}-month`)&&(n.dispatchEvent(new Event("click",{bubbles:!0})),setTimeout((()=>{let t=null;switch(e.code){case"ArrowLeft":const e=this.picker.ui.container.querySelectorAll(`.day[tabindex="${this.options.dayIndex}"]`);t=e[e.length-1];break;case"ArrowRight":t=this.picker.ui.container.querySelector(`.day[tabindex="${this.options.dayIndex}"]`)}t&&t.focus()})))}verticalMove(e){const t=e.target;if(t.classList.contains("day")){e.preventDefault();const n=this.findAllowableDaySibling(this.picker.ui.container,t,((t,n)=>t===(n="ArrowUp"===e.code?n-7:n+7)));n&&n.focus()}}horizontalMove(e){const t=e.target;if(t.classList.contains("day")){e.preventDefault();const n=this.findAllowableDaySibling(this.picker.ui.container,t,((t,n)=>t===(n="ArrowLeft"===e.code?n-1:n+1)));n?n.focus():this.changeMonth(e)}}handleEnter(e){const t=e.target;t.classList.contains("day")&&(e.preventDefault(),t.dispatchEvent(new Event("click",{bubbles:!0})),setTimeout((()=>{if(this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin"),this.rangePlugin||!this.picker.options.autoApply){const e=this.picker.ui.container.querySelector(".day.selected");e&&setTimeout((()=>{e.focus()}))}})))}onMouseEnter(e){e.target.classList.contains("day")&&setTimeout((()=>{const e=this.picker.ui.shadowRoot.activeElement;e&&e.dispatchEvent(new Event("mouseenter",{bubbles:!0}))}))}}export{t as KbdPlugin};

package/dist/index.umd.js

@@ -0,0 +1,10 @@
+/**
+* @license
+* Package: @yuafox/easepick2-kbd-plugin
+* Version: 2.0.0
+* https://github.com/YuaFox/easepick2
+* Copyright 2026 YuaFox
+* 
+* Licensed under the terms of GNU General Public License Version 2 or later. (http://www.gnu.org/licenses/gpl.html)
+*/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@yuafox/easepick2-base-plugin")):"function"==typeof define&&define.amd?define(["exports","@yuafox/easepick2-base-plugin"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).easepick=e.easepick||{},e.easepick)}(this,(function(e,t){"use strict";class n extends t.BasePlugin{docElement=null;rangePlugin;binds={onView:this.onView.bind(this),onKeydown:this.onKeydown.bind(this)};options={unitIndex:1,dayIndex:2};getName(){return"KbdPlugin"}onAttach(){const e=this.picker.options.element,t=e.getBoundingClientRect();if(this.docElement=document.createElement("span"),this.docElement.style.position="absolute",this.docElement.style.top=`${e.offsetTop}px`,this.docElement.style.left=e.offsetLeft+t.width-25+"px",this.docElement.attachShadow({mode:"open"}),this.options.html)this.docElement.shadowRoot.innerHTML=this.options.html;else{const e=`\n      <style>\n      button {\n        border: none;\n        background: transparent;\n        font-size: ${window.getComputedStyle(this.picker.options.element).fontSize};\n      }\n      </style>\n\n      <button>&#128197;</button>\n      `;this.docElement.shadowRoot.innerHTML=e}const n=this.docElement.shadowRoot.querySelector("button");n&&(n.addEventListener("click",(e=>{e.preventDefault(),this.picker.show({target:this.picker.options.element})}),{capture:!0}),n.addEventListener("keydown",(e=>{"Escape"===e.code&&this.picker.hide()}),{capture:!0})),this.picker.options.element.after(this.docElement),this.picker.on("view",this.binds.onView),this.picker.on("keydown",this.binds.onKeydown)}onDetach(){this.docElement&&this.docElement.isConnected&&this.docElement.remove(),this.picker.off("view",this.binds.onView),this.picker.off("keydown",this.binds.onKeydown)}onView(e){const{view:t,target:n}=e.detail;if(n&&"querySelector"in n)if("CalendarDay"!==t||["locked","not-available"].some((e=>n.classList.contains(e)))){[...n.querySelectorAll(".unit:not(.day)")].forEach((e=>e.tabIndex=this.options.unitIndex))}else n.tabIndex=this.options.dayIndex}onKeydown(e){switch(this.onMouseEnter(e),e.code){case"ArrowUp":case"ArrowDown":this.verticalMove(e);break;case"ArrowLeft":case"ArrowRight":this.horizontalMove(e);break;case"Enter":case"Space":this.handleEnter(e);break;case"Escape":this.picker.hide()}}findAllowableDaySibling(e,t,n){const i=Array.from(e.querySelectorAll(`.day[tabindex="${this.options.dayIndex}"]`)),o=i.indexOf(t);return i.filter(((e,t)=>n(t,o)&&e.tabIndex===this.options.dayIndex))[0]}changeMonth(e){const t={ArrowLeft:"previous",ArrowRight:"next"},n=this.picker.ui.container.querySelector(`.${t[e.code]}-button[tabindex="${this.options.unitIndex}"]`);n&&!n.parentElement.classList.contains(`no-${t[e.code]}-month`)&&(n.dispatchEvent(new Event("click",{bubbles:!0})),setTimeout((()=>{let t=null;switch(e.code){case"ArrowLeft":const e=this.picker.ui.container.querySelectorAll(`.day[tabindex="${this.options.dayIndex}"]`);t=e[e.length-1];break;case"ArrowRight":t=this.picker.ui.container.querySelector(`.day[tabindex="${this.options.dayIndex}"]`)}t&&t.focus()})))}verticalMove(e){const t=e.target;if(t.classList.contains("day")){e.preventDefault();const n=this.findAllowableDaySibling(this.picker.ui.container,t,((t,n)=>t===(n="ArrowUp"===e.code?n-7:n+7)));n&&n.focus()}}horizontalMove(e){const t=e.target;if(t.classList.contains("day")){e.preventDefault();const n=this.findAllowableDaySibling(this.picker.ui.container,t,((t,n)=>t===(n="ArrowLeft"===e.code?n-1:n+1)));n?n.focus():this.changeMonth(e)}}handleEnter(e){const t=e.target;t.classList.contains("day")&&(e.preventDefault(),t.dispatchEvent(new Event("click",{bubbles:!0})),setTimeout((()=>{if(this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin"),this.rangePlugin||!this.picker.options.autoApply){const e=this.picker.ui.container.querySelector(".day.selected");e&&setTimeout((()=>{e.focus()}))}})))}onMouseEnter(e){e.target.classList.contains("day")&&setTimeout((()=>{const e=this.picker.ui.shadowRoot.activeElement;e&&e.dispatchEvent(new Event("mouseenter",{bubbles:!0}))}))}}e.KbdPlugin=n,Object.defineProperty(e,"__esModule",{value:!0})}));

package/dist/interface.d.ts

@@ -0,0 +1,11 @@
+import { IBaseConfig } from '@yuafox/easepick2-base-plugin';
+export interface IKbdPlugin extends IBaseConfig {
+    unitIndex?: number;
+    dayIndex?: number;
+    html?: string;
+}
+declare module '@yuafox/easepick2-core/dist/types' {
+    interface IKbdPlugin {
+        KbdPlugin?: IKbdPlugin;
+    }
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@yuafox/easepick2-kbd-plugin",
+  "description": "Keyboard plugin for easepick2.",
+  "version": "2.0.0",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@yuafox/easepick2-base-plugin": "^2.0.0"
+  },
+  "author": {
+    "name": "YuaFox"
+  },
+  "license": "GPL-2.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YuaFox/easepick2.git",
+    "directory": "packages/kbd-plugin"
+  },
+  "homepage": "https://github.com/YuaFox/easepick2",
+  "bugs": {
+    "url": "https://github.com/YuaFox/easepick2/issues"
+  },
+  "files": [
+    "dist"
+  ]
+}