@triptease/tt-multi-date-picker 0.2.0

package/dist/esm/test/tt-multi-date-picker.test.js

@@ -0,0 +1,173 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import { html } from 'lit';
+import '../src/tt-multi-date-picker.js';
+async function getPicker(container) {
+    const el = container.querySelector('tt-multi-date-picker');
+    if (!el)
+        throw new Error('tt-multi-date-picker not found');
+    await el.updateComplete;
+    return el;
+}
+function getCalendars(el) {
+    return Array.from(el.shadowRoot.querySelectorAll('tt-calendar'));
+}
+describe('tt-multi-date-picker', () => {
+    describe('rendering', () => {
+        it('renders 6 calendars by default', async () => {
+            const screen = render(html `<tt-multi-date-picker></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            expect(getCalendars(el)).toHaveLength(6);
+        });
+        it('renders 3 calendars when months="3"', async () => {
+            const screen = render(html `<tt-multi-date-picker months="3"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            expect(getCalendars(el)).toHaveLength(3);
+        });
+        it('renders 12 calendars when months="12"', async () => {
+            const screen = render(html `<tt-multi-date-picker months="12"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            expect(getCalendars(el)).toHaveLength(12);
+        });
+        it('renders prev/next navigation buttons', async () => {
+            const screen = render(html `<tt-multi-date-picker></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            const prevBtn = el.shadowRoot.querySelector('[aria-label*="Previous"]');
+            const nextBtn = el.shadowRoot.querySelector('[aria-label*="Next"]');
+            expect(prevBtn).not.toBeNull();
+            expect(nextBtn).not.toBeNull();
+        });
+    });
+    describe('selection', () => {
+        it('selects a date on click and emits change event', async () => {
+            const screen = render(html `<tt-multi-date-picker months="3" start-month="2026-03"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            let emittedValue;
+            el.addEventListener('change', (e) => {
+                emittedValue = e.target.value;
+            });
+            const calendars = getCalendars(el);
+            const day = calendars[0].shadowRoot.querySelector('.day[data-date="2026-03-05"]');
+            day.click();
+            await el.updateComplete;
+            expect(el.value).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-05' }]);
+            expect(emittedValue).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-05' }]);
+        });
+        it('deselects a single date on second click', async () => {
+            const screen = render(html `<tt-multi-date-picker months="3" start-month="2026-03"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            const day = getCalendars(el)[0].shadowRoot.querySelector('.day[data-date="2026-03-05"]');
+            day.click();
+            await el.updateComplete;
+            day.click();
+            await el.updateComplete;
+            expect(el.value).toEqual([]);
+        });
+        it('creates a range with shift+click', async () => {
+            const screen = render(html `<tt-multi-date-picker months="3" start-month="2026-03"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            const calendars = getCalendars(el);
+            const day5 = calendars[0].shadowRoot.querySelector('.day[data-date="2026-03-05"]');
+            const day10 = calendars[0].shadowRoot.querySelector('.day[data-date="2026-03-10"]');
+            day5.click();
+            await el.updateComplete;
+            day10.dispatchEvent(new MouseEvent('click', { shiftKey: true, bubbles: true, composed: true }));
+            await el.updateComplete;
+            expect(el.value).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-10' }]);
+        });
+    });
+    describe('form integration', () => {
+        it('submits JSON value in form', async () => {
+            const screen = render(html `
+        <form>
+          <tt-multi-date-picker name="dates" start-month="2026-03"></tt-multi-date-picker>
+        </form>
+      `);
+            const el = await getPicker(screen.container);
+            const day = getCalendars(el)[0].shadowRoot.querySelector('.day[data-date="2026-03-05"]');
+            day.click();
+            await el.updateComplete;
+            const form = screen.container.querySelector('form');
+            const formData = new FormData(form);
+            const value = JSON.parse(formData.get('dates'));
+            expect(value).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-05' }]);
+        });
+        it('reports validity when required and empty', async () => {
+            const screen = render(html `<tt-multi-date-picker required></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            expect(el.matches(':invalid')).toBe(true);
+        });
+    });
+    describe('footer', () => {
+        it('shows clear all button when there are selections', async () => {
+            const screen = render(html `<tt-multi-date-picker months="3" start-month="2026-03"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            const day = getCalendars(el)[0].shadowRoot.querySelector('.day[data-date="2026-03-05"]');
+            day.click();
+            await el.updateComplete;
+            const clearBtn = el.shadowRoot.querySelector('[data-action="clear"]');
+            expect(clearBtn).not.toBeNull();
+        });
+        it('clears all selections when clear button is clicked', async () => {
+            const screen = render(html `<tt-multi-date-picker months="3" start-month="2026-03"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            const day = getCalendars(el)[0].shadowRoot.querySelector('.day[data-date="2026-03-05"]');
+            day.click();
+            await el.updateComplete;
+            const clearBtn = el.shadowRoot.querySelector('[data-action="clear"]');
+            clearBtn.click();
+            await el.updateComplete;
+            expect(el.value).toEqual([]);
+        });
+    });
+    describe('keyboard navigation', () => {
+        it('navigates to next page with PageDown', async () => {
+            const screen = render(html `<tt-multi-date-picker months="3" start-month="2026-03"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            const gridArea = el.shadowRoot.querySelector('.calendar-grid');
+            gridArea.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true }));
+            await el.updateComplete;
+            const calendars = getCalendars(el);
+            expect(calendars[0].getAttribute('month')).toEqual('2026-06');
+        });
+        it('navigates to previous page with PageUp', async () => {
+            const screen = render(html `<tt-multi-date-picker months="3" start-month="2026-03"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            const gridArea = el.shadowRoot.querySelector('.calendar-grid');
+            gridArea.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp', bubbles: true }));
+            await el.updateComplete;
+            const calendars = getCalendars(el);
+            expect(calendars[0].getAttribute('month')).toEqual('2025-12');
+        });
+        it('selects a date with Enter key', async () => {
+            const screen = render(html `<tt-multi-date-picker months="3" start-month="2026-03"></tt-multi-date-picker>`);
+            const el = await getPicker(screen.container);
+            const day = getCalendars(el)[0].shadowRoot.querySelector('.day[data-date="2026-03-05"]');
+            day.click();
+            await el.updateComplete;
+            el.value = [];
+            await el.updateComplete;
+            const gridArea = el.shadowRoot.querySelector('.calendar-grid');
+            gridArea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            await el.updateComplete;
+            expect(el.value).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-05' }]);
+        });
+    });
+    describe('min/max dates', () => {
+        it('passes min-date and max-date to calendar instances', async () => {
+            const screen = render(html `
+        <tt-multi-date-picker
+          months="3"
+          start-month="2026-03"
+          min-date="2026-03-10"
+          max-date="2026-05-20"
+        ></tt-multi-date-picker>
+      `);
+            const el = await getPicker(screen.container);
+            const calendars = getCalendars(el);
+            expect(calendars[0].getAttribute('min-date')).toEqual('2026-03-10');
+            expect(calendars[0].getAttribute('max-date')).toEqual('2026-05-20');
+        });
+    });
+});
+//# sourceMappingURL=tt-multi-date-picker.test.js.map

package/dist/esm/test/tt-multi-date-picker.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-multi-date-picker.test.js","sourceRoot":"","sources":["../../../test/tt-multi-date-picker.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { describe, expect, it } from 'vitest';\nimport { render } from 'vitest-browser-lit';\nimport { html } from 'lit';\nimport '../src/tt-multi-date-picker.js';\nimport type { TtMultiDatePicker } from '../src/TtMultiDatePicker.js';\n\nasync function getPicker(container: Element): Promise<TtMultiDatePicker> {\n  const el = container.querySelector<TtMultiDatePicker>('tt-multi-date-picker');\n  if (!el) throw new Error('tt-multi-date-picker not found');\n  await el.updateComplete;\n  return el;\n}\n\nfunction getCalendars(el: TtMultiDatePicker): Element[] {\n  return Array.from(el.shadowRoot!.querySelectorAll('tt-calendar'));\n}\n\ndescribe('tt-multi-date-picker', () => {\n  describe('rendering', () => {\n    it('renders 6 calendars by default', async () => {\n      const screen = render(html`<tt-multi-date-picker></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n      expect(getCalendars(el)).toHaveLength(6);\n    });\n\n    it('renders 3 calendars when months=\"3\"', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"3\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n      expect(getCalendars(el)).toHaveLength(3);\n    });\n\n    it('renders 12 calendars when months=\"12\"', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"12\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n      expect(getCalendars(el)).toHaveLength(12);\n    });\n\n    it('renders prev/next navigation buttons', async () => {\n      const screen = render(html`<tt-multi-date-picker></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n      const prevBtn = el.shadowRoot!.querySelector('[aria-label*=\"Previous\"]');\n      const nextBtn = el.shadowRoot!.querySelector('[aria-label*=\"Next\"]');\n      expect(prevBtn).not.toBeNull();\n      expect(nextBtn).not.toBeNull();\n    });\n  });\n\n  describe('selection', () => {\n    it('selects a date on click and emits change event', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"3\" start-month=\"2026-03\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n\n      let emittedValue: unknown;\n      el.addEventListener('change', (e: Event) => {\n        emittedValue = (e.target as TtMultiDatePicker).value;\n      });\n\n      const calendars = getCalendars(el);\n      const day = calendars[0].shadowRoot!.querySelector('.day[data-date=\"2026-03-05\"]') as HTMLElement;\n      day.click();\n      await el.updateComplete;\n\n      expect(el.value).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-05' }]);\n      expect(emittedValue).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-05' }]);\n    });\n\n    it('deselects a single date on second click', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"3\" start-month=\"2026-03\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n\n      const day = getCalendars(el)[0].shadowRoot!.querySelector('.day[data-date=\"2026-03-05\"]') as HTMLElement;\n      day.click();\n      await el.updateComplete;\n      day.click();\n      await el.updateComplete;\n\n      expect(el.value).toEqual([]);\n    });\n\n    it('creates a range with shift+click', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"3\" start-month=\"2026-03\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n\n      const calendars = getCalendars(el);\n      const day5 = calendars[0].shadowRoot!.querySelector('.day[data-date=\"2026-03-05\"]') as HTMLElement;\n      const day10 = calendars[0].shadowRoot!.querySelector('.day[data-date=\"2026-03-10\"]') as HTMLElement;\n\n      day5.click();\n      await el.updateComplete;\n      day10.dispatchEvent(new MouseEvent('click', { shiftKey: true, bubbles: true, composed: true }));\n      await el.updateComplete;\n\n      expect(el.value).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-10' }]);\n    });\n  });\n\n  describe('form integration', () => {\n    it('submits JSON value in form', async () => {\n      const screen = render(html`\n        <form>\n          <tt-multi-date-picker name=\"dates\" start-month=\"2026-03\"></tt-multi-date-picker>\n        </form>\n      `);\n      const el = await getPicker(screen.container);\n\n      const day = getCalendars(el)[0].shadowRoot!.querySelector('.day[data-date=\"2026-03-05\"]') as HTMLElement;\n      day.click();\n      await el.updateComplete;\n\n      const form = screen.container.querySelector('form')!;\n      const formData = new FormData(form);\n      const value = JSON.parse(formData.get('dates') as string);\n      expect(value).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-05' }]);\n    });\n\n    it('reports validity when required and empty', async () => {\n      const screen = render(html`<tt-multi-date-picker required></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n      expect(el.matches(':invalid')).toBe(true);\n    });\n  });\n\n  describe('footer', () => {\n    it('shows clear all button when there are selections', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"3\" start-month=\"2026-03\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n\n      const day = getCalendars(el)[0].shadowRoot!.querySelector('.day[data-date=\"2026-03-05\"]') as HTMLElement;\n      day.click();\n      await el.updateComplete;\n\n      const clearBtn = el.shadowRoot!.querySelector('[data-action=\"clear\"]');\n      expect(clearBtn).not.toBeNull();\n    });\n\n    it('clears all selections when clear button is clicked', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"3\" start-month=\"2026-03\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n\n      const day = getCalendars(el)[0].shadowRoot!.querySelector('.day[data-date=\"2026-03-05\"]') as HTMLElement;\n      day.click();\n      await el.updateComplete;\n\n      const clearBtn = el.shadowRoot!.querySelector('[data-action=\"clear\"]') as HTMLElement;\n      clearBtn.click();\n      await el.updateComplete;\n\n      expect(el.value).toEqual([]);\n    });\n  });\n\n  describe('keyboard navigation', () => {\n    it('navigates to next page with PageDown', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"3\" start-month=\"2026-03\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n\n      const gridArea = el.shadowRoot!.querySelector('.calendar-grid') as HTMLElement;\n      gridArea.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true }));\n      await el.updateComplete;\n\n      const calendars = getCalendars(el);\n      expect(calendars[0].getAttribute('month')).toEqual('2026-06');\n    });\n\n    it('navigates to previous page with PageUp', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"3\" start-month=\"2026-03\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n\n      const gridArea = el.shadowRoot!.querySelector('.calendar-grid') as HTMLElement;\n      gridArea.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp', bubbles: true }));\n      await el.updateComplete;\n\n      const calendars = getCalendars(el);\n      expect(calendars[0].getAttribute('month')).toEqual('2025-12');\n    });\n\n    it('selects a date with Enter key', async () => {\n      const screen = render(html`<tt-multi-date-picker months=\"3\" start-month=\"2026-03\"></tt-multi-date-picker>`);\n      const el = await getPicker(screen.container);\n\n      const day = getCalendars(el)[0].shadowRoot!.querySelector('.day[data-date=\"2026-03-05\"]') as HTMLElement;\n      day.click();\n      await el.updateComplete;\n\n      el.value = [];\n      await el.updateComplete;\n\n      const gridArea = el.shadowRoot!.querySelector('.calendar-grid') as HTMLElement;\n      gridArea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));\n      await el.updateComplete;\n\n      expect(el.value).toEqual([{ startDate: '2026-03-05', endDate: '2026-03-05' }]);\n    });\n  });\n\n  describe('min/max dates', () => {\n    it('passes min-date and max-date to calendar instances', async () => {\n      const screen = render(html`\n        <tt-multi-date-picker\n          months=\"3\"\n          start-month=\"2026-03\"\n          min-date=\"2026-03-10\"\n          max-date=\"2026-05-20\"\n        ></tt-multi-date-picker>\n      `);\n      const el = await getPicker(screen.container);\n      const calendars = getCalendars(el);\n\n      expect(calendars[0].getAttribute('min-date')).toEqual('2026-03-10');\n      expect(calendars[0].getAttribute('max-date')).toEqual('2026-05-20');\n    });\n  });\n});\n"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@triptease/tt-multi-date-picker",
+  "description": "Multi-date and date range selection calendar web component",
+  "license": "MIT",
+  "author": "@triptease",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "dist/esm/src/index.js",
+  "module": "dist/esm/src/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/src/index.d.ts",
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
+    },
+    "./types": {
+      "types": "./dist/esm/src/types.d.ts",
+      "import": "./dist/esm/src/types.js",
+      "require": "./dist/cjs/src/types.js"
+    }
+  },
+  "files": [
+    "dist/esm",
+    "dist/cjs"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "build": "yarn build:node && yarn build:web && yarn analyze --exclude dist",
+    "build:esm": "tsc",
+    "build:cjs": "tsc -p tsconfig.cjs.json && node ../../scripts/create-cjs-package.mjs",
+    "build:node": "yarn build:esm && yarn build:cjs",
+    "build:node:watch": "tsc --watch",
+    "build:web": "node ../../scripts/esbuild.mjs",
+    "prepublish": "tsc && yarn analyze --exclude dist",
+    "test": "yarn playwright install && vitest run --config=./vitest.browser.config.mjs",
+    "test:watch": "vitest --config=./vitest.browser.config.mjs"
+  },
+  "dependencies": {
+    "@triptease/icons": "1.4.1",
+    "@triptease/stylesheet": "2.1.8",
+    "@triptease/tt-calendar": "6.2.0",
+    "lit": "^3.1.4",
+    "luxon": "^3.6.1"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@types/luxon": "^3.6.2",
+    "playwright": "^1.57.0",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "customElements": "custom-elements.json",
+  "publishConfig": {
+    "access": "public"
+  }
+}