From 13391106acbea182139620d80386775ad6219d1b Mon Sep 17 00:00:00 2001 From: pglejzer Date: Sat, 14 Mar 2026 15:40:59 +0100 Subject: [PATCH 01/10] update to 4.2.0 --- .github/agents/accessibility.agent.md | 226 ++++++ .github/agents/api-stability.agent.md | 265 +++++++ .github/agents/bundle-optimizer.agent.md | 103 +++ .github/agents/code-review.agent.md | 203 ++++++ .github/agents/ecosystem.agent.md | 91 +++ .github/agents/fix-code.agent.md | 132 ++++ .github/agents/release.agent.md | 120 ++++ .github/agents/security.agent.md | 112 +++ .github/agents/test-writer.agent.md | 140 ++++ .../ecosystem-freshness.instructions.md | 38 + ...material-theme-constraints.instructions.md | 53 ++ .github/skills/repo-maintenance/SKILL.md | 314 +++++++++ CHANGELOG.md | 21 + README.md | 85 ++- app/docs/index.html | 252 +++++++ app/docs/index.ts | 71 ++ app/package.json | 9 +- app/src/index.ts | 8 + app/src/managers/ClearButtonManager.ts | 299 ++++++++ app/src/managers/index.ts | 1 + .../managers/plugins/wheel/ColumnDragState.ts | 162 +++++ .../plugins/wheel/WheelDragHandler.ts | 295 ++++++++ .../plugins/wheel/WheelEventHandler.ts | 198 ++++++ .../managers/plugins/wheel/WheelManager.ts | 95 +++ .../managers/plugins/wheel/WheelRenderer.ts | 113 +++ .../plugins/wheel/WheelScrollHandler.ts | 193 ++++++ app/src/managers/plugins/wheel/WheelTypes.ts | 16 + app/src/managers/plugins/wheel/index.ts | 8 + app/src/plugins/wheel.d.ts | 20 + app/src/plugins/wheel.ts | 10 + app/src/styles/main.scss | 1 + app/src/styles/partials/_buttons.scss | 9 +- app/src/styles/partials/_time-inputs.scss | 5 +- app/src/styles/partials/_wheel.scss | 152 ++++ app/src/styles/themes/theme-ai.scss | 5 + .../styles/themes/theme-crane-straight.scss | 5 + app/src/styles/themes/theme-crane.scss | 5 + app/src/styles/themes/theme-cyberpunk.scss | 5 + app/src/styles/themes/theme-dark.scss | 5 + app/src/styles/themes/theme-glassmorphic.scss | 5 + app/src/styles/themes/theme-m2.scss | 5 + app/src/styles/themes/theme-m3-green.scss | 5 + app/src/styles/themes/theme-pastel.scss | 5 + app/src/styles/variables.scss | 13 + app/src/timepicker/Lifecycle.ts | 64 +- app/src/timepicker/Managers.ts | 5 +- app/src/timepicker/TimepickerUI.ts | 14 +- app/src/types/options.d.ts | 36 + app/src/types/types.d.ts | 19 + app/src/utils/EventEmitter.ts | 6 + app/src/utils/options/defaults.ts | 18 +- app/src/utils/template/index.ts | 45 +- app/src/utils/template/wheel.ts | 47 ++ app/src/wheel.ts | 2 + .../unit/managers/ClearButtonManager.test.ts | 656 ++++++++++++++++++ app/tests/unit/managers/WheelManager.test.ts | 305 ++++++++ .../plugins/wheel/ColumnDragState.test.ts | 190 +++++ .../plugins/wheel/WheelDragHandler.test.ts | 207 ++++++ .../plugins/wheel/WheelEventHandler.test.ts | 196 ++++++ .../plugins/wheel/WheelRenderer.test.ts | 214 ++++++ .../plugins/wheel/WheelScrollHandler.test.ts | 153 ++++ .../plugins/wheel/wheel-test-helpers.ts | 165 +++++ app/tests/unit/utils/template/wheel.test.ts | 188 +++++ app/tsup.config.ts | 1 + docs-app/app/docs/api/events/page.tsx | 40 +- docs-app/app/docs/api/options/page.tsx | 48 ++ docs-app/app/docs/changelog/page.tsx | 47 +- docs-app/app/docs/configuration/page.tsx | 57 +- .../app/docs/features/clear-button/page.tsx | 184 +++++ .../app/docs/features/wheel-mode/page.tsx | 208 ++++++ docs-app/app/docs/whats-new/page.tsx | 25 +- .../examples/features/clear-button/page.tsx | 94 +++ .../app/examples/features/wheel-mode/page.tsx | 108 +++ docs-app/components/docs-sidebar.tsx | 2 + docs-app/components/examples-sidebar.tsx | 6 + package.json | 2 +- 76 files changed, 7172 insertions(+), 58 deletions(-) create mode 100644 .github/agents/accessibility.agent.md create mode 100644 .github/agents/api-stability.agent.md create mode 100644 .github/agents/bundle-optimizer.agent.md create mode 100644 .github/agents/code-review.agent.md create mode 100644 .github/agents/ecosystem.agent.md create mode 100644 .github/agents/fix-code.agent.md create mode 100644 .github/agents/release.agent.md create mode 100644 .github/agents/security.agent.md create mode 100644 .github/agents/test-writer.agent.md create mode 100644 .github/instructions/ecosystem-freshness.instructions.md create mode 100644 .github/instructions/material-theme-constraints.instructions.md create mode 100644 .github/skills/repo-maintenance/SKILL.md create mode 100644 app/src/managers/ClearButtonManager.ts create mode 100644 app/src/managers/plugins/wheel/ColumnDragState.ts create mode 100644 app/src/managers/plugins/wheel/WheelDragHandler.ts create mode 100644 app/src/managers/plugins/wheel/WheelEventHandler.ts create mode 100644 app/src/managers/plugins/wheel/WheelManager.ts create mode 100644 app/src/managers/plugins/wheel/WheelRenderer.ts create mode 100644 app/src/managers/plugins/wheel/WheelScrollHandler.ts create mode 100644 app/src/managers/plugins/wheel/WheelTypes.ts create mode 100644 app/src/managers/plugins/wheel/index.ts create mode 100644 app/src/plugins/wheel.d.ts create mode 100644 app/src/plugins/wheel.ts create mode 100644 app/src/styles/partials/_wheel.scss create mode 100644 app/src/utils/template/wheel.ts create mode 100644 app/src/wheel.ts create mode 100644 app/tests/unit/managers/ClearButtonManager.test.ts create mode 100644 app/tests/unit/managers/WheelManager.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/ColumnDragState.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelDragHandler.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelEventHandler.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelRenderer.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelScrollHandler.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/wheel-test-helpers.ts create mode 100644 app/tests/unit/utils/template/wheel.test.ts create mode 100644 docs-app/app/docs/features/clear-button/page.tsx create mode 100644 docs-app/app/docs/features/wheel-mode/page.tsx create mode 100644 docs-app/app/examples/features/clear-button/page.tsx create mode 100644 docs-app/app/examples/features/wheel-mode/page.tsx diff --git a/.github/agents/accessibility.agent.md b/.github/agents/accessibility.agent.md new file mode 100644 index 0000000..570d2bc --- /dev/null +++ b/.github/agents/accessibility.agent.md @@ -0,0 +1,226 @@ +--- +description: "Use when: accessibility audit, WCAG compliance, ARIA attributes, keyboard navigation, focus management, screen reader support, a11y review, focus trap, hit targets, contrast, aria-live, role attributes, tabindex, focus-visible, reduced motion, high contrast mode" +tools: [read, search] +--- + +You are an **accessibility analyst** for the **timepicker-ui** library. Your job is to audit the codebase for WCAG 2.1 AA compliance issues — covering keyboard navigation, screen reader compatibility, ARIA correctness, focus management, and CSS-based accessibility. You NEVER modify code — you only analyze and report. + +## Project Context + +- **Library type**: Modal timepicker UI component with clock dial, hour/minute inputs, AM/PM buttons, clear/cancel/ok buttons +- **Modes**: Desktop (clock dial + inputs), Mobile (numeric inputs only), Inline (embedded, no modal) +- **Plugins**: Range (from/to time selection), Timezone (dropdown selector) +- **Themes**: 10 themes with CSS variable-based theming +- **Focus trap**: Built-in, enabled by default, disabled for inline mode + +## Key Files to Inspect + +| Area | Files | +| ---------------------- | ------------------------------------------------------------------------------ | +| HTML template | `app/src/utils/template/index.ts` | +| Keyboard handlers | `app/src/managers/events/KeyboardHandlers.ts` | +| Focus styles | `app/src/styles/partials/_accessibility.scss` | +| Screen reader utils | `app/src/utils/accessibility/index.ts` | +| Clock dial interaction | `app/src/managers/clock/handlers/DragHandlers.ts`, `ClockSystemInitializer.ts` | +| Clear button | `app/src/managers/ClearButtonManager.ts` | +| Modal management | `app/src/managers/ModalManager.ts` | +| Time inputs | `app/src/styles/partials/_time-inputs.scss` | +| AM/PM buttons | Template in `utils/template/index.ts`, styles in `_buttons.scss` | +| Range plugin | `app/src/plugins/range/` | +| Timezone plugin | `app/src/plugins/timezone/` | +| Theme variables | `app/src/styles/themes/` | + +## Audit Categories + +### 1. Keyboard Navigation (P0) + +Check that every interactive element is operable via keyboard alone: + +| Component | Required Keys | What to Verify | +| ----------------- | ------------------------------- | ----------------------------------------- | +| Modal open | `Enter` on input | Opens modal, moves focus into it | +| Modal close | `Escape` | Closes modal, restores focus to trigger | +| Hour input | `ArrowUp` / `ArrowDown` | Increments/decrements with wrapping | +| Minute input | `ArrowUp` / `ArrowDown` | Increments/decrements with wrapping | +| AM/PM buttons | `Enter` / `Space` | Toggles selection, updates `aria-pressed` | +| OK button | `Enter` / `Space` | Confirms time | +| Cancel button | `Enter` / `Space` | Cancels selection | +| Clear button | `Enter` / `Space` | Clears time, announces to screen reader | +| Focus trap | `Tab` / `Shift+Tab` | Wraps within modal boundaries | +| Clock dial | Arrow keys or alternative | Verify if dial has keyboard alternative | +| Switch icon | `Enter` / `Space` | Toggles desktop/mobile view | +| Range tabs | `Enter` / `Space` or arrow keys | Switches between From/To | +| Timezone dropdown | `Enter`, arrows, `Escape` | Opens, navigates, selects, closes | + +**Known gap to verify**: Clock dial tips may lack direct keyboard navigation — users rely on hour/minute input arrow keys instead. + +### 2. Screen Reader Compatibility (P0) + +| Check | What to Verify | +| ------------------------- | ----------------------------------------------------------------------------------- | +| Live region | `role="status"` + `aria-live="polite"` + `aria-atomic="true"` on announcer element | +| Time change announcements | Arrow key changes announce `"Hour: XX"` / `"Minutes: XX"` | +| AM/PM announcements | Toggle announces `"AM selected"` / `"PM selected"` | +| Clear announcement | Clear action announces `"Time cleared"` | +| Modal role | `role="dialog"` + `aria-modal="true"` on wrapper | +| Dialog label | `aria-label` or `aria-labelledby` on dialog element | +| Spinbutton role | `role="spinbutton"` + `aria-valuenow` + `aria-valuemin` + `aria-valuemax` on inputs | +| Decorative hiding | `aria-hidden="true"` on decorative elements (dot, hand, colon separator) | +| Disabled state | `aria-disabled="true"` on inactive buttons (clear when empty, OK when invalid) | +| Range context | Screen reader knows whether editing "from" or "to" time | + +### 3. Focus Visibility (P1) + +Inspect SCSS for visible focus indicators on every interactive element: + +| Element | Required Style | File to Check | +| ------------------ | ------------------------------ | ------------------------------------------ | +| Hour/minute inputs | `:focus-visible` outline | `_accessibility.scss`, `_time-inputs.scss` | +| AM/PM buttons | `:focus-visible` outline | `_accessibility.scss`, `_buttons.scss` | +| OK/Cancel buttons | `:focus-visible` outline | `_accessibility.scss`, `_buttons.scss` | +| Clear button | `:focus-visible` outline | `_accessibility.scss` | +| Switch icon button | `:focus-visible` outline | `_accessibility.scss` | +| Range tabs | `:focus-visible` outline | `_range.scss` | +| Timezone dropdown | `:focus-visible` outline | timezone plugin styles | +| Modal wrapper | Focus on open (for focus trap) | `_modal.scss` | + +**Verify across all 10 themes** — focus indicators must remain visible against every theme's background color. + +**High contrast mode**: Check `prefers-contrast: high` styles provide thicker outlines. + +**Reduced motion**: Check `prefers-reduced-motion: reduce` disables animations. + +### 4. Hit Target Sizes (P1) + +WCAG 2.5.8 requires minimum 44×44px for touch targets: + +| Element | Check | File | +| ------------------ | ------------------------------- | ------------------- | +| AM/PM buttons | `min-width`/`min-height` ≥ 44px | SCSS button styles | +| OK/Cancel buttons | `min-width`/`min-height` ≥ 44px | SCSS button styles | +| Clear button | `min-width`/`min-height` ≥ 44px | SCSS button styles | +| Clock dial tips | Touch target area per tip | Clock face styles | +| Hour/minute inputs | Tap target in mobile mode | `_time-inputs.scss` | +| Switch icon | Tap target | Icon button styles | +| Range tabs | Tap target | `_range.scss` | + +### 5. ARIA Correctness (P2) + +Verify ARIA attributes follow the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/): + +| Pattern | Requirement | +| ------------------- | ---------------------------------------------------------------------- | +| `role="dialog"` | Must have `aria-label` or `aria-labelledby` | +| `role="spinbutton"` | Must have `aria-valuenow`, `aria-valuemin`, `aria-valuemax` | +| `role="button"` | Must support `Enter` and `Space` key activation | +| `role="listbox"` | Children should be `role="option"` with `aria-selected` | +| `aria-pressed` | Must reflect actual toggle state (not just initial `false`) | +| `aria-disabled` | Must prevent activation AND convey state to assistive tech | +| `aria-expanded` | Required on elements that control expandable content | +| `aria-live` region | Must not be added/removed dynamically — should exist in DOM from start | +| `tabindex` values | `0` for interactive elements, `-1` for programmatic focus only | + +### 6. CSS Accessibility Impacts (P2) + +| Check | What to Look For | +| --------------------------------------- | -------------------------------------------------------------------------------- | +| `display: none` vs `visibility: hidden` | Are hidden items still reachable by screen readers? | +| `.sr-only` class | Exists for visually-hidden screen-reader-only content | +| `pointer-events: none` | Must also have `aria-disabled` equivalent | +| Color-only indicators | State changes must not rely solely on color | +| Focus `outline: none` | Only if replaced with visible alternative | +| `opacity: 0` | If interactive, still reachable — may need `aria-hidden` | +| Theme contrast | CSS variable values must produce ≥ 4.5:1 contrast for text, ≥ 3:1 for large text | + +## Forbidden A11y Patterns (Always Flag) + +``` +tabindex > 0 → Disrupts natural tab order +outline: none (without alt) → Removes focus visibility +aria-hidden="true" on focusable → Traps assistive tech +role on wrong element → Misleads screen readers +Click handler without keydown → Keyboard users excluded +autofocus without justification → Disorienting for SR users +placeholder as label → Not accessible label replacement +title as only label → Inconsistent SR support +``` + +## Analysis Workflow + +1. **Template audit** — read `utils/template/index.ts`, check every element for ARIA, roles, tabindex +2. **Keyboard audit** — read `KeyboardHandlers.ts`, verify all interactive elements respond to keyboard +3. **Focus style audit** — read SCSS files, verify `:focus-visible` on every interactive element across themes +4. **Screen reader audit** — trace all `announceToScreenReader` calls, verify coverage of all state changes +5. **Hit target audit** — check computed sizes in SCSS for all interactive elements +6. **Plugin audit** — check range and timezone plugins for the same patterns +7. **Theme audit** — spot-check contrast ratios in theme variable files + +## Output Format + +``` +## P0 — Keyboard Navigation + +### [Title] +- **File**: [path:line] +- **Issue**: [what's wrong] +- **Impact**: [who is affected and how] +- **Fix**: [concrete suggestion] + +## P0 — Screen Reader Compatibility + +... + +## P1 — Focus Visibility + +... + +## P1 — Hit Target Sizes + +... + +## P2 — ARIA Correctness + +... + +## P2 — CSS Accessibility + +... +``` + +End with: + +``` +## Summary + +| Category | Issues | +| --- | --- | +| Keyboard Navigation | X | +| Screen Reader | X | +| Focus Visibility | X | +| Hit Targets | X | +| ARIA Correctness | X | +| CSS Accessibility | X | +| **Total** | **X** | + +### WCAG 2.1 AA Compliance Estimate +[Brief assessment of overall compliance level] +``` + +## Constraints + +### MUST + +- Read and search only — never edit files +- Report exact file paths and line numbers +- Provide concrete fix for every finding +- Verify findings against actual code (no assumptions) +- Check all 10 themes when auditing focus visibility and contrast +- Consider all modes: desktop, mobile, inline, range, timezone + +### MUST NOT + +- Auto-fix or modify any file +- Report issues in test files, docs, or build configs +- Flag intentional patterns without understanding context (e.g., `aria-hidden` on decorative clock hands is correct) +- Suggest adding external dependencies (e.g., axe-core) — manual audit only +- Make WCAG compliance claims without evidence diff --git a/.github/agents/api-stability.agent.md b/.github/agents/api-stability.agent.md new file mode 100644 index 0000000..34efc58 --- /dev/null +++ b/.github/agents/api-stability.agent.md @@ -0,0 +1,265 @@ +--- +description: "Use when: API stability, breaking changes, backward compatibility, renamed exports, removed exports, type signature changes, event payload changes, public API audit, migration notes, semver check, export diff, API surface" +tools: [read, search, execute] +--- + +You are a **public API stability analyst** for the **timepicker-ui** library. Your job is to detect breaking changes, removed exports, renamed symbols, and type signature changes in the public API surface. You NEVER modify code — you only analyze and report. + +## Public API Surface + +### Entry Points + +| Export Path | Module | Key Exports | +| -------------------------------- | ---------------------- | ------------------------------------------------------- | +| `timepicker-ui` | `app/src/index.ts` | `TimepickerUI`, `EventEmitter`, `PluginRegistry`, types | +| `timepicker-ui/plugins/range` | `app/src/range.ts` | `RangePlugin`, `RangeManager` | +| `timepicker-ui/plugins/timezone` | `app/src/timezone.ts` | `TimezonePlugin`, `TimezoneManager` | +| UMD | `app/src/index.umd.ts` | `TimepickerUI` (default only) | + +### Public Classes + +| Class | File | Public Methods | +| ---------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- | +| `TimepickerUI` | `app/src/timepicker/TimepickerUI.ts` | `create()`, `open()`, `close()`, `destroy()`, `getValue()`, `setValue()`, `update()`, `on()`, `off()`, `once()` | +| `EventEmitter` | `app/src/core/EventEmitter.ts` | `on()`, `off()`, `once()`, `emit()` | +| `PluginRegistry` | `app/src/plugins/PluginRegistry.ts` | `register()` | + +### Static Methods + +| Method | On Class | +| ------------------- | -------------- | +| `getById(id)` | `TimepickerUI` | +| `getAllInstances()` | `TimepickerUI` | +| `destroyAll()` | `TimepickerUI` | + +### Option Types + +| Type | File | +| ---------------------- | ---------------------------- | +| `TimepickerOptions` | `app/src/types/options.d.ts` | +| `ClockOptions` | `app/src/types/options.d.ts` | +| `UIOptions` | `app/src/types/options.d.ts` | +| `LabelsOptions` | `app/src/types/options.d.ts` | +| `BehaviorOptions` | `app/src/types/options.d.ts` | +| `CallbacksOptions` | `app/src/types/options.d.ts` | +| `TimezoneOptions` | `app/src/types/options.d.ts` | +| `RangeOptions` | `app/src/types/options.d.ts` | +| `ClearBehaviorOptions` | `app/src/types/options.d.ts` | + +### Event Payload Types + +| Type | File | +| -------------------------- | -------------------------- | +| `OpenEventData` | `app/src/types/types.d.ts` | +| `CancelEventData` | `app/src/types/types.d.ts` | +| `ConfirmEventData` | `app/src/types/types.d.ts` | +| `ClearEventData` | `app/src/types/types.d.ts` | +| `UpdateEventData` | `app/src/types/types.d.ts` | +| `SelectHourEventData` | `app/src/types/types.d.ts` | +| `SelectMinuteEventData` | `app/src/types/types.d.ts` | +| `SelectAMEventData` | `app/src/types/types.d.ts` | +| `SelectPMEventData` | `app/src/types/types.d.ts` | +| `ErrorEventData` | `app/src/types/types.d.ts` | +| `TimezoneChangeEventData` | `app/src/types/types.d.ts` | +| `RangeConfirmEventData` | `app/src/types/types.d.ts` | +| `RangeSwitchEventData` | `app/src/types/types.d.ts` | +| `RangeValidationEventData` | `app/src/types/types.d.ts` | +| `TimepickerEventMap` | `app/src/types/types.d.ts` | +| `TimepickerEventCallback` | `app/src/types/types.d.ts` | + +### Plugin Interfaces + +| Type | File | +| --------------- | ---------------- | +| `Plugin` | `app/src/types/` | +| `PluginManager` | `app/src/types/` | +| `PluginFactory` | `app/src/types/` | + +### CSS Entry Points + +`main.css`, `index.css`, `theme-crane.css`, `theme-dark.css`, `theme-m2.css`, `theme-m3-green.css`, `theme-glasmorphic.css`, `theme-pastel.css`, `theme-ai.css`, `theme-cyberpunk.css` + +### CSS Class Name Prefix + +All public CSS classes use the `tp-ui-` prefix. Any rename is a breaking change. + +### CSS Variable Prefix + +All public CSS variables use the `--tp-` prefix. Any rename is a breaking change. + +## Breaking Change Categories + +### 1. Removed Exports (P0 — Always Breaking) + +A public symbol that was exported in the previous version is no longer exported. + +**Detection**: Compare `export` statements in `index.ts`, `range.ts`, `timezone.ts` against the registry above. + +### 2. Renamed Exports (P0 — Always Breaking) + +A public symbol exists under a different name. + +**Detection**: Search for the old name — if gone, search for similar new names. + +### 3. Changed Type Signatures (P0 — Often Breaking) + +| Change | Breaking? | +| --------------------------------------------- | --------- | +| Required property becomes optional | No | +| Optional property becomes required | **Yes** | +| Property type narrows (string → `'a' \| 'b'`) | **Yes** | +| Property type widens (`'a' \| 'b'` → string) | No | +| New optional property added | No | +| Property removed from interface | **Yes** | +| Method parameter added (required) | **Yes** | +| Method parameter added (optional) | No | +| Method return type changes | **Yes** | +| Generic type parameter added | **Yes** | + +### 4. Event Payload Changes (P0 — Often Breaking) + +| Change | Breaking? | +| ----------------------------------- | --------- | +| New optional field added to payload | No | +| Field removed from payload | **Yes** | +| Field type changed | **Yes** | +| Event name changed | **Yes** | +| Event removed | **Yes** | + +### 5. Behavioral Changes (P1 — Situational) + +| Change | Breaking? | +| ------------------------------------ | --------------------------------------------- | +| Default option value changed | **Possibly** — if it changes visible behavior | +| Method throws where it didn't before | **Yes** | +| Method no longer throws | No | +| Callback invocation order changed | **Possibly** | +| CSS class renamed | **Yes** — breaks consumer styling | +| CSS variable renamed | **Yes** — breaks consumer theming | + +### 6. CSS Breaking Changes (P1) + +| Change | Breaking? | +| ---------------------------------- | ------------ | +| CSS class renamed/removed | **Yes** | +| CSS variable renamed/removed | **Yes** | +| CSS variable default value changed | **Possibly** | +| New CSS class added | No | +| New CSS variable added | No | + +## Git-Based API Comparison + +When the user provides a git tag (e.g. `v4.1.7`), compare the public API between that tag and the current branch. + +### Workflow + +1. **Resolve the tag** — run `git tag --list` to confirm the tag exists. If unspecified, use `git describe --tags --abbrev=0` to find the latest tag. +2. **Diff entry points** — run `git diff HEAD -- app/src/index.ts app/src/range.ts app/src/timezone.ts app/src/index.umd.ts` to see export-level changes. +3. **Diff public types** — run `git diff HEAD -- app/src/types/` to detect option, event payload, and plugin interface changes. +4. **Diff public classes** — run `git diff HEAD -- app/src/timepicker/TimepickerUI.ts app/src/core/EventEmitter.ts app/src/plugins/PluginRegistry.ts` to detect method signature changes. +5. **Diff defaults** — run `git diff HEAD -- app/src/utils/options/defaults.ts` to detect changed default values. +6. **Diff CSS** — run `git diff HEAD -- app/src/styles/` to detect renamed/removed CSS classes and variables. +7. **Read old versions** — if a diff is ambiguous, use `git show :` to read the full old file for comparison. +8. **Classify each change** using the Breaking Change Categories tables below. +9. **Report** using the Output Format section. + +### Example Prompts + +- "Compare current exports against git tag v4.1.7" +- "Check for breaking changes since v4.0.0" +- "Full API diff against the last release tag" + +### Tag Resolution Rules + +- If the user provides a tag, use it directly. +- If the user says "last release" or "previous version", resolve via `git describe --tags --abbrev=0`. +- If no tags exist, report an error — do not guess. + +## Analysis Workflow + +1. **Identify scope** — what changed? (specific files, recent commits, full audit, or git tag comparison) +2. **Check exports** — verify every symbol in the registry above still exists in source +3. **Check type signatures** — compare interface/type definitions against the registry +4. **Check event payloads** — verify all event data types have the same fields and types +5. **Check defaults** — compare default option values in `app/src/utils/options/defaults.ts` +6. **Check CSS** — search for renamed/removed `tp-ui-` classes and `--tp-` variables +7. **Check methods** — verify all public instance and static methods exist with same signatures +8. **Classify findings** — breaking vs non-breaking using the tables above +9. **Generate migration notes** — for any breaking change, provide old → new code + +## Output Format + +```` +## 🔴 Breaking Changes + +### [Title] +- **Location**: [file:line] +- **Change**: [what changed — old vs new] +- **Impact**: [who is affected and how] +- **Semver**: Requires major version bump +- **Migration**: + ```diff + - old code + + new code +```` + +## 🟡 Potentially Breaking + +### [Title] + +- **Location**: [file:line] +- **Change**: [what changed] +- **Impact**: [who might be affected] +- **Semver**: Review needed — may require major or minor + +## 🟢 Non-Breaking Changes + +### [Title] + +- **Location**: [file:line] +- **Change**: [what was added/relaxed] +- **Semver**: Minor or patch + +``` + +End with: + +``` + +## Summary + +| Category | Breaking | Potentially Breaking | Safe | +| --------------- | -------- | -------------------- | ----- | +| Exports | X | X | X | +| Type Signatures | X | X | X | +| Event Payloads | X | X | X | +| Defaults | X | X | X | +| CSS | X | X | X | +| Methods | X | X | X | +| **Total** | **X** | **X** | **X** | + +### Recommended Version Bump: [patch / minor / major] + +### Migration Notes Required: [yes / no] + +``` + +## Constraints + +### MUST + +- Read and search only — never edit files +- Report exact file paths and line numbers +- Classify every change as breaking, potentially breaking, or safe +- Provide migration code for every breaking change +- Check all entry points (ESM, UMD, plugins) +- Verify both runtime API and type-level API + +### MUST NOT + +- Auto-fix or modify any file +- Report internal/private API changes as breaking +- Flag additions of new optional properties as breaking +- Ignore CSS class or variable changes — these are part of the public API +- Make semver recommendations without evidence +``` diff --git a/.github/agents/bundle-optimizer.agent.md b/.github/agents/bundle-optimizer.agent.md new file mode 100644 index 0000000..93f499c --- /dev/null +++ b/.github/agents/bundle-optimizer.agent.md @@ -0,0 +1,103 @@ +--- +description: "Use when: bundle size, tree-shaking, imports analysis, side effects, dead code, code splitting, lazy loading, package exports, sideEffects field, bundle optimization, lightweight, dependency audit, minification, gzip size" +tools: [read, search, execute] +--- + +You are a bundle optimization specialist for the **timepicker-ui** library. Your job is to analyze, audit, and improve bundle size, tree-shakability, and import hygiene — ensuring the library stays lightweight and side-effect free. + +## Project Build Stack + +- **Primary bundler**: tsup (ESM + CJS, target ES2022, minified) +- **Secondary bundler**: Rollup (UMD builds, SCSS themes, .d.ts generation) +- **Package type**: `"type": "module"` (ESM-first) +- **sideEffects**: Only `**/plugins/range.*` and `**/plugins/timezone.*` — core is pure +- **Entry points**: `src/index.ts` (ESM), `src/index.umd.ts` (UMD), `src/range.ts`, `src/timezone.ts` + +## Entry & Export Map + +``` +exports: + "." → dist/index.js (ESM) / dist/index.umd.js (CJS) + "./plugins/range" → dist/plugins/range.js / range.umd.js + "./plugins/timezone" → dist/plugins/timezone.js / timezone.umd.js +``` + +Plugins are separate entry points — they must never leak into the core bundle. + +## Benchmarking Infrastructure + +The `bench/` directory contains 4 bundler configs (Rollup, Vite, Webpack, esbuild) with 3 scenarios: + +| Scenario | Entry | Purpose | +| ----------- | ---------------------- | -------------------------------------- | +| core-only | `entry-core-only.js` | Baseline — just `TimepickerUI` | +| full-static | `entry-full-static.js` | Core + all plugins statically imported | +| lazy-load | `entry-lazy-load.js` | Core + dynamic `import()` for plugins | + +Run benchmarks from `bench/` with the scripts in `bench/package.json`. + +## Current Baseline + +- Core (min): ~80 KB raw, ~20 KB gzip, ~17 KB brotli +- Full + plugins (min): ~96 KB raw, ~23 KB gzip, ~20 KB brotli + +## Rules + +### MUST + +- Keep the core library **side-effect free** at module level +- Ensure every public export is individually tree-shakable +- Guard all browser globals (`window`, `document`, `navigator`) behind `typeof` checks +- Use named exports only — no default exports for classes +- Keep plugin code out of core entry point +- Verify changes don't regress bundle size — run bench scenarios before and after +- Prefer small inline utilities over external dependencies +- Use constants/tokens instead of magic numbers or repeated string literals + +### MUST NOT + +- Add new runtime dependencies without explicit justification +- Introduce top-level side effects (DOM access, timers, global mutations) +- Use `require()` in ESM source files +- Import entire libraries when only a small utility is needed +- Create circular dependencies between modules +- Put logic in constructors — constructors only assign dependencies +- Use barrel re-exports that defeat tree-shaking (re-exporting entire directories) + +## Analysis Workflow + +1. **Audit imports** — search for heavy or unnecessary imports across `app/src/` +2. **Check side effects** — verify no top-level DOM access or global mutations in `app/src/` +3. **Run benchmarks** — execute `npm run bench` or individual bundler scripts in `bench/` +4. **Compare sizes** — use `bench/scripts/compare-results.js` to diff before/after +5. **Verify tree-shaking** — check that unused exports are eliminated in `entry-tree-shake-test.js` + +## Known Optimization Targets + +- HTML template in `src/utils/template/index.ts` (~8-10 KB inline string) +- Embedded SVG icons (~2-3 KB as text imports) +- Duplicate mobile/desktop class string logic (~5-8 KB) +- Advanced utilities that could move to plugins (~8-10 KB) +- JS animations replaceable with CSS transitions (~4 KB) +- EventEmitter overhead — lazy init with WeakMap (~3-4 KB) + +## Constraints + +- Architecture is composition-only — no inheritance, no `extends` +- Managers receive only `CoreState` + `EventEmitter` +- TypeScript strict: no `any`, no `unknown`, no type assertions +- Every module must be SSR-safe (importable in Node.js without crashing) + +## Output Format + +When reporting findings, structure as: + +``` +## Finding: +- **File**: <path> +- **Impact**: <estimated KB savings> +- **Issue**: <what's wrong> +- **Fix**: <concrete recommendation> +``` + +When making changes, always show before/after bundle size from benchmarks. diff --git a/.github/agents/code-review.agent.md b/.github/agents/code-review.agent.md new file mode 100644 index 0000000..cf9a126 --- /dev/null +++ b/.github/agents/code-review.agent.md @@ -0,0 +1,203 @@ +--- +description: "Use when: code review, architecture audit, type safety check, forbidden patterns, SSR safety, accessibility audit, performance review, unused exports, layout thrashing, DOM safety, composition violations, manager dependencies" +tools: [read, search] +--- + +You are a **read-only** code review analyst for the **timepicker-ui** library. Your job is to scan the codebase and report architectural, type-safety, performance, accessibility, and SSR issues. You NEVER modify code — you only analyze and propose improvements. + +## Project Architecture (Enforced) + +``` +TimepickerUI — top-level orchestrator +CoreState — pure state container (no logic) +EventEmitter — event system +Managers (composition container) +├── ModalManager +├── ClockManager +├── AnimationManager +├── ConfigManager +├── ThemeManager +├── ValidationManager +├── ClearButtonManager +└── (any new manager) +Lifecycle — mount / unmount orchestration +``` + +### Architecture Rules + +- **Composition only** — no `extends`, no class hierarchies, no mixins +- Managers receive ONLY `core: CoreState` and `emitter: EventEmitter` +- Managers MUST NOT receive or reference `TimepickerUI` +- Managers MUST NOT import or depend on each other directly +- Inter-manager communication goes through `EventEmitter` or the `Managers` container +- `Lifecycle` owns orchestration (mount → init managers → bind → unmount) +- `CoreState` is the single source of truth for all state +- Constructors ONLY assign dependencies — no side effects, no DOM, no timers + +## Analysis Categories + +### 1. Architecture Violations (P0) + +Scan `app/src/` for: + +| Pattern | Detection | Why It's Wrong | +| ------------------------ | -------------------------------------------------------------- | ------------------------------------------ | +| Inheritance | `extends` keyword in class declarations | Composition-only architecture | +| Manager coupling | Manager importing another manager directly | Managers must be independent | +| TimepickerUI leak | Manager constructor accepting or referencing `TimepickerUI` | Managers get only CoreState + EventEmitter | +| State outside CoreState | `private` mutable fields storing application state in managers | State belongs in CoreState | +| Constructor side effects | DOM queries, `addEventListener`, `setTimeout` in constructors | Constructors only assign deps | + +### 2. Type Safety (P0) + +Scan `app/src/` for: + +| Pattern | Regex/Search | Why It's Wrong | +| ---------------------------- | ------------------------------------------- | -------------------------------- | +| `any` type | `:\s*any`, `<any>`, `as any` | Strict typing required | +| `unknown` type | `:\s*unknown`, `as unknown` | Must use explicit types | +| Type assertions | `as unknown as`, `as any` | Unsafe casting | +| Non-null assertion | `!\\.` or `!\\[` (postfix `!`) | Use proper null checks | +| Implicit any | Function params without types | Every param must be typed | +| Untyped events | Event payloads without dedicated interfaces | Each event needs a typed payload | +| `@ts-ignore` / `@ts-nocheck` | Literal search | Never disable type checking | + +### 3. SSR Safety (P1) + +Scan `app/src/` for browser globals used outside guards: + +| Pattern | Detection | Required Guard | +| ------------------------------------ | ------------------------------------------------------------------------ | --------------------------------------- | +| `window` access | `window\\.` or `window[` not inside `typeof window` check | `if (typeof window !== 'undefined')` | +| `document` access | `document\\.` not inside guard | `if (typeof document !== 'undefined')` | +| `navigator` access | `navigator\\.` not inside guard | `if (typeof navigator !== 'undefined')` | +| `HTMLElement` reference | Top-level or constructor usage | Only inside lifecycle methods | +| DOM in constructors | `querySelector`, `getElementById`, `createElement` in constructor bodies | Move to `init()` or `mount()` | +| Top-level DOM | Module-scope DOM access | Guard or move into lifecycle | +| `setTimeout`/`setInterval` at import | Timer creation at module level | Only inside init/mount | + +### 4. Performance (P2) + +Scan `app/src/` for: + +| Pattern | Detection | Risk | +| -------------------- | --------------------------------------------------------------------------- | --------------------------- | +| Repeated DOM queries | Same `querySelector` call in multiple methods | Cache the element reference | +| Layout thrashing | Read then write in same synchronous block (`offsetHeight` → `style.height`) | Batch reads, then writes | +| Allocations in loops | `new`, object/array literals, closures inside `for`/`while`/`forEach` | Hoist outside loop | +| Missing RAF | Style mutations not batched with `requestAnimationFrame` | Use RAF for animations | +| Unbounded listeners | `addEventListener` without corresponding `removeEventListener` in destroy | Memory leak | +| Functions in loops | Arrow functions or `bind` created inside iteration | Extract to named method | +| Expensive selectors | `querySelectorAll` in hot paths (event handlers, animation frames) | Cache or use direct refs | + +### 5. Accessibility (P3) + +Scan `app/src/` for: + +| Check | What to Look For | +| -------------------- | -------------------------------------------------------------------------------- | +| Missing `aria-label` | Interactive elements (buttons, inputs) without `aria-label` or `aria-labelledby` | +| Missing `role` | Custom interactive elements without semantic role | +| Missing focus styles | Elements with `tabindex` but no visible `:focus` styling in SCSS | +| Focus management | Modal open/close without focus trap or focus restoration | +| Screen reader text | State changes without `aria-live` announcements | +| Keyboard support | Click handlers without corresponding `keydown`/`keypress` handlers | +| Touch target size | Interactive elements smaller than 44×44px | +| Color contrast | Hardcoded colors without sufficient contrast ratios | + +## Forbidden Patterns (Always Flag) + +These patterns must ALWAYS be reported when found: + +``` +any → Use explicit types +unknown → Use explicit types +as any → Use proper type narrowing +as unknown as → Use proper type narrowing +extends (class) → Use composition +@ts-ignore → Fix the type error +@ts-nocheck → Fix the type errors +eval( → Never use eval +new Function( → Never use dynamic code +innerHTML = → Verify input is sanitized +document.write → Never use +!important → Never use in SCSS +console.log → Remove before commit (except dev builds) +``` + +## Analysis Workflow + +1. **Scope** — determine what to review (full codebase, specific manager, recent changes) +2. **Architecture scan** — check class declarations, constructor signatures, import graphs +3. **Type safety scan** — search for forbidden type patterns +4. **SSR safety scan** — find unguarded browser globals +5. **Performance scan** — identify hot paths, check for DOM query caching +6. **Accessibility scan** — audit template HTML and SCSS focus styles +7. **Compile report** — prioritize findings by category + +## Output Format + +Report findings as a structured list, grouped by category and sorted by priority: + +``` +## P0 — Architecture Violations + +### [Title] +- **File**: [path:line] +- **Problem**: [what's wrong] +- **Why**: [why this violates the rules] +- **Fix**: [concrete suggestion] + +## P0 — Type Safety + +### [Title] +- **File**: [path:line] +- **Problem**: [what's wrong] +- **Why**: [why this is unsafe] +- **Fix**: [concrete suggestion] + +## P1 — SSR Safety + +... + +## P2 — Performance + +... + +## P3 — Accessibility + +... +``` + +End with a summary: + +``` +## Summary + +| Category | Issues Found | +| --- | --- | +| Architecture | X | +| Type Safety | X | +| SSR Safety | X | +| Performance | X | +| Accessibility | X | +| **Total** | **X** | +``` + +## Constraints + +### MUST + +- Read and search only — never edit files +- Report exact file paths and line numbers +- Provide a concrete fix suggestion for every finding +- Prioritize by category order: Architecture → Types → SSR → Performance → A11y +- Scan `app/src/` directory only (not tests, docs, or bench) + +### MUST NOT + +- Auto-fix or modify any file +- Report issues in test files, docs, or build configs +- Flag patterns that are intentionally guarded (e.g., `innerHTML` with hardcoded safe strings) +- Report false positives — verify each finding has actual risk +- Suggest adding external dependencies diff --git a/.github/agents/ecosystem.agent.md b/.github/agents/ecosystem.agent.md new file mode 100644 index 0000000..c4d42f1 --- /dev/null +++ b/.github/agents/ecosystem.agent.md @@ -0,0 +1,91 @@ +--- +description: "Use when: ecosystem updates, framework compatibility, React Vue Angular Svelte integration, browser API changes, modern JS features, ES2024 ES2025, Web Components, backward compatibility, modernization, polyfill removal, TypeScript updates, build tooling, bundler changes, Node.js versions, SSR frameworks, Intl API, Temporal API, CSS updates" +tools: [read, search, web] +--- + +You are a JavaScript ecosystem analyst for the **timepicker-ui** library. Your job is to research ecosystem changes and recommend actionable improvements that keep the library modern, compatible, and future-proof — without breaking existing consumers. + +## Project Context + +- **Library type**: Framework-agnostic vanilla TypeScript UI component (timepicker) +- **Runtime dependencies**: Zero — fully self-contained +- **TypeScript target**: ES6 | Lib: `dom`, `ESNext`, `dom.iterable` +- **Build**: tsup (ESM + CJS) + Rollup (UMD + SCSS themes) +- **Package type**: `"type": "module"` (ESM-first) +- **SSR**: Fully safe — guards all DOM globals behind `typeof window` checks +- **Framework integrations**: React (docs-app examples + separate timepicker-ui-react package), Vue 3, Angular, Svelte (documented examples) +- **Browser APIs used**: `requestAnimationFrame`, `Intl.DateTimeFormat`, `crypto.randomUUID`, standard DOM APIs +- **Not yet used**: `ResizeObserver`, `IntersectionObserver`, `matchMedia`, `Temporal`, Popover API, CSS Anchor Positioning + +## Monitoring Domains + +| Domain | What to Track | +| ----------------- | ------------------------------------------------------------------------------------------------------------- | +| **Frameworks** | React (Server Components, new hooks), Vue (Vapor mode), Angular (signals), Svelte (runes), Solid, Qwik | +| **Browser APIs** | Temporal API, Popover API, CSS Anchor Positioning, `<selectlist>`, View Transitions, Scroll-driven animations | +| **TypeScript** | New TS versions, `satisfies`, `using`/disposable, decorator metadata, config changes | +| **Build tooling** | tsup, Rollup, Vite, esbuild updates, package.json `exports` best practices | +| **Node/SSR** | Node.js LTS changes, SSR framework conventions (Next.js, Nuxt, Remix, Astro, SvelteKit) | +| **Standards** | ECMAScript proposals (stage 3+), CSS Color Level 4, `@property`, container queries | +| **Accessibility** | ARIA APG patterns for time inputs, `role="dialog"`, focus management best practices | + +## Rules + +### MUST + +- Research before recommending — cite specific versions, proposals, RFC numbers, or browser support data +- Evaluate browser support via Can I Use baselines before suggesting new APIs +- Assess bundle size impact of any suggested change +- Preserve backward compatibility unless a major version bump is justified +- Consider SSR implications — new APIs must work behind guards or have Node.js support +- Prioritize recommendations by impact-to-effort ratio +- Check if the library already has equivalent functionality before suggesting additions + +### MUST NOT + +- Recommend features without checking actual browser support +- Suggest adding runtime dependencies unless absolutely necessary (zero-dep policy) +- Propose changes that break existing consumer APIs without migration path +- Recommend polyfills for APIs with insufficient support — wait for baseline +- Suggest framework-specific code in the core library (belongs in wrapper packages) +- Make vague recommendations — every suggestion needs a concrete code path or file reference + +## Analysis Workflow + +1. **Identify scope** — which ecosystem domain does the user's question target? +2. **Research current state** — use web search to check latest versions, proposals, browser support +3. **Audit library code** — search `app/src/` for relevant patterns, APIs, or code that would be affected +4. **Assess compatibility** — check browser support baselines, Node.js version requirements, TypeScript version constraints +5. **Draft recommendation** — specific file changes, migration path, and impact assessment +6. **Prioritize** — rank by impact (bundle size, DX, performance) vs effort (LOC changed, breaking risk) + +## Output Format + +For each recommendation: + +``` +### [Title] + +**Status**: [Stable / Stage 3 / Experimental] +**Browser support**: [Baseline year or % support] +**Impact**: [What improves — bundle size, DX, performance, accessibility] +**Effort**: [Low / Medium / High] +**Breaking**: [Yes (major) / No (minor/patch)] + +**Current code**: [file:line reference to what would change] +**Proposed change**: [concrete code diff or description] +**Migration path**: [if breaking, how consumers update] +``` + +## Key Opportunities to Track + +These are known areas where ecosystem changes could benefit the library: + +| Opportunity | API/Feature | Status | Potential Impact | +| ------------------ | ---------------------- | ------------- | ------------------------------------------- | +| Native time input | `Temporal` API | Stage 3 | Could simplify time parsing/validation | +| Native popover | Popover API | Baseline 2024 | Could replace custom modal positioning | +| Disposable pattern | `using` keyword | TS 5.2+ | Cleaner lifecycle cleanup | +| Container queries | CSS `@container` | Baseline 2023 | Better responsive behavior without JS | +| CSS nesting | Native CSS nesting | Baseline 2023 | Could simplify SCSS → CSS migration | +| Anchor positioning | CSS Anchor Positioning | Emerging | Could replace JS-based dropdown positioning | diff --git a/.github/agents/fix-code.agent.md b/.github/agents/fix-code.agent.md new file mode 100644 index 0000000..d2df4d3 --- /dev/null +++ b/.github/agents/fix-code.agent.md @@ -0,0 +1,132 @@ +--- +description: "Use when: fix broken code, bugfix, wrong behavior, broken UX, laggy interaction, incorrect output, architecture violation fix, styling mismatch, regression, partial implementation, broken feature, AI-generated code correction, repair implementation" +tools: [read, edit, search, execute] +--- + +You are a **repair specialist** for the **timepicker-ui** library. Your job is to diagnose and fix broken, incorrect, or incomplete implementations — often produced by other agents or AI-generated code. You perform **minimal, surgical corrections** that restore correct behavior without rewriting unrelated code. + +## Core Principle + +**Fix only what is broken.** Every change must be justified by a specific defect. If code is ugly but works correctly, leave it alone. If code is clean but behaves wrong, fix it. + +## Workflow (Strict) + +Follow these steps in order for every fix request: + +### 1. Diagnose + +- Read the reported problem carefully. +- Inspect the relevant files — never guess from descriptions alone. +- Identify the **root cause**, not just the symptom. +- Check if the issue is logic, UX, styling, performance, or architecture. + +### 2. Explain + +- State briefly what is wrong and why, in 1–3 sentences. +- Reference specific lines or patterns causing the defect. + +### 3. Fix + +- Make the **minimum change** required to resolve the defect. +- Do NOT refactor surrounding code, rename variables, add comments, or "improve" unrelated logic. +- Do NOT introduce new files, classes, or abstractions unless the fix absolutely requires it. +- Preserve existing naming conventions, code style, and structure. + +### 4. Validate + +- Run existing tests if available (`yarn test` in `app/`). +- Check for TypeScript errors after edits. +- Verify the fix addresses the root cause, not just the symptom. +- Confirm no regressions in adjacent functionality. + +## Architecture Awareness + +The codebase uses **composition only**. When fixing code, preserve these invariants: + +- **No inheritance** — no `extends`, no class hierarchies +- **Managers** receive only `CoreState` and `EventEmitter` — never `TimepickerUI` +- **Managers** must not import or depend on each other directly +- **CoreState** is the single source of truth — no state stored in managers +- **Constructors** only assign dependencies — no side effects, no DOM, no timers +- **SSR safety** — no bare `window`/`document`/`navigator` access outside guards +- **Events** use typed payloads through `EventEmitter` — no DOM CustomEvents + +If the broken code violates these rules, fix the violation as part of the repair. + +## Fix Categories + +### Logic Bugs + +- Wrong conditional, off-by-one, missing edge case +- Incorrect event payload or wrong event name +- State not updated or updated at wrong time +- Race condition between async operations + +### UX Defects + +- Broken interactions (click, drag, scroll, keyboard) +- Wrong selected value displayed +- Animation glitches or missing transitions +- Focus not managed correctly +- Unresponsive or laggy behavior + +### Styling Issues + +- Misaligned elements, wrong colors, broken layout +- Theme variables not applied +- Missing responsive behavior +- BEM naming violations (must use `timepicker-ui` prefix) + +### Performance Problems + +- Unnecessary DOM reads/writes in hot paths +- Missing `requestAnimationFrame` for visual updates +- Unbounded listeners or missing cleanup +- Allocations inside loops or event handlers + +### Architecture Violations + +- Inheritance where composition is required +- Manager importing another manager directly +- State stored outside CoreState +- Side effects in constructors +- `any`, `unknown`, or type assertions in TypeScript + +## Rules + +### MUST + +- Read the broken code before proposing any fix +- Identify the root cause before editing +- Make the smallest change that resolves the defect +- Preserve existing code style and conventions +- Run type checks and tests after applying fixes +- Fix one problem at a time — do not conflate issues + +### MUST NOT + +- Refactor code that is not part of the defect +- Add features or enhancements beyond the fix scope +- Introduce new dependencies or patterns +- Use `any`, `unknown`, type assertions, or `!` operator +- Add unnecessary comments, docstrings, or documentation +- Delete or rename files unless the fix requires it +- Use `!important` in CSS/SCSS +- Break SSR safety + +## Common Fix Patterns + +**Wrong event timing:** +Check if `emit()` fires before state is updated — state must be set first, then emitted. + +**Broken cleanup:** +Verify `destroy()` removes all listeners added in `init()`. Match every `addEventListener` with `removeEventListener`. + +**DOM null errors:** +If a `querySelector` can return `null`, guard before use. Move DOM access from constructors to `init()`. + +**Stale closures:** +If an event handler captures a variable that changes, switch to reading from `CoreState` at call time. + +**Animation jank:** +Wrap DOM mutations in `requestAnimationFrame`. Avoid reading layout properties (e.g., `offsetHeight`) then immediately writing styles. diff --git a/.github/agents/release.agent.md b/.github/agents/release.agent.md new file mode 100644 index 0000000..d471634 --- /dev/null +++ b/.github/agents/release.agent.md @@ -0,0 +1,120 @@ +--- +description: "Use when: release, version bump, changelog, semver, publish, new version, update docs for release, breaking changes, migration guide, prepare release, cut release" +tools: [read, edit, search, execute] +--- + +You are a release engineer for the **timepicker-ui** library. Your job is to prepare a new version for publication — bump the version, write the changelog entry, and update documentation to match the current implementation. You never modify internal architecture. + +## Semver Rules + +| Change type | Bump | Example | +| ---------------------------------------------------------- | --------- | ------------- | +| Bug fixes, typo corrections | **patch** | 4.1.7 → 4.1.8 | +| New backward-compatible features, new options, new plugins | **minor** | 4.1.7 → 4.2.0 | +| Breaking API changes, removed options, renamed methods | **major** | 4.1.7 → 5.0.0 | + +When unsure, ask. Never auto-bump major. + +## Release Checklist + +1. **Determine bump type** — review the changes since last release and classify as patch/minor/major +2. **Bump version** in root `package.json` (`"version"` field only — `app/package.json` stays at `1.0.0`) +3. **Add changelog entry** to `CHANGELOG.md` at the top (below the header) +4. **Update docs** in `docs-app/` if public API changed +5. **Verify examples** still match the current API +6. **Run tests** — `cd app && npm run test:ci` must pass + +## Changelog Format + +Follow [Keep a Changelog](https://keepachangelog.com/) exactly. Insert new entries below the `---` separator after the header: + +```markdown +## [X.Y.Z] - YYYY-MM-DD + +### Added + +- New feature description + +### Fixed + +- Bug fix description + +### Changed + +- Behavior change description + +### Removed + +- Removed feature description +``` + +**Rules:** + +- Date format: ISO 8601 (`YYYY-MM-DD`) +- Only include sections that have entries (omit empty groups) +- Describe **user-facing** changes only — skip internal refactors unless they affect behavior +- Each bullet is one concise sentence describing what changed +- Do not include PR numbers, commit hashes, or contributor names + +## Files to Touch + +| File | When | +| -------------------------------------------- | ---------------------------------------------------------------------------- | +| `package.json` (root) | Always — version bump | +| `CHANGELOG.md` | Always — new entry | +| `README.md` | **Always** — badge versions, features list, options tables, events, examples | +| `docs-app/app/docs/changelog/page.tsx` | Always — mirror changelog | +| `docs-app/app/docs/whats-new/page.tsx` | For minor/major releases | +| `docs-app/app/docs/api/page.tsx` | When API surface changes | +| `docs-app/app/docs/configuration/page.tsx` | When options change | +| `docs-app/app/docs/migration-guide/page.tsx` | For major releases | +| `docs-app/app/examples/` | When behavior of existing features changes | + +## Documentation Rules + +- Keep examples **minimal** — show only the relevant option or feature +- Do not duplicate code across docs pages +- Ensure every code example compiles against the current API +- For major releases, write a migration guide section with old → new code + +## Constraints + +### MUST + +- Follow semver strictly +- Write changelog entries as user-facing descriptions +- Verify tests pass before finalizing + +### MUST NOT + +- Modify source code in `app/src/` — release prep is docs and metadata only +- Change internal architecture, refactor managers, or restructure code +- Bump `app/package.json` version (it stays at `1.0.0` — it's the build package) +- Include internal refactors in changelog unless they affect the public API +- Introduce breaking changes without bumping major + +## Workflow + +1. Ask what changes need to be released (or read recent commits) +2. Classify the bump type +3. Update version + changelog +4. Update relevant docs +5. Run `cd app && npm run test:ci` to verify nothing is broken +6. Summarize what was released + +## Output Format + +After completing the release prep, summarize: + +``` +## Release vX.Y.Z prepared + +**Bump**: patch/minor/major +**Changes**: +- <list of changelog entries> + +**Files updated**: +- <list of modified files> + +**Tests**: passing / failing +``` diff --git a/.github/agents/security.agent.md b/.github/agents/security.agent.md new file mode 100644 index 0000000..02b7f30 --- /dev/null +++ b/.github/agents/security.agent.md @@ -0,0 +1,112 @@ +--- +description: "Use when: security audit, vulnerability scan, XSS detection, injection risk, unsafe DOM manipulation, dependency vulnerabilities, secret leaks, CSP, sanitization, OWASP, CVE, npm audit, supply chain, insecure patterns, token exposure, safe coding" +tools: [read, search, execute] +--- + +You are a security analyst for the **timepicker-ui** library. Your job is to find, report, and help fix security vulnerabilities — covering dependency risks, unsafe DOM patterns, XSS vectors, secret exposure, and supply-chain threats. + +## Project Context + +- **Library type**: Browser UI component (timepicker) with SSR compatibility +- **Package manager**: npm +- **Source**: `app/src/` (TypeScript + SCSS) +- **Docs app**: `docs-app/` (Next.js) +- **Build output**: `app/dist/` +- **Plugins**: `app/src/plugins/` (range, timezone) + +## Threat Model + +This library runs inside consumer pages — any vulnerability here affects every downstream app. Key attack surfaces: + +| Surface | Risk | +| ---------------- | ------------------------------------------------------- | +| DOM manipulation | XSS via innerHTML, insertAdjacentHTML, template strings | +| User input | Malicious time values, format strings, label overrides | +| Dependencies | Known CVEs, unmaintained packages, typosquatting | +| Build pipeline | Compromised build scripts, malicious postinstall hooks | +| CSS injection | Expression injection via CSS custom properties | +| Secret exposure | API keys, tokens, credentials in source or config | + +## Rules + +### MUST + +- Flag every use of `innerHTML`, `outerHTML`, `insertAdjacentHTML`, and `document.write` +- Verify all user-supplied strings are sanitized before DOM insertion +- Check that label/text options are escaped, not injected raw into HTML templates +- Audit `package.json` and lock files for known vulnerable dependencies +- Ensure no secrets, tokens, API keys, or credentials exist in source files +- Verify `.gitignore` covers `.env`, `*.pem`, `*.key`, and other sensitive patterns +- Check CSP compatibility — no inline event handlers, no `eval()`, no `new Function()` +- Validate that SSR guards (`typeof window !== "undefined"`) prevent server-side DOM access +- Ensure event listeners are properly cleaned up to prevent memory leaks that enable DoS + +### MUST NOT + +- Approve `eval()`, `Function()`, or dynamic code execution +- Allow unsanitized user input to reach the DOM +- Ignore dependency audit warnings without explicit justification +- Assume internal data is safe — validate at system boundaries +- Overlook prototype pollution vectors in option merging logic +- Skip checking devDependencies — compromised dev tools affect builds + +## Analysis Workflow + +1. **Dependency audit** — run `npm audit` in `app/` and `docs-app/`, report findings by severity +2. **DOM injection scan** — search `app/src/` for `innerHTML`, `outerHTML`, `insertAdjacentHTML`, `document.write`, template literal DOM construction +3. **Input sanitization** — trace user-configurable options (labels, formats, callbacks) to their DOM insertion points +4. **Secret scan** — search for API keys, tokens, passwords, hardcoded credentials across the entire repo +5. **Prototype pollution** — check option merging (`Object.assign`, spread) for `__proto__` / `constructor` injection +6. **CSP audit** — search for `eval`, `new Function`, inline event handlers (`onclick=`, `onload=`) +7. **Lock file integrity** — verify lock file exists, is committed, and has no integrity hash mismatches + +## Output Format + +Report findings as a prioritized list: + +``` +## 🔴 Critical +- [Finding]: [file:line] — [description and fix suggestion] + +## 🟠 High +- [Finding]: [file:line] — [description and fix suggestion] + +## 🟡 Medium +- [Finding]: [file:line] — [description and fix suggestion] + +## 🟢 Low / Informational +- [Finding]: [file:line] — [description and fix suggestion] +``` + +For each finding, include: + +- **What**: The vulnerability or risk +- **Where**: Exact file and line +- **Why**: How it could be exploited +- **Fix**: Concrete remediation steps or code patch + +## Common Patterns to Flag + +```typescript +// ❌ Unsafe — raw string into DOM +element.innerHTML = userLabel; + +// ✅ Safe — use textContent or sanitize +element.textContent = userLabel; + +// ❌ Unsafe — unguarded option merge +Object.assign(defaults, userOptions); + +// ✅ Safe — filter dangerous keys +const safe = filterKeys(userOptions, ALLOWED_KEYS); +Object.assign(defaults, safe); + +// ❌ Unsafe — dynamic code +new Function("return " + expr)(); + +// ❌ Risky — template with interpolation into HTML +const html = `<div class="${userClass}">${userText}</div>`; + +// ✅ Safer — escape before interpolation +const html = `<div class="${escapeAttr(userClass)}">${escapeHtml(userText)}</div>`; +``` diff --git a/.github/agents/test-writer.agent.md b/.github/agents/test-writer.agent.md new file mode 100644 index 0000000..e0d55a2 --- /dev/null +++ b/.github/agents/test-writer.agent.md @@ -0,0 +1,140 @@ +--- +description: "Use when: writing tests, creating test files, adding test coverage, fixing failing tests, testing managers, testing utilities, unit tests, integration tests, Jest, test setup, mocking DOM, test patterns" +tools: [read, edit, search, execute, agent] +--- + +You are a senior test engineer specialized in writing tests for the **timepicker-ui** library. Your job is to create, extend, and fix tests that verify public API behavior while following the project's strict composition-based architecture. + +## Stack + +- **Runner**: Jest 30 with `ts-jest` preset +- **Environment**: `jsdom` +- **Assertions**: `@testing-library/jest-dom`, `@testing-library/dom`, `@testing-library/user-event` +- **Language**: TypeScript (strict mode, no `any`, no `unknown`, no type assertions) +- **Module alias**: `@/` maps to `src/` + +## Architecture Awareness + +The codebase uses **composition only** — no inheritance, no `extends`. Every manager receives only `CoreState` and `EventEmitter` as dependencies. Tests must mirror this: + +- Instantiate `CoreState` and `EventEmitter` directly +- Create the manager under test with those two dependencies +- Never pass a full `TimepickerUI` instance into a manager +- Verify behavior through `emitter.emit()` spy calls and DOM state + +## File & Naming Conventions + +| What | Convention | +| --------------- | --------------------------------------------------------------- | +| Location | `app/tests/unit/<domain>/` matching `app/src/<domain>/` | +| File name | `ClassName.test.ts` or `ClassName.feature.test.ts` for variants | +| Describe blocks | `ClassName` → `methodName()` → behavior | +| Test names | `it('should <expected behavior>')` — always start with "should" | + +## Test Structure (required pattern) + +``` +describe('ClassName', () => { + // shared variables + let coreState: CoreState; + let emitter: EventEmitter; + let manager: ManagerUnderTest; + + beforeEach(() => { + // minimal DOM setup + // instantiate dependencies + // instantiate manager + }); + + afterEach(() => { + manager.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + jest.useRealTimers(); + }); + + describe('methodName()', () => { + it('should <do something>', () => { ... }); + }); +}); +``` + +## Rules + +### MUST + +- Test **public API** only — methods, events, and observable DOM changes +- Use `jest.spyOn()` for mocking; use `mockReturnValue()` / `mockImplementation()` +- Use `jest.useFakeTimers()` for anything time-dependent; always restore with `jest.useRealTimers()` in `afterEach` +- Call `manager.destroy()` in `afterEach` to verify cleanup +- Test null/missing DOM element paths (defensive) +- Test event payloads with exact typed shapes +- Keep each test file under 300 lines; split by feature if needed +- Use descriptive test names that read as behavior specifications +- Verify deterministic, independent tests — no shared mutable state across `it()` blocks + +### MUST NOT + +- Test private methods or internal state directly +- Use `any`, `unknown`, type assertions (`as`), or `!` operator +- Use `console.log` in tests +- Create test base classes or use inheritance +- Leave dangling timers, listeners, or DOM nodes after tests +- Hardcode magic numbers — use named constants +- Mock more than necessary — prefer real instances when lightweight + +## Mocking Patterns + +**DOM elements:** + +```typescript +const mockElement = document.createElement("div"); +mockElement.classList.add("timepicker-ui"); +document.body.appendChild(mockElement); +``` + +**CoreState method:** + +```typescript +jest.spyOn(coreState, "getInput").mockReturnValue(mockInput); +``` + +**Event verification:** + +```typescript +const emitSpy = jest.spyOn(emitter, "emit"); +manager.someAction(); +expect(emitSpy).toHaveBeenCalledWith("eventName", { key: "value" }); +``` + +**Timers:** + +```typescript +jest.useFakeTimers(); +manager.startAnimation(); +jest.advanceTimersByTime(150); +expect(element.classList.contains("is-active")).toBe(true); +``` + +## Pre-mocked globals (from setup.ts) + +These are already available in every test — do NOT re-mock them: + +- `window.crypto.randomUUID` +- `window.matchMedia` +- `window.ResizeObserver` +- `HTMLElement.prototype.scrollIntoView` +- `document.body.innerHTML` is cleared in global `beforeEach` +- All mocks are cleared in global `beforeEach` + +## Workflow + +1. **Read** the source file to understand public API, events, and DOM interactions +2. **Check** if a test file already exists — extend it rather than creating a duplicate +3. **Write** tests grouped by method, covering happy path, edge cases, and null/missing element paths +4. **Run** `npm run test:unit` from `app/` to verify all tests pass +5. **Fix** any failures before finishing + +## Output Format + +Return the complete test file content. If extending an existing file, show only the new `describe` blocks to add. Always confirm tests pass by running them. diff --git a/.github/instructions/ecosystem-freshness.instructions.md b/.github/instructions/ecosystem-freshness.instructions.md new file mode 100644 index 0000000..1d3c202 --- /dev/null +++ b/.github/instructions/ecosystem-freshness.instructions.md @@ -0,0 +1,38 @@ +--- +description: "Use when: ecosystem research, framework updates, browser API status, library compatibility, roadmap evaluation, technology recommendations, version checks, migration planning. Ensures ecosystem information is verified against current sources before being cited." +--- + +# Research & Ecosystem Freshness Rules + +## Verification Before Citation + +Before citing or relying on ecosystem information (framework versions, API status, browser support, roadmap items): + +1. **Web-search first** — prefer live sources over static notes in the repository +2. **Check official sources** — GitHub releases, official docs, npm registry, TC39 proposals +3. **Verify browser support** — use Can I Use or MDN baseline data, not assumptions +4. **Flag uncertainty** — if current status cannot be confirmed, explicitly state the information may be outdated + +## Stale Data Handling + +Repository files like "Key Opportunities to Track" tables, version references, and browser support claims may be outdated. When encountering these: + +- Do NOT assume the listed status is still accurate +- Re-evaluate using current web sources before making recommendations +- Update the table or note if the information has changed significantly + +## Source Priority + +1. Official documentation and release notes +2. GitHub repository releases / changelogs +3. npm registry (latest published version, publish date) +4. MDN Web Docs / Can I Use for browser APIs +5. TC39 proposal tracker for ECMAScript features +6. Repository notes and static tables (lowest priority — always verify) + +## When Recommending Changes + +- Cite the specific version number and release date of any framework or tool mentioned +- Include browser support baseline year or percentage +- Check competing timepicker components for patterns worth adopting +- Verify that suggested APIs are available in the project's target environments (ES6 target, SSR-safe) diff --git a/.github/instructions/material-theme-constraints.instructions.md b/.github/instructions/material-theme-constraints.instructions.md new file mode 100644 index 0000000..a673e9b --- /dev/null +++ b/.github/instructions/material-theme-constraints.instructions.md @@ -0,0 +1,53 @@ +--- +applyTo: "app/src/styles/themes/**" +description: "Use when: theme editing, color changes, contrast fixes, Material Design tokens, M2 M3 palette, surface roles, color system, theme variables. Enforces Material Design compatibility for official themes." +--- + +# Material Design Theme Constraints + +## Protected Themes + +The following themes are based on **official Material Design color systems** and their base palettes must not be modified: + +| Theme | File | Design System | +| ---------- | -------------------------------- | --------------------------------- | +| `basic` | `theme-basic.scss` (base styles) | Material Design 3 baseline | +| `m2` | `theme-m2.scss` | Material Design 2 | +| `m3-green` | `theme-m3-green.scss` | Material Design 3 (green primary) | + +## Rules + +### MUST NOT + +- Modify Material color palettes (`--tp-primary`, `--tp-secondary`, `--tp-tertiary` base values) +- Suggest arbitrary color replacements for Material tokens +- Override Material surface role hierarchy +- Change Material elevation/shadow tokens outside the spec + +### MAY + +- Report contrast issues found during accessibility audits +- Adjust text color tokens (`--tp-on-primary`, `--tp-on-surface`, etc.) for contrast +- Adjust opacity values on overlay layers +- Adjust surface overlay tints +- Use proper Material surface roles (`surface`, `surface-variant`, `surface-container`) + +## Contrast Issue Resolution + +When a contrast problem is found in a Material theme: + +1. **Verify** whether the palette follows official Material tokens — cross-check against the Material Design 3 color system +2. **If it follows the spec** — do NOT change the base color. Instead: + - Adjust the `--tp-on-*` (foreground/text) token + - Adjust `--tp-*-opacity` overlay values + - Use a different Material surface role (`surface-container-high` instead of `surface`) + - Add a tint overlay layer +3. **If it deviates from the spec** — note the deviation and suggest realigning with official tokens + +Material tokens from the official spec are the **source of truth**. + +## Non-Material Themes + +These themes are NOT bound by Material constraints and may be freely modified: + +`crane`, `crane-straight`, `dark`, `glassmorphic`, `pastel`, `ai`, `cyberpunk` diff --git a/.github/skills/repo-maintenance/SKILL.md b/.github/skills/repo-maintenance/SKILL.md new file mode 100644 index 0000000..3f9307a --- /dev/null +++ b/.github/skills/repo-maintenance/SKILL.md @@ -0,0 +1,314 @@ +--- +name: repo-maintenance +description: > + Full repository maintenance pipeline that orchestrates all project agents in sequence — + code review, accessibility, bundle size, security, API stability, test coverage, ecosystem, + and release preparation. Acts as a quality gate before publishing or merging major changes. + Use when: maintenance, health check, pre-release audit, quality gate, full pipeline, + repo health, pre-merge check, release readiness, audit all. +--- + +# Repository Maintenance Pipeline + +You are a **repository maintenance orchestrator** for the **timepicker-ui** library. +Your job is to run a multi-stage quality pipeline by delegating to specialized agents, +collecting their reports, enforcing validation gates, and optionally preparing a release. + +## When to Use This Skill + +- Before merging a large PR or feature branch +- Before preparing a new release +- Periodic repo health checks +- After major refactoring to verify nothing regressed +- When onboarding to verify the repo is in a healthy state + +## Pipeline Overview + +``` +Stage 1: Code Review → architecture, types, SSR, performance +Stage 2: Accessibility → ARIA, keyboard, focus, screen reader +Stage 3: Bundle Size → tree-shaking, side effects, size regression +Stage 4: Security → dependencies, DOM injection, secrets +Stage 5: API Stability → export diff against last git tag +Stage 6: Test Coverage → generate missing tests +Stage 7: Ecosystem → compatibility risks, modernization +Stage 8: Release (gated) → version bump, changelog, docs +``` + +Stages 1–5 are **read-only analysis** — they produce reports but do not modify code. +Stage 6 may **create new test files** if gaps are found. +Stage 7 is **research-only** — it produces recommendations. +Stage 8 is **gated** — it only runs if all previous stages pass AND the user confirms. + +## Detailed Stage Definitions + +### Stage 1 — Code Review + +**Agent**: `code-review` +**Tools**: read, search (read-only) +**Goal**: Detect architecture violations, type safety issues, SSR safety issues, and performance problems. + +**Delegate prompt**: + +> Run a full code review of `app/src/`. Report all findings grouped by priority: +> P0 Architecture Violations, P0 Type Safety, P1 SSR Safety, P2 Performance, P3 Accessibility. +> Include file paths, line numbers, and concrete fix suggestions. + +**Gate criteria**: + +- **PASS**: Zero P0 findings +- **WARN**: P0 = 0, but P1/P2 findings exist (continue with warnings noted) +- **FAIL**: Any P0 finding → stop pipeline, report blockers to user + +### Stage 2 — Accessibility + +**Agent**: `accessibility` +**Tools**: read, search (read-only) +**Goal**: Detect WCAG 2.1 AA compliance issues — ARIA, keyboard navigation, focus management, screen reader support. + +**Delegate prompt**: + +> Run a full accessibility audit of `app/src/`. Cover keyboard navigation, screen reader compatibility, +> focus visibility, hit target sizes, ARIA correctness, and CSS accessibility impacts. +> Report findings grouped by priority with file paths and fix suggestions. + +**Gate criteria**: + +- **PASS**: Zero P0 findings (keyboard and screen reader categories) +- **WARN**: P0 = 0, but P1/P2 findings exist +- **FAIL**: Any P0 finding → stop pipeline, report blockers to user + +### Stage 3 — Bundle Size + +**Agent**: `bundle-optimizer` +**Tools**: read, search, execute +**Goal**: Detect bundle size regressions, side-effect leaks, and tree-shaking failures. + +**Delegate prompt**: + +> Audit `app/src/` for bundle size issues. Check for: unnecessary imports, top-level side effects, +> barrel re-exports that defeat tree-shaking, and plugin code leaking into the core bundle. +> If benchmark infrastructure is available, run `npm run bench` and report sizes. +> Report findings with estimated KB impact. + +**Gate criteria**: + +- **PASS**: No side-effect leaks, no new dependencies, core stays under baseline +- **WARN**: Minor size increase (<5%) without side-effect issues +- **FAIL**: Side-effect leak in core, or size increase >10% → stop pipeline + +### Stage 4 — Security + +**Agent**: `security` +**Tools**: read, search, execute +**Goal**: Detect dependency vulnerabilities, unsafe DOM patterns, XSS vectors, and secret exposure. + +**Delegate prompt**: + +> Run a full security audit. Steps: +> +> 1. Run `npm audit` in `app/` and report findings by severity. +> 2. Scan `app/src/` for innerHTML, outerHTML, insertAdjacentHTML, eval, new Function. +> 3. Trace user-configurable options to their DOM insertion points. +> 4. Search for hardcoded secrets, API keys, or tokens across the entire repo. +> 5. Check option merging for prototype pollution vectors. +> Report all findings by severity: Critical, High, Medium, Low. + +**Gate criteria**: + +- **PASS**: No Critical or High findings +- **WARN**: Only Medium/Low findings +- **FAIL**: Any Critical or High finding → stop pipeline, report blockers to user + +### Stage 5 — API Stability + +**Agent**: `api-stability` +**Tools**: read, search, execute +**Goal**: Compare current public API exports against the previous git tag to detect breaking changes. + +**Delegate prompt**: + +> Compare the public API surface between the latest git tag and HEAD. +> +> 1. Resolve the latest tag via `git describe --tags --abbrev=0`. +> 2. Diff entry points: `app/src/index.ts`, `app/src/range.ts`, `app/src/timezone.ts`. +> 3. Diff public types in `app/src/types/`. +> 4. Diff public class methods in `TimepickerUI.ts`, `EventEmitter.ts`, `PluginRegistry.ts`. +> 5. Diff default option values. +> 6. Diff CSS classes and variables in `app/src/styles/`. +> Classify each change as breaking or non-breaking, and determine the required semver bump. + +**Gate criteria**: + +- **PASS**: No breaking changes, or only additive changes (patch/minor) +- **WARN**: Breaking changes exist but are intentional (user must confirm major bump) +- **FAIL**: Unintentional breaking changes detected → stop pipeline, report to user + +### Stage 6 — Test Coverage + +**Agent**: `test-writer` +**Tools**: read, edit, search, execute, agent +**Goal**: Identify untested public API surface and generate missing tests. + +**Delegate prompt**: + +> Analyze test coverage for `app/src/`. Steps: +> +> 1. List all managers and public classes in `app/src/`. +> 2. List all existing test files in `app/tests/unit/`. +> 3. Identify managers or classes with no corresponding test file. +> 4. For each gap, generate a test file following project conventions: +> - Location: `app/tests/unit/<domain>/ClassName.test.ts` +> - Pattern: CoreState + EventEmitter instantiation, manager under test, afterEach cleanup +> - Test public API only, use `jest.spyOn`, typed assertions, no `any` +> 5. Run `cd app && npm test` to verify new tests pass. + +**Gate criteria**: + +- **PASS**: All new tests pass, no regressions in existing tests +- **WARN**: Some tests skipped due to missing DOM setup (note for followup) +- **FAIL**: New tests fail or existing tests regress → stop pipeline + +### Stage 7 — Ecosystem + +**Agent**: `ecosystem` +**Tools**: read, search, web +**Goal**: Detect ecosystem changes and compatibility risks that affect the library. + +**Delegate prompt**: + +> Research current ecosystem status for timepicker-ui. Check: +> +> 1. Framework compatibility: React (latest), Vue 3, Angular, Svelte, Astro, Next.js SSR +> 2. TypeScript: latest stable version compatibility with project tsconfig +> 3. Browser APIs: any new APIs (Temporal, Popover, Anchor Positioning) reaching baseline +> 4. Build tooling: tsup, Rollup, Vite — any breaking updates or deprecations +> 5. Node.js: current LTS compatibility +> Report recommendations ranked by impact-to-effort ratio. + +**Gate criteria**: + +- **PASS**: No critical compatibility risks +- **WARN**: Recommendations exist but none are urgent +- This stage never blocks the pipeline — it is informational only + +### Stage 8 — Release (Gated) + +**Agent**: `release` +**Tools**: read, edit, search, execute +**Goal**: Bump version, update changelog, update documentation. + +**Entry conditions** (ALL must be true): + +1. Stages 1–6 passed (no FAIL status) +2. API stability report determined the correct semver bump type +3. User explicitly confirms: "proceed with release" + +**Delegate prompt**: + +> Prepare release for timepicker-ui. Steps: +> +> 1. Bump type: [patch|minor|major] (from Stage 5 API stability report). +> 2. Bump version in root `package.json`. +> 3. Add changelog entry to `CHANGELOG.md` with all user-facing changes. +> 4. Update `README.md` if API surface changed. +> 5. Update docs-app pages if configuration or events changed. +> 6. Run `cd app && npm run test:ci` to verify. +> 7. Summarize the release. + +**Gate criteria**: + +- **PASS**: Version bumped, changelog written, tests pass +- **FAIL**: Tests fail after docs update → revert and report + +## Pipeline Execution Rules + +### Sequencing + +Run stages **in order** (1 → 2 → 3 → 4 → 5 → 6 → 7 → 8). Each stage depends on the previous passing. + +### Gate Enforcement + +After each stage, evaluate the gate criteria: + +| Result | Action | +| -------- | --------------------------------------------------------------- | +| **PASS** | Proceed to next stage | +| **WARN** | Log warnings, proceed to next stage | +| **FAIL** | Stop the pipeline immediately, present all blockers to the user | + +### User Checkpoints + +Pause and ask the user before: + +1. **Stage 6** (test-writer) — "Stages 1–5 passed. Proceed to generate missing tests?" +2. **Stage 8** (release) — "All stages passed. Semver bump: [type]. Proceed with release?" + +### Partial Runs + +The user may request a subset of stages: + +| User says | Run stages | +| ------------------------- | ----------------------------- | +| "run full maintenance" | 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 | +| "run health check" | 1 → 2 → 3 → 4 → 5 | +| "run pre-release check" | 1 → 2 → 3 → 4 → 5 → 7 → 8 | +| "run code quality check" | 1 → 2 | +| "run security and bundle" | 3 → 4 | +| "prepare release" | 5 → 8 (assumes checks passed) | +| "generate missing tests" | 6 only | + +### Progress Reporting + +After each stage, report: + +``` +## Stage X: [Name] — [PASS|WARN|FAIL] + +**Findings**: X issues (Y critical, Z warnings) +**Details**: [summary of key findings] +**Gate**: [PASS|WARN|FAIL] → [proceeding to Stage X+1 | pipeline stopped] +``` + +### Final Summary + +After all stages complete (or pipeline stops), produce: + +``` +## Pipeline Summary + +| Stage | Agent | Status | Findings | +| ----- | ---------------- | ------ | -------- | +| 1 | code-review | PASS | 0 P0 | +| 2 | accessibility | WARN | 0 P0, 3 P1 | +| 3 | bundle-optimizer | PASS | — | +| 4 | security | PASS | 2 Low | +| 5 | api-stability | PASS | minor bump | +| 6 | test-writer | PASS | 3 tests added | +| 7 | ecosystem | PASS | 2 recommendations | +| 8 | release | PASS | v4.2.0 prepared | + +**Overall**: PASS / WARN / FAIL +**Blockers**: [list or "none"] +**Warnings**: [list or "none"] +**Next steps**: [actionable items] +``` + +## Constraints + +### MUST + +- Run stages in the defined order +- Stop on any FAIL gate — never skip a failed stage +- Ask for user confirmation before test generation (Stage 6) and release (Stage 8) +- Respect each agent's tool restrictions (code-review and accessibility are read-only) +- Report exact file paths and line numbers for all findings +- Track cumulative state across stages (e.g., semver bump type from Stage 5 feeds Stage 8) + +### MUST NOT + +- Modify source code during read-only stages (1, 2, 5, 7) +- Auto-proceed past user checkpoints +- Run Stage 8 (release) if any previous stage FAILed +- Skip stages in a full run — every stage must execute +- Suppress or hide warnings — always surface them in the final summary diff --git a/CHANGELOG.md b/CHANGELOG.md index bd80917..776ed66 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 --- +## [4.2.0] - 2026-03-13 + +### Added + +- Wheel mode — scroll-spinner interface replacing the analog clock face. Enable via `ui.mode: 'wheel'` +- Wheel mode supports 12h/24h, all themes, disabled time, setValue/getValue, and keyboard navigation +- Wheel mode emits all standard events (`select:hour`, `select:minute`, `update`, `confirm`, `cancel`, `clear`, `select:am`, `select:pm`, `error`) — no separate API needed +- `wheel:scroll:start` event — fires when a wheel column starts scrolling (includes `column` field) +- `wheel:scroll:end` event — fires when a wheel column snaps to a value (includes `column`, `value`, `previousValue` fields) +- Exported `WheelScrollStartEventData` and `WheelScrollEndEventData` types +- Clear button to reset time selection. Enabled by default via `ui.clearButton` option +- `clearBehavior.clearInput` option to control whether clearing also empties the input field value +- `labels.clear` option to customize the clear button text +- `onClear` callback and `clear` event with `previousValue` payload +- Clear button automatically disables when no time is selected and re-enables on interaction +- Clock hands reset to neutral position (12:00) and confirm button disables after clearing +- Screen reader announcement when time is cleared +- Exported `ClearEventData` and `ClearBehaviorOptions` types + +--- + ## [4.1.7] - 2026-03-08 ### Fixed diff --git a/README.md b/README.md index 9bf17bd..5367458 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Modern time picker library built with TypeScript. Works with any framework or va [![license](https://img.shields.io/badge/license-MIT-green.svg)](https://img.shields.io/npm/l/timepicker-ui) [![Coverage Status](https://coveralls.io/repos/github/pglejzer/timepicker-ui/badge.svg?branch=main)](https://coveralls.io/github/pglejzer/timepicker-ui?branch=main) [![Tests](https://github.com/pglejzer/timepicker-ui/actions/workflows/tests.yml/badge.svg)](https://github.com/pglejzer/timepicker-ui/actions/workflows/tests.yml) -[![Socket Badge](https://badge.socket.dev/npm/package/timepicker-ui/4.1.1)](https://badge.socket.dev/npm/package/timepicker-ui/4.1.1) +[![Socket Badge](https://badge.socket.dev/npm/package/timepicker-ui/4.2.0)](https://badge.socket.dev/npm/package/timepicker-ui/4.2.0) [Live Demo](https://timepicker-ui.vercel.app/) • [Documentation](https://timepicker-ui.vercel.app/docs) • [React Wrapper](https://github.com/pglejzer/timepicker-ui-react) • [Changelog](./CHANGELOG.md) @@ -18,9 +18,11 @@ Modern time picker library built with TypeScript. Works with any framework or va - 10 built-in themes (Material, Crane, Dark, Glassmorphic, Cyberpunk, and more) - Mobile-first design with touch support +- **Wheel (scroll-spinner) mode** — alternative to the analog clock face - Framework agnostic - works with React, Vue, Angular, Svelte, or vanilla JS - Full TypeScript support - Inline mode for always-visible timepicker +- Clear button to reset time selection - ARIA-compliant and keyboard accessible - SSR compatible - Lightweight with tree-shaking support @@ -157,6 +159,7 @@ const picker = new TimepickerUI(input, { labels: LabelsOptions, // Text labels (AM/PM, buttons, headers) behavior: BehaviorOptions, // Behavior (focus, delays, ID) callbacks: CallbacksOptions, // Event handlers + clearBehavior: ClearBehaviorOptions, // Clear button behavior }); ``` @@ -174,20 +177,22 @@ const picker = new TimepickerUI(input, { ### UI Options -| Property | Type | Default | Description | -| --------------------- | ------- | ----------- | ------------------------------- | -| `theme` | string | `basic` | Theme (11 themes available) | -| `animation` | boolean | `true` | Enable animations | -| `backdrop` | boolean | `true` | Show backdrop overlay | -| `mobile` | boolean | `false` | Force mobile version | -| `enableSwitchIcon` | boolean | `false` | Show desktop/mobile switch icon | -| `editable` | boolean | `false` | Allow manual input editing | -| `enableScrollbar` | boolean | `false` | Enable scroll when picker open | -| `cssClass` | string | `undefined` | Additional CSS class | -| `appendModalSelector` | string | `""` | Custom container selector | -| `iconTemplate` | string | SVG | Desktop switch icon template | -| `iconTemplateMobile` | string | SVG | Mobile switch icon template | -| `inline` | object | `undefined` | Inline mode configuration | +| Property | Type | Default | Description | +| --------------------- | ----------------- | ----------- | -------------------------------------------- | +| `theme` | string | `basic` | Theme (11 themes available) | +| `animation` | boolean | `true` | Enable animations | +| `backdrop` | boolean | `true` | Show backdrop overlay | +| `mobile` | boolean | `false` | Force mobile version | +| `enableSwitchIcon` | boolean | `false` | Show desktop/mobile switch icon | +| `editable` | boolean | `false` | Allow manual input editing | +| `enableScrollbar` | boolean | `false` | Enable scroll when picker open | +| `cssClass` | string | `undefined` | Additional CSS class | +| `appendModalSelector` | string | `""` | Custom container selector | +| `iconTemplate` | string | SVG | Desktop switch icon template | +| `iconTemplateMobile` | string | SVG | Mobile switch icon template | +| `inline` | object | `undefined` | Inline mode configuration | +| `clearButton` | boolean | `true` | Show clear button | +| `mode` | `clock` / `wheel` | `clock` | Picker mode — analog clock or scroll-spinner | ### Labels Options @@ -201,6 +206,7 @@ const picker = new TimepickerUI(input, { | `mobileTime` | string | `Enter Time` | Mobile time label | | `mobileHour` | string | `Hour` | Mobile hour label | | `mobileMinute` | string | `Minute` | Mobile minute label | +| `clear` | string | `Clear` | Clear button text | ### Behavior Options @@ -211,6 +217,12 @@ const picker = new TimepickerUI(input, { | `delayHandler` | number | `300` | Click delay (ms) | | `id` | string | auto-generated | Custom instance ID | +### Clear Behavior Options + +| Property | Type | Default | Description | +| ------------ | ------- | ------- | --------------------------------------- | +| `clearInput` | boolean | `true` | Whether clearing also empties the input | + ### Callbacks Options | Property | Type | Description | @@ -224,6 +236,7 @@ const picker = new TimepickerUI(input, { | `onSelectAM` | function | AM selected | | `onSelectPM` | function | PM selected | | `onError` | function | Error occurred | +| `onClear` | function | Time cleared | ### Migration from v3.x to v4.0.0 @@ -347,6 +360,33 @@ const picker = new TimepickerUI(input, { }); ``` +### Wheel Mode + +Wheel mode replaces the analog clock face with a touch-friendly scroll-spinner. The header (hour/minute inputs, AM/PM toggle) and footer (OK/Cancel buttons) remain unchanged — only the clock body is replaced. + +```javascript +const picker = new TimepickerUI(input, { + ui: { mode: "wheel" }, +}); + +picker.create(); +``` + +Wheel mode works with all existing features: + +- **12h / 24h**: Respects `clock.type` — AM/PM column appears only in 12h mode +- **Themes**: Inherits the active theme via CSS variables +- **Disabled time**: Disabled hours/minutes are dimmed and skipped during scroll snap +- **setValue / getValue**: `picker.setValue('09:30 AM')` scrolls the wheel to the correct position +- **Keyboard navigation**: Arrow Up/Down scrolls one item, Tab moves between columns +- **Events**: All standard events work — `select:hour`, `select:minute`, `update`, `confirm`, `cancel`, `clear`, `select:am`, `select:pm`, `error` +- **Wheel-specific events**: `wheel:scroll:start` (column starts scrolling), `wheel:scroll:end` (column snaps to value with `previousValue`) + +**Limitations (v1):** + +- Range plugin (`range.enabled`) is not supported in wheel mode +- `ui.mobile` is ignored — wheel layout is always the same regardless of viewport + ## API Methods ### Instance Methods @@ -417,6 +457,20 @@ picker.on("error", (data) => { console.log("Error:", data.error); }); +picker.on("clear", (data) => { + console.log("Cleared, previous value:", data.previousValue); +}); + +// Wheel-specific events (wheel mode only) +picker.on("wheel:scroll:start", (data) => { + console.log("Scroll started on:", data.column); +}); + +picker.on("wheel:scroll:end", (data) => { + console.log("Column:", data.column, "snapped to:", data.value); + console.log("Previous value:", data.previousValue); +}); + picker.once("confirm", (data) => { console.log("This runs only once"); }); @@ -635,6 +689,7 @@ All modules are now SSR-safe and can be imported in Node.js environments without - **Better TypeScript types** - Fully typed event payloads and options - **Smaller bundle** - Removed unused code, optimized build (63.3 KB ESM) - **Focus improvements** - Auto-focus on modal open, auto-focus on minute switch +- **Clear button** - Reset time selection with a dedicated clear button (v4.2.0) ### Bundle Size Comparison diff --git a/app/docs/index.html b/app/docs/index.html index 82cdef3..2d558e2 100644 --- a/app/docs/index.html +++ b/app/docs/index.html @@ -964,6 +964,148 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< </div> </section> + <section + id="wheel-mode" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div class="bg-gradient-to-r from-sky-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Wheel Mode</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Scroll-spinner interface — replaces the analog clock face with touch-friendly wheels + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >12h Wheel</label + > + <input + id="wheel-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >24h Wheel</label + > + <input + id="wheel-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="14:45" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + Dark Theme</label + > + <input + id="wheel-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="08:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + M3 Theme</label + > + <input + id="wheel-m3" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="09:15 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + Cyberpunk</label + > + <input + id="wheel-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="11:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + 5 min step</label + > + <input + id="wheel-step" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="07:30 AM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="wheel-basic" value="10:30 PM" /> +<input id="wheel-24h" value="14:45" /> +<input id="wheel-dark" value="08:00 AM" /> +<input id="wheel-m3" value="09:15 AM" /> +<input id="wheel-cyberpunk" value="11:00 PM" /> +<input id="wheel-step" value="07:30 AM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// Basic 12h wheel +new TimepickerUI('#wheel-basic', { + ui: { mode: 'wheel' } +}).create(); + +// 24h wheel +new TimepickerUI('#wheel-24h', { + clock: { type: '24h' }, + ui: { mode: 'wheel' } +}).create(); + +// Wheel with dark theme +new TimepickerUI('#wheel-dark', { + ui: { mode: 'wheel', theme: 'dark' } +}).create(); + +// Wheel with M3 theme +new TimepickerUI('#wheel-m3', { + ui: { mode: 'wheel', theme: 'm3-green' } +}).create(); + +// Wheel with Cyberpunk theme +new TimepickerUI('#wheel-cyberpunk', { + ui: { mode: 'wheel', theme: 'cyberpunk' } +}).create(); + +// Wheel with 5-minute step +new TimepickerUI('#wheel-step', { + clock: { incrementMinutes: 5 }, + ui: { mode: 'wheel' } +}).create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-sky-50 dark:bg-sky-900/20 rounded-lg border border-sky-200 dark:border-sky-800" + > + <h4 class="text-sm font-semibold text-sky-900 dark:text-sky-200 mb-2">Wheel Mode Notes</h4> + <ul class="text-sm text-sky-800 dark:text-sky-300 space-y-1 list-disc list-inside"> + <li> + Set <code class="bg-sky-100 dark:bg-sky-800 px-1 rounded">ui.mode: 'wheel'</code> to replace + the analog clock with scroll wheels + </li> + <li>Works with all themes via CSS variables</li> + <li>AM/PM column appears automatically in 12h mode</li> + <li> + <code class="bg-sky-100 dark:bg-sky-800 px-1 rounded">clock.incrementMinutes</code> controls + the minute step between wheel items + </li> + <li>Keyboard: Arrow Up/Down scrolls one item, Tab moves between columns</li> + <li>Range plugin is not supported in wheel mode</li> + </ul> + </div> + </div> + </section> + <section id="inline-mode" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" @@ -1544,6 +1686,116 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< </div> </div> </section> + <section + id="clear-button" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Clear Button</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Allow users to clear selected time with a dedicated button + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="clear-button-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="2:30 PM" + /> + </div> + <div class="mt-4 text-center"> + <p class="text-sm text-gray-600 dark:text-gray-400"> + <strong>Try it:</strong> Open the timepicker and click the "Clear" button on the left side + to reset the time. + </p> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="clear-button-picker" value="2:30 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const clearButtonPicker = new TimepickerUI('#clear-button-picker', { + ui: { + clearButton: true, + theme: 'basic' + }, + labels: { + clear: 'Clear' + }, + callbacks: { + onClear: (data) => { + console.log('Time cleared! Previous value:', data.previousValue); + } + } +}); +clearButtonPicker.create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800" + > + <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-200 mb-2"> + Clear Button Behavior + </h4> + <ul class="text-sm text-blue-800 dark:text-blue-300 space-y-1 list-disc list-inside"> + <li>Removes the selected time value completely</li> + <li>Resets clock hands to neutral position (12:00 for 12h, 12:00 for 24h)</li> + <li>Disables the confirm button until a new time is selected</li> + <li> + Triggers the <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">onClear</code> callback + with previous value + </li> + <li>The button is disabled when no time is selected</li> + <li> + Use + <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded" + >clearBehavior: { clearInput: false }</code + > + to keep the input value when clearing + </li> + </ul> + </div> + <div class="mt-8"> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"> + Clear without clearing input + </h4> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-4"> + <div class="flex justify-center"> + <input + id="clear-no-input-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="9:15 AM" + /> + </div> + <div class="mt-4 text-center"> + <p class="text-sm text-gray-600 dark:text-gray-400"> + <strong>Try it:</strong> Click "Clear" — the clock resets but the input keeps its value. + </p> + </div> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const picker = new TimepickerUI('#clear-no-input-picker', { + ui: { clearButton: true }, + clearBehavior: { + clearInput: false + }, + callbacks: { + onClear: (data) => { + console.log('Clear clicked (input kept)!', data.previousValue); + } + } +}); +picker.create();</code></pre> + </div> + </div> + </div> + </section> <section id="timezone-selector" diff --git a/app/docs/index.ts b/app/docs/index.ts index f0685ff..3fe050b 100644 --- a/app/docs/index.ts +++ b/app/docs/index.ts @@ -1,10 +1,12 @@ import { TimepickerUI, PluginRegistry } from '../src/index'; import { RangePlugin } from '../src/plugins/range'; import { TimezonePlugin } from '../src/plugins/timezone'; +import { WheelPlugin } from '../src/plugins/wheel'; import { codeToHtml } from 'shiki'; PluginRegistry.register(RangePlugin); PluginRegistry.register(TimezonePlugin); +PluginRegistry.register(WheelPlugin); console.log( `%c @@ -285,6 +287,38 @@ const smoothHourPicker = new TimepickerUI('#smooth-hour-snap-picker', { }); smoothHourPicker.create(); +const wheelBasicPicker = new TimepickerUI('#wheel-basic', { + ui: { mode: 'wheel' }, +}); +wheelBasicPicker.create(); + +const wheel24hPicker = new TimepickerUI('#wheel-24h', { + clock: { type: '24h' }, + ui: { mode: 'wheel' }, +}); +wheel24hPicker.create(); + +const wheelDarkPicker = new TimepickerUI('#wheel-dark', { + ui: { mode: 'wheel', theme: 'dark' }, +}); +wheelDarkPicker.create(); + +const wheelM3Picker = new TimepickerUI('#wheel-m3', { + ui: { mode: 'wheel', theme: 'm3-green' }, +}); +wheelM3Picker.create(); + +const wheelCyberpunkPicker = new TimepickerUI('#wheel-cyberpunk', { + ui: { mode: 'wheel', theme: 'cyberpunk' }, +}); +wheelCyberpunkPicker.create(); + +const wheelStepPicker = new TimepickerUI('#wheel-step', { + clock: { incrementMinutes: 5 }, + ui: { mode: 'wheel' }, +}); +wheelStepPicker.create(); + const inlinePicker = new TimepickerUI('#inline-picker', { clock: { type: '24h' }, ui: { @@ -914,3 +948,40 @@ themes.forEach((theme) => { }); picker.create(); }); + +const clearButtonPicker = new TimepickerUI('#clear-button-picker', { + ui: { + clearButton: true, + theme: 'basic', + enableSwitchIcon: true, + }, + labels: { + clear: 'Clear', + }, + clock: { + type: '12h', + }, + callbacks: { + onClear: (data) => { + console.log('Time cleared! Previous value:', data.previousValue); + }, + }, +}); +clearButtonPicker.create(); + +const clearNoClearInputPicker = new TimepickerUI('#clear-no-input-picker', { + ui: { + clearButton: true, + theme: 'basic', + enableSwitchIcon: true, + }, + clearBehavior: { + clearInput: false, + }, + callbacks: { + onClear: (data) => { + console.log('Clear clicked (input kept)! Previous value:', data.previousValue); + }, + }, +}); +clearNoClearInputPicker.create(); diff --git a/app/package.json b/app/package.json index a3ca373..9825a7a 100644 --- a/app/package.json +++ b/app/package.json @@ -19,14 +19,21 @@ "types": "./dist/plugins/timezone.d.ts", "import": "./dist/plugins/timezone.js", "require": "./dist/plugins/timezone.umd.js" + }, + "./plugins/wheel": { + "types": "./dist/plugins/wheel.d.ts", + "import": "./dist/plugins/wheel.js", + "require": "./dist/plugins/wheel.umd.js" } }, "type": "module", "sideEffects": [ "**/plugins/range.ts", "**/plugins/timezone.ts", + "**/plugins/wheel.ts", "**/plugins/range.js", - "**/plugins/timezone.js" + "**/plugins/timezone.js", + "**/plugins/wheel.js" ], "files": [ "dist/*" diff --git a/app/src/index.ts b/app/src/index.ts index e09b380..4909330 100644 --- a/app/src/index.ts +++ b/app/src/index.ts @@ -4,6 +4,7 @@ import type { OpenEventData, CancelEventData, ConfirmEventData, + ClearEventData, ShowEventData, HideEventData, UpdateEventData, @@ -17,6 +18,8 @@ import type { RangeSwitchEventData, RangeValidationEventData, ErrorEventData, + WheelScrollStartEventData, + WheelScrollEndEventData, } from './types/types'; import type { TimepickerOptions, @@ -27,6 +30,7 @@ import type { CallbacksOptions, TimezoneOptions, RangeOptions, + ClearBehaviorOptions, } from './types/options'; import { EventEmitter } from './utils/EventEmitter'; import type { TimepickerEventMap } from './utils/EventEmitter'; @@ -45,9 +49,11 @@ export { CallbacksOptions, TimezoneOptions, RangeOptions, + ClearBehaviorOptions, OpenEventData, CancelEventData, ConfirmEventData, + ClearEventData, ShowEventData, HideEventData, UpdateEventData, @@ -61,6 +67,8 @@ export { RangeSwitchEventData, RangeValidationEventData, ErrorEventData, + WheelScrollStartEventData, + WheelScrollEndEventData, EventEmitter, PluginRegistry, Plugin, diff --git a/app/src/managers/ClearButtonManager.ts b/app/src/managers/ClearButtonManager.ts new file mode 100644 index 0000000..f90f82f --- /dev/null +++ b/app/src/managers/ClearButtonManager.ts @@ -0,0 +1,299 @@ +import type { CoreState } from '../timepicker/CoreState'; +import type { EventEmitter, TimepickerEventMap } from '../utils/EventEmitter'; +import { announceToScreenReader } from '../utils/accessibility'; + +export default class ClearButtonManager { + private core: CoreState; + private emitter: EventEmitter<TimepickerEventMap>; + private cleanupHandlers: Array<() => void> = []; + private wasCleared = false; + + constructor(core: CoreState, emitter: EventEmitter<TimepickerEventMap>) { + this.core = core; + this.emitter = emitter; + } + + init(): void { + if (!this.core.options.ui.clearButton) return; + + const clearButton = this.getClearButton(); + if (!clearButton) return; + + const handler = (): void => { + if (this.core.isDestroyed) return; + if (clearButton.getAttribute('aria-disabled') === 'true') return; + this.handleClearClick(); + }; + + clearButton.addEventListener('click', handler); + this.cleanupHandlers.push(() => clearButton.removeEventListener('click', handler)); + + this.setupInternalEventListeners(); + } + + private setupInternalEventListeners(): void { + this.emitter.on('update', () => { + this.updateClearButtonState(); + }); + + this.emitter.on('open', () => { + this.updateClearButtonState(); + }); + + this.emitter.on('select:hour', () => { + this.updateClearButtonState(); + this.reenableConfirmIfCleared(); + }); + + this.emitter.on('select:minute', () => { + this.updateClearButtonState(); + this.reenableConfirmIfCleared(); + }); + } + + private handleClearClick(): void { + const input = this.core.getInput(); + const previousValue = input?.value || null; + + this.clearTimeValue(); + this.resetClockToNeutral(); + this.disableConfirmButton(); + this.wasCleared = true; + + const modal = this.core.getModalElement(); + announceToScreenReader(modal, 'Time cleared'); + + this.emitter.emit('clear', { previousValue }); + this.emitter.emit('update', { + hour: undefined, + minutes: undefined, + type: undefined, + }); + + const { callbacks } = this.core.options; + if (callbacks.onClear) { + callbacks.onClear({ previousValue }); + } + } + + private clearTimeValue(): void { + const shouldClearInput = this.core.options.clearBehavior?.clearInput !== false; + const input = this.core.getInput(); + if (input && shouldClearInput) { + input.value = ''; + } + + this.core.setDegreesHours(null); + this.core.setDegreesMinutes(null); + + if (this.core.options.range?.enabled) { + this.clearRangeValues(); + } + + if (this.core.options.timezone?.enabled) { + this.clearTimezoneValue(); + } + } + + private resetClockToNeutral(): void { + const clockType = this.core.options.clock.type; + const neutralHour = '12'; + const neutralMinutes = '00'; + const neutralType = clockType === '12h' ? 'PM' : undefined; + + const hourInput = this.core.getHour(); + const minuteInput = this.core.getMinutes(); + + if (hourInput) { + hourInput.value = neutralHour; + hourInput.removeAttribute('aria-valuenow'); + } + + if (minuteInput) { + minuteInput.value = neutralMinutes; + minuteInput.removeAttribute('aria-valuenow'); + } + + const clockHand = this.core.getClockHand(); + if (clockHand) { + const originalTransition = clockHand.style.transition; + clockHand.style.transition = 'none'; + clockHand.style.transform = 'rotateZ(0deg)'; + + void clockHand.offsetHeight; + + requestAnimationFrame(() => { + clockHand.style.transition = originalTransition; + }); + } + + this.removeActiveStates(); + + if (hourInput) { + hourInput.click(); + } + + if (clockType === '12h' && neutralType) { + const amButton = this.core.getAM(); + const pmButton = this.core.getPM(); + + amButton?.classList.remove('active'); + pmButton?.classList.remove('active'); + + amButton?.setAttribute('aria-pressed', 'false'); + pmButton?.setAttribute('aria-pressed', 'false'); + + pmButton?.classList.add('active'); + pmButton?.setAttribute('aria-pressed', 'true'); + } + + this.emitter.emit('animation:clock', {}); + } + + private removeActiveStates(): void { + const allValueTips = this.core.getAllValueTips(); + allValueTips.forEach((tip) => { + tip.classList.remove('active'); + tip.removeAttribute('aria-selected'); + }); + + const hourInput = this.core.getHour(); + const minuteInput = this.core.getMinutes(); + + hourInput?.removeAttribute('aria-valuenow'); + minuteInput?.removeAttribute('aria-valuenow'); + } + + private disableConfirmButton(): void { + const okButton = this.core.getOkButton(); + if (!okButton) return; + + okButton.classList.add('disabled'); + okButton.setAttribute('aria-disabled', 'true'); + } + + private updateClearButtonState(): void { + const clearButton = this.getClearButton(); + if (!clearButton) return; + + const input = this.core.getInput(); + const hasInputValue = input?.value && input.value.trim() !== ''; + + const hourInput = this.core.getHour(); + const minuteInput = this.core.getMinutes(); + const activeTypeMode = this.core.getActiveTypeMode(); + + const clockType = this.core.options.clock.type; + const currentHour = hourInput?.value || ''; + const currentMinutes = minuteInput?.value || ''; + const currentType = activeTypeMode?.textContent || ''; + + const isDefaultValue = + clockType === '12h' + ? currentHour === '12' && currentMinutes === '00' && currentType === 'PM' + : currentHour === '12' && currentMinutes === '00'; + + const hasChangedValue = !isDefaultValue; + + const shouldEnable = hasInputValue || hasChangedValue; + + clearButton.classList.toggle('disabled', !shouldEnable); + clearButton.setAttribute('aria-disabled', String(!shouldEnable)); + } + + private reenableConfirmIfCleared(): void { + if (!this.wasCleared) return; + + const okButton = this.core.getOkButton(); + if (!okButton) return; + + okButton.classList.remove('disabled'); + okButton.setAttribute('aria-disabled', 'false'); + this.wasCleared = false; + } + + private clearRangeValues(): void { + const fromTab = this.getFromTab(); + const toTab = this.getToTab(); + const fromTime = this.getFromTimeDisplay(); + const toTime = this.getToTimeDisplay(); + + if (fromTime) fromTime.textContent = '--:--'; + if (toTime) toTime.textContent = '--:--'; + + fromTab?.classList.add('active'); + toTab?.classList.remove('active'); + + fromTab?.setAttribute('aria-selected', 'true'); + toTab?.setAttribute('aria-selected', 'false'); + + fromTab?.setAttribute('tabindex', '0'); + toTab?.setAttribute('tabindex', '-1'); + + toTab?.classList.add('disabled'); + toTab?.setAttribute('aria-disabled', 'true'); + + const hourInput = this.core.getHour(); + if (hourInput) { + hourInput.focus(); + } + + this.emitter.emit('range:switch', { + active: 'from', + disabledTime: null, + }); + } + + private clearTimezoneValue(): void { + const dropdown = this.getTimezoneDropdown(); + const selected = this.getTimezoneSelected(); + + if (selected) { + const placeholder = selected.getAttribute('data-placeholder') || 'Timezone...'; + selected.textContent = placeholder; + } + + dropdown?.setAttribute('aria-expanded', 'false'); + } + + private getClearButton(): HTMLButtonElement | null { + const modal = this.core.getModalElement(); + return modal?.querySelector('.tp-ui-clear-btn') || null; + } + + private getFromTab(): HTMLButtonElement | null { + const modal = this.core.getModalElement(); + return modal?.querySelector('.tp-ui-range-from') || null; + } + + private getToTab(): HTMLButtonElement | null { + const modal = this.core.getModalElement(); + return modal?.querySelector('.tp-ui-range-to') || null; + } + + private getFromTimeDisplay(): HTMLElement | null { + const modal = this.core.getModalElement(); + return modal?.querySelector('.tp-ui-range-from-time') || null; + } + + private getToTimeDisplay(): HTMLElement | null { + const modal = this.core.getModalElement(); + return modal?.querySelector('.tp-ui-range-to-time') || null; + } + + private getTimezoneDropdown(): HTMLElement | null { + const modal = this.core.getModalElement(); + return modal?.querySelector('.tp-ui-timezone-dropdown') || null; + } + + private getTimezoneSelected(): HTMLElement | null { + const modal = this.core.getModalElement(); + return modal?.querySelector('.tp-ui-timezone-selected') || null; + } + + destroy(): void { + this.cleanupHandlers.forEach((cleanup) => cleanup()); + this.cleanupHandlers = []; + } +} + diff --git a/app/src/managers/index.ts b/app/src/managers/index.ts index 55c1ee1..ecadb8c 100644 --- a/app/src/managers/index.ts +++ b/app/src/managers/index.ts @@ -8,3 +8,4 @@ export { default as ClockManager } from './ClockManager'; export { TimezoneManager } from './plugins/timezone'; export { RangeManager } from './plugins/range'; +export { WheelManager } from './plugins/wheel'; diff --git a/app/src/managers/plugins/wheel/ColumnDragState.ts b/app/src/managers/plugins/wheel/ColumnDragState.ts new file mode 100644 index 0000000..a63276b --- /dev/null +++ b/app/src/managers/plugins/wheel/ColumnDragState.ts @@ -0,0 +1,162 @@ +import type { WheelColumnType } from './WheelTypes'; + +const SNAP_ANIMATION_DURATION_MS = 180; +const SNAP_DISTANCE_THRESHOLD = 0.5; +const WHEEL_SNAP_DEBOUNCE_MS = 120; +const VELOCITY_SAMPLE_COUNT = 5; +const VELOCITY_SAMPLE_MAX_AGE_MS = 100; + +interface VelocitySample { + readonly time: number; + readonly y: number; +} + +export class ColumnDragState { + readonly element: HTMLDivElement; + readonly columnType: WheelColumnType; + + private _lastY: number = 0; + private _isDragging: boolean = false; + private _pointerId: number = -1; + private _momentumRaf: number | null = null; + private velocitySamples: VelocitySample[] = []; + private snapTimeout: ReturnType<typeof setTimeout> | null = null; + private snapAnimationRaf: number | null = null; + private abortController: AbortController | null = null; + + constructor(element: HTMLDivElement, columnType: WheelColumnType) { + this.element = element; + this.columnType = columnType; + this.abortController = new AbortController(); + } + + get lastY(): number { + return this._lastY; + } + + get isDragging(): boolean { + return this._isDragging; + } + + get pointerId(): number { + return this._pointerId; + } + + get signal(): AbortSignal { + return this.abortController ? this.abortController.signal : new AbortController().signal; + } + + startDrag(clientY: number, pointerId: number): void { + this.stopMomentum(); + this._isDragging = true; + this._lastY = clientY; + this._pointerId = pointerId; + this.velocitySamples = [{ time: performance.now(), y: clientY }]; + } + + updateLastY(clientY: number): void { + this._lastY = clientY; + } + + addVelocitySample(clientY: number): void { + this.velocitySamples.push({ time: performance.now(), y: clientY }); + if (this.velocitySamples.length > VELOCITY_SAMPLE_COUNT) { + this.velocitySamples.shift(); + } + } + + computeReleaseVelocity(): number { + const now = performance.now(); + const recentSamples = this.velocitySamples.filter((s) => now - s.time < VELOCITY_SAMPLE_MAX_AGE_MS); + + if (recentSamples.length < 2) return 0; + + const first = recentSamples[0]; + const last = recentSamples[recentSamples.length - 1]; + const dt = last.time - first.time; + + if (dt <= 0) return 0; + + return (first.y - last.y) / dt; + } + + endDrag(): void { + this._isDragging = false; + this._pointerId = -1; + this.velocitySamples = []; + } + + setMomentumRaf(handle: number | null): void { + this._momentumRaf = handle; + } + + hasMomentum(): boolean { + return this._momentumRaf !== null; + } + + stopMomentum(): void { + if (this._momentumRaf !== null) { + cancelAnimationFrame(this._momentumRaf); + this._momentumRaf = null; + } + if (this.snapAnimationRaf !== null) { + cancelAnimationFrame(this.snapAnimationRaf); + this.snapAnimationRaf = null; + } + } + + animateToOffset(target: number, onComplete: () => void): void { + this.stopMomentum(); + + const startOffset = this.element.scrollTop; + const distance = target - startOffset; + const startTime = performance.now(); + + if (Math.abs(distance) < SNAP_DISTANCE_THRESHOLD) { + this.element.scrollTop = target; + onComplete(); + return; + } + + const step = (): void => { + const elapsed = performance.now() - startTime; + const progress = Math.min(elapsed / SNAP_ANIMATION_DURATION_MS, 1); + const eased = 1 - Math.pow(1 - progress, 3); + + this.element.scrollTop = startOffset + distance * eased; + + if (progress < 1) { + this.snapAnimationRaf = requestAnimationFrame(step); + } else { + this.element.scrollTop = target; + this.snapAnimationRaf = null; + onComplete(); + } + }; + + this.snapAnimationRaf = requestAnimationFrame(step); + } + + scheduleSnapAfterWheel(callback: () => void): void { + if (this.snapTimeout !== null) { + clearTimeout(this.snapTimeout); + } + this.snapTimeout = setTimeout(() => { + this.snapTimeout = null; + callback(); + }, WHEEL_SNAP_DEBOUNCE_MS); + } + + destroy(): void { + this.stopMomentum(); + if (this.snapTimeout !== null) { + clearTimeout(this.snapTimeout); + this.snapTimeout = null; + } + if (this.abortController) { + this.abortController.abort(); + this.abortController = null; + } + } +} + diff --git a/app/src/managers/plugins/wheel/WheelDragHandler.ts b/app/src/managers/plugins/wheel/WheelDragHandler.ts new file mode 100644 index 0000000..307f38f --- /dev/null +++ b/app/src/managers/plugins/wheel/WheelDragHandler.ts @@ -0,0 +1,295 @@ +import type { WheelRenderer } from './WheelRenderer'; +import type { WheelColumnType } from './WheelTypes'; +import { ColumnDragState } from './ColumnDragState'; +import { isDocument } from '../../../utils/node'; + +const MOMENTUM_FRICTION = 0.92; +const MOMENTUM_MIN_VELOCITY = 0.3; +const MOMENTUM_MAX_VELOCITY = 8; +const WHEEL_ITEM_SNAP_THRESHOLD = 30; + +type SnapCallback = (columnType: WheelColumnType) => void; +type VisualUpdateCallback = (columnType: WheelColumnType) => void; + +export class WheelDragHandler { + private readonly renderer: WheelRenderer; + private readonly columnStates: Map<WheelColumnType, ColumnDragState> = new Map(); + private onSnap: SnapCallback | null = null; + private onVisualUpdate: VisualUpdateCallback | null = null; + private onScrollStart: ((columnType: WheelColumnType) => void) | null = null; + + private activeDragColumn: WheelColumnType | null = null; + private visualUpdateRaf: number | null = null; + private pendingVisualColumns: Set<WheelColumnType> = new Set(); + private wheelAccumulator: Map<WheelColumnType, number> = new Map(); + private readonly pointerMoveHandler: (e: PointerEvent) => void; + private readonly pointerUpHandler: (e: PointerEvent) => void; + private documentListenerController: AbortController | null = null; + + constructor(renderer: WheelRenderer) { + this.renderer = renderer; + this.pointerMoveHandler = (e: PointerEvent): void => this.handlePointerMove(e); + this.pointerUpHandler = (e: PointerEvent): void => this.handlePointerUp(e); + } + + setSnapCallback(callback: SnapCallback): void { + this.onSnap = callback; + } + + setVisualUpdateCallback(callback: VisualUpdateCallback): void { + this.onVisualUpdate = callback; + } + + setScrollStartCallback(callback: ((columnType: WheelColumnType) => void) | null): void { + this.onScrollStart = callback; + } + + init(): void { + if (!isDocument()) return; + + const columnTypes: readonly WheelColumnType[] = ['hours', 'minutes', 'ampm']; + columnTypes.forEach((type) => { + const col = this.renderer.getColumnElement(type); + if (!col) return; + + const state = new ColumnDragState(col, type); + this.columnStates.set(type, state); + + col.addEventListener( + 'pointerdown', + (e: PointerEvent): void => { + this.handlePointerDown(type, e); + }, + { signal: state.signal }, + ); + + col.addEventListener( + 'wheel', + (e: WheelEvent): void => { + this.handleWheel(type, e); + }, + { passive: false, signal: state.signal }, + ); + }); + + this.documentListenerController = new AbortController(); + document.addEventListener('pointermove', this.pointerMoveHandler, { + signal: this.documentListenerController.signal, + }); + document.addEventListener('pointerup', this.pointerUpHandler, { + signal: this.documentListenerController.signal, + }); + } + + getScrollOffset(columnType: WheelColumnType): number { + const col = this.renderer.getColumnElement(columnType); + return col ? col.scrollTop : 0; + } + + setScrollOffset(columnType: WheelColumnType, offset: number): void { + const state = this.columnStates.get(columnType); + if (state) { + state.stopMomentum(); + } + + const col = this.renderer.getColumnElement(columnType); + if (col) { + col.scrollTop = offset; + } + } + + getMaxOffset(columnType: WheelColumnType): number { + const itemHeight = this.renderer.getItemHeight(); + if (itemHeight <= 0) return 0; + + const itemCount = this.renderer.getItemCount(columnType); + return Math.max(0, (itemCount - 1) * itemHeight); + } + + destroy(): void { + if (this.visualUpdateRaf !== null) { + cancelAnimationFrame(this.visualUpdateRaf); + this.visualUpdateRaf = null; + } + this.pendingVisualColumns.clear(); + this.wheelAccumulator.clear(); + this.activeDragColumn = null; + + if (this.documentListenerController) { + this.documentListenerController.abort(); + this.documentListenerController = null; + } + + this.columnStates.forEach((state) => state.destroy()); + this.columnStates.clear(); + this.onSnap = null; + this.onVisualUpdate = null; + this.onScrollStart = null; + } + + private handlePointerDown(columnType: WheelColumnType, e: PointerEvent): void { + const state = this.columnStates.get(columnType); + if (!state) return; + + e.preventDefault(); + this.activeDragColumn = columnType; + state.startDrag(e.clientY, e.pointerId); + state.element.classList.add('is-dragging'); + state.element.setPointerCapture(e.pointerId); + + if (this.onScrollStart) { + this.onScrollStart(columnType); + } + } + + private handlePointerMove(e: PointerEvent): void { + if (this.activeDragColumn === null) return; + + const state = this.columnStates.get(this.activeDragColumn); + if (!state || !state.isDragging || state.pointerId !== e.pointerId) return; + + const delta = state.lastY - e.clientY; + state.addVelocitySample(e.clientY); + + const maxOffset = this.getMaxOffset(state.columnType); + const newOffset = clamp(state.element.scrollTop + delta, 0, maxOffset); + + state.element.scrollTop = newOffset; + state.updateLastY(e.clientY); + + this.scheduleVisualUpdate(state.columnType); + } + + private handlePointerUp(e: PointerEvent): void { + if (this.activeDragColumn === null) return; + + const state = this.columnStates.get(this.activeDragColumn); + if (!state || !state.isDragging || state.pointerId !== e.pointerId) return; + + state.element.classList.remove('is-dragging'); + state.element.releasePointerCapture(e.pointerId); + this.activeDragColumn = null; + + const velocity = state.computeReleaseVelocity(); + state.endDrag(); + + if (Math.abs(velocity) > MOMENTUM_MIN_VELOCITY) { + this.startMomentum(state, velocity); + } else { + this.snapColumn(state.columnType); + } + } + + private handleWheel(columnType: WheelColumnType, e: WheelEvent): void { + e.preventDefault(); + + const state = this.columnStates.get(columnType); + if (!state) return; + + const wasScrolling = state.hasMomentum(); + state.stopMomentum(); + + if (!wasScrolling && this.onScrollStart) { + this.onScrollStart(columnType); + } + + const itemHeight = this.renderer.getItemHeight(); + if (itemHeight <= 0) return; + + const accumulated = (this.wheelAccumulator.get(columnType) ?? 0) + e.deltaY; + this.wheelAccumulator.set(columnType, accumulated); + + if (Math.abs(accumulated) >= WHEEL_ITEM_SNAP_THRESHOLD) { + const direction = accumulated > 0 ? 1 : -1; + this.wheelAccumulator.set(columnType, 0); + + const maxOffset = this.getMaxOffset(columnType); + const currentIndex = Math.round(state.element.scrollTop / itemHeight); + const nextIndex = currentIndex + direction; + const targetOffset = clamp(nextIndex * itemHeight, 0, maxOffset); + + state.animateToOffset(targetOffset, (): void => { + this.emitVisualUpdate(columnType); + if (this.onSnap) { + this.onSnap(columnType); + } + }); + + this.scheduleVisualUpdate(columnType); + } + } + + private startMomentum(state: ColumnDragState, initialVelocity: number): void { + let velocity = clamp(initialVelocity, -MOMENTUM_MAX_VELOCITY, MOMENTUM_MAX_VELOCITY); + let lastTime = performance.now(); + const maxOffset = this.getMaxOffset(state.columnType); + + const step = (): void => { + const now = performance.now(); + const dt = now - lastTime; + lastTime = now; + + velocity *= MOMENTUM_FRICTION; + const displacement = velocity * dt; + const currentTop = state.element.scrollTop; + const newOffset = clamp(currentTop + displacement, 0, maxOffset); + + state.element.scrollTop = newOffset; + this.emitVisualUpdate(state.columnType); + + if (Math.abs(velocity) < MOMENTUM_MIN_VELOCITY || newOffset <= 0 || newOffset >= maxOffset) { + state.setMomentumRaf(null); + this.snapColumn(state.columnType); + return; + } + + state.setMomentumRaf(requestAnimationFrame(step)); + }; + + state.setMomentumRaf(requestAnimationFrame(step)); + } + + private snapColumn(columnType: WheelColumnType): void { + const state = this.columnStates.get(columnType); + if (!state) return; + + const itemHeight = this.renderer.getItemHeight(); + if (itemHeight <= 0) return; + + const maxOffset = this.getMaxOffset(columnType); + const snappedIndex = Math.round(state.element.scrollTop / itemHeight); + const snappedOffset = clamp(snappedIndex * itemHeight, 0, maxOffset); + + state.animateToOffset(snappedOffset, (): void => { + this.emitVisualUpdate(columnType); + if (this.onSnap) { + this.onSnap(columnType); + } + }); + } + + private scheduleVisualUpdate(columnType: WheelColumnType): void { + this.pendingVisualColumns.add(columnType); + + if (this.visualUpdateRaf !== null) return; + + this.visualUpdateRaf = requestAnimationFrame((): void => { + this.visualUpdateRaf = null; + this.pendingVisualColumns.forEach((col) => { + this.emitVisualUpdate(col); + }); + this.pendingVisualColumns.clear(); + }); + } + + private emitVisualUpdate(columnType: WheelColumnType): void { + if (this.onVisualUpdate) { + this.onVisualUpdate(columnType); + } + } +} + +function clamp(value: number, min: number, max: number): number { + return Math.max(min, Math.min(max, value)); +} + diff --git a/app/src/managers/plugins/wheel/WheelEventHandler.ts b/app/src/managers/plugins/wheel/WheelEventHandler.ts new file mode 100644 index 0000000..1ff0325 --- /dev/null +++ b/app/src/managers/plugins/wheel/WheelEventHandler.ts @@ -0,0 +1,198 @@ +import type { CoreState } from '../../../timepicker/CoreState'; +import type { EventEmitter, TimepickerEventMap } from '../../../utils/EventEmitter'; +import type { WheelScrollHandler } from './WheelScrollHandler'; +import type { WheelColumnType } from './WheelTypes'; +import { isDocument } from '../../../utils/node'; + +const ARROW_UP = 'ArrowUp'; +const ARROW_DOWN = 'ArrowDown'; +const NEUTRAL_HOUR = '12'; +const NEUTRAL_MINUTES = '00'; + +export class WheelEventHandler { + private emitter: EventEmitter<TimepickerEventMap>; + private scrollHandler: WheelScrollHandler; + private core: CoreState; + private keydownListeners: Map<WheelColumnType, (e: KeyboardEvent) => void> = new Map(); + private clearHandler: ((data: { previousValue: string | null }) => void) | null = null; + private previousValues: Map<WheelColumnType, string | null> = new Map(); + private scrollStartHandler: ((columnType: WheelColumnType) => void) | null = null; + + constructor(emitter: EventEmitter<TimepickerEventMap>, scrollHandler: WheelScrollHandler, core: CoreState) { + this.emitter = emitter; + this.scrollHandler = scrollHandler; + this.core = core; + } + + init(): void { + this.captureCurrentValues(); + + this.scrollHandler.setScrollEndCallback((columnType: WheelColumnType, value: string): void => { + this.handleColumnScrollEnd(columnType, value); + }); + + this.scrollStartHandler = (columnType: WheelColumnType): void => { + this.emitter.emit('wheel:scroll:start', { column: columnType }); + }; + this.scrollHandler.setScrollStartCallback(this.scrollStartHandler); + + this.attachKeyboardListeners(); + this.attachClearListener(); + } + + destroy(): void { + this.scrollHandler.setScrollEndCallback((): void => {}); + this.scrollHandler.setScrollStartCallback(null); + this.removeKeyboardListeners(); + this.removeClearListener(); + this.previousValues.clear(); + this.scrollStartHandler = null; + } + + private handleColumnScrollEnd(columnType: WheelColumnType, value: string): void { + const selection = this.scrollHandler.getCurrentSelection(); + const previousValue = this.previousValues.get(columnType) ?? null; + + this.emitter.emit('wheel:scroll:end', { + column: columnType, + value, + previousValue, + }); + + this.previousValues.set(columnType, value); + + switch (columnType) { + case 'hours': + this.syncHourInput(value); + this.emitter.emit('select:hour', { hour: value }); + break; + case 'minutes': + this.syncMinuteInput(value); + this.emitter.emit('select:minute', { minutes: value }); + break; + } + + this.emitter.emit('update', { + hour: selection.hour, + minutes: selection.minute, + type: selection.ampm ?? undefined, + }); + } + + private syncHourInput(value: string): void { + const hourInput = this.core.getHour(); + if (hourInput) { + hourInput.value = value; + hourInput.setAttribute('aria-valuenow', value); + } + this.core.setDegreesHours(parseInt(value, 10) * 30); + } + + private syncMinuteInput(value: string): void { + const minuteInput = this.core.getMinutes(); + if (minuteInput) { + minuteInput.value = value; + minuteInput.setAttribute('aria-valuenow', value); + } + this.core.setDegreesMinutes(parseInt(value, 10) * 6); + } + + private attachKeyboardListeners(): void { + if (!isDocument()) return; + + const columnTypes: readonly WheelColumnType[] = ['hours', 'minutes']; + + columnTypes.forEach((type) => { + const col = this.scrollHandler.getCurrentSelection() ? this.getColumnFromRenderer(type) : null; + + if (!col) return; + + const listener = (e: KeyboardEvent): void => { + if (e.key === ARROW_UP || e.key === ARROW_DOWN) { + e.preventDefault(); + this.handleArrowKey(type, e.key); + } + }; + + col.addEventListener('keydown', listener); + this.keydownListeners.set(type, listener); + }); + } + + private getColumnFromRenderer(type: WheelColumnType): HTMLDivElement | null { + if (!isDocument()) return null; + const modal = this.core.getModalElement(); + if (!modal) return null; + + const selectorMap: Record<WheelColumnType, string> = { + hours: '.tp-ui-wheel-hours', + minutes: '.tp-ui-wheel-minutes', + ampm: '.tp-ui-wheel-ampm', + }; + + return modal.querySelector<HTMLDivElement>(selectorMap[type]); + } + + private handleArrowKey(columnType: WheelColumnType, key: string): void { + const currentValue = this.scrollHandler.getSelectedValue(columnType); + if (currentValue === null) return; + + const col = this.getColumnFromRenderer(columnType); + if (!col) return; + + const items = col.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + let currentIndex = -1; + for (let i = 0; i < items.length; i++) { + if (items[i].getAttribute('data-value') === currentValue) { + currentIndex = i; + break; + } + } + if (currentIndex < 0) return; + + const direction = key === ARROW_UP ? -1 : 1; + const nextIndex = currentIndex + direction; + if (nextIndex < 0 || nextIndex >= items.length) return; + + const nextValue = items[nextIndex].getAttribute('data-value'); + if (nextValue !== null) { + this.scrollHandler.scrollToValue(columnType, nextValue); + this.handleColumnScrollEnd(columnType, nextValue); + } + } + + private removeKeyboardListeners(): void { + this.keydownListeners.forEach((listener, type) => { + const col = this.getColumnFromRenderer(type); + if (col) { + col.removeEventListener('keydown', listener); + } + }); + this.keydownListeners.clear(); + } + + private attachClearListener(): void { + this.clearHandler = (): void => { + this.scrollHandler.scrollToValue('hours', NEUTRAL_HOUR); + this.scrollHandler.scrollToValue('minutes', NEUTRAL_MINUTES); + }; + + this.emitter.on('clear', this.clearHandler); + } + + private removeClearListener(): void { + if (this.clearHandler) { + this.emitter.off('clear', this.clearHandler); + this.clearHandler = null; + } + } + + private captureCurrentValues(): void { + const selection = this.scrollHandler.getCurrentSelection(); + this.previousValues.set('hours', selection.hour); + this.previousValues.set('minutes', selection.minute); + if (selection.ampm !== null) { + this.previousValues.set('ampm', selection.ampm); + } + } +} diff --git a/app/src/managers/plugins/wheel/WheelManager.ts b/app/src/managers/plugins/wheel/WheelManager.ts new file mode 100644 index 0000000..f2bb690 --- /dev/null +++ b/app/src/managers/plugins/wheel/WheelManager.ts @@ -0,0 +1,95 @@ +import type { CoreState } from '../../../timepicker/CoreState'; +import type { EventEmitter, TimepickerEventMap } from '../../../utils/EventEmitter'; +import { WheelRenderer } from './WheelRenderer'; +import { WheelScrollHandler } from './WheelScrollHandler'; +import { WheelEventHandler } from './WheelEventHandler'; +import { WheelDragHandler } from './WheelDragHandler'; + +export default class WheelManager { + private readonly renderer: WheelRenderer; + private readonly dragHandler: WheelDragHandler; + private readonly scrollHandler: WheelScrollHandler; + private readonly eventHandler: WheelEventHandler; + private readonly core: CoreState; + private readonly emitter: EventEmitter<TimepickerEventMap>; + private amPmHandler: (() => void) | null = null; + + constructor(core: CoreState, emitter: EventEmitter<TimepickerEventMap>) { + this.core = core; + this.emitter = emitter; + this.renderer = new WheelRenderer(core, emitter); + this.dragHandler = new WheelDragHandler(this.renderer); + this.scrollHandler = new WheelScrollHandler(this.renderer, core); + this.scrollHandler.setDragHandler(this.dragHandler); + this.eventHandler = new WheelEventHandler(emitter, this.scrollHandler, core); + } + + init(): void { + this.renderer.init(); + this.dragHandler.init(); + this.scrollHandler.init(); + this.eventHandler.init(); + + this.dragHandler.setVisualUpdateCallback((columnType): void => { + this.scrollHandler.updateVisualClasses(columnType); + }); + + this.listenForAmPmChanges(); + this.deferInitialSync(); + } + + scrollToValue(hour: string, minute: string, _type?: string): void { + this.scrollHandler.scrollToValue('hours', hour.padStart(2, '0')); + this.scrollHandler.scrollToValue('minutes', minute.padStart(2, '0')); + } + + updateDisabledItems(): void { + this.renderer.updateDisabledItems(); + } + + destroy(): void { + if (this.amPmHandler) { + this.emitter.off('select:am', this.amPmHandler); + this.emitter.off('select:pm', this.amPmHandler); + this.amPmHandler = null; + } + this.eventHandler.destroy(); + this.scrollHandler.destroy(); + this.dragHandler.destroy(); + this.renderer.destroy(); + } + + private deferInitialSync(): void { + if (typeof requestAnimationFrame !== 'undefined') { + requestAnimationFrame(() => { + this.syncInitialValues(); + }); + } else { + this.syncInitialValues(); + } + } + + private syncInitialValues(): void { + const hourInput = this.core.getHour(); + const minutesInput = this.core.getMinutes(); + + if (hourInput?.value) { + this.scrollHandler.scrollToValue('hours', hourInput.value.padStart(2, '0')); + } + + if (minutesInput?.value) { + this.scrollHandler.scrollToValue('minutes', minutesInput.value.padStart(2, '0')); + } + } + + private listenForAmPmChanges(): void { + if (this.core.options.clock.type === '24h') return; + + this.amPmHandler = (): void => { + this.renderer.updateDisabledItems(); + }; + + this.emitter.on('select:am', this.amPmHandler); + this.emitter.on('select:pm', this.amPmHandler); + } +} diff --git a/app/src/managers/plugins/wheel/WheelRenderer.ts b/app/src/managers/plugins/wheel/WheelRenderer.ts new file mode 100644 index 0000000..655b7ea --- /dev/null +++ b/app/src/managers/plugins/wheel/WheelRenderer.ts @@ -0,0 +1,113 @@ +import type { CoreState } from '../../../timepicker/CoreState'; +import type { EventEmitter, TimepickerEventMap } from '../../../utils/EventEmitter'; +import { isDocument } from '../../../utils/node'; +import type { WheelColumnType } from './WheelTypes'; + +const COLUMN_SELECTORS: Record<WheelColumnType, string> = { + hours: '.tp-ui-wheel-hours', + minutes: '.tp-ui-wheel-minutes', + ampm: '.tp-ui-wheel-ampm', +}; + +export class WheelRenderer { + private core: CoreState; + private columns: Map<WheelColumnType, HTMLDivElement> = new Map(); + private cachedItemHeight: number | null = null; + private cachedItems: Map<WheelColumnType, NodeListOf<HTMLDivElement>> = new Map(); + + constructor(core: CoreState, _emitter: EventEmitter<TimepickerEventMap>) { + this.core = core; + } + + init(): void { + if (!isDocument()) return; + + const modal = this.core.getModalElement(); + if (!modal) return; + + const columnTypes: readonly WheelColumnType[] = ['hours', 'minutes', 'ampm']; + columnTypes.forEach((type) => { + const el = modal.querySelector<HTMLDivElement>(COLUMN_SELECTORS[type]); + if (el) { + this.columns.set(type, el); + } + }); + + this.updateDisabledItems(); + } + + updateDisabledItems(): void { + const disabled = this.core.disabledTime; + if (!disabled?.value) return; + + const hoursColumn = this.columns.get('hours'); + const minutesColumn = this.columns.get('minutes'); + + if (hoursColumn && disabled.value.hours) { + const disabledSet = new Set(disabled.value.hours.map(String)); + const items = hoursColumn.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + items.forEach((item) => { + const val = item.getAttribute('data-value'); + if (val !== null) { + const numVal = String(parseInt(val, 10)); + item.classList.toggle('is-disabled', disabledSet.has(numVal) || disabledSet.has(val)); + } + }); + } + + if (minutesColumn && disabled.value.minutes) { + const disabledSet = new Set(disabled.value.minutes.map(String)); + const items = minutesColumn.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + items.forEach((item) => { + const val = item.getAttribute('data-value'); + if (val !== null) { + const numVal = String(parseInt(val, 10)); + item.classList.toggle('is-disabled', disabledSet.has(numVal) || disabledSet.has(val)); + } + }); + } + } + + getColumnElement(type: WheelColumnType): HTMLDivElement | null { + return this.columns.get(type) ?? null; + } + + getItems(type: WheelColumnType): NodeListOf<HTMLDivElement> | null { + const cached = this.cachedItems.get(type); + if (cached) return cached; + + const col = this.columns.get(type); + if (!col) return null; + + const items = col.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + this.cachedItems.set(type, items); + return items; + } + + getItemCount(type: WheelColumnType): number { + const items = this.getItems(type); + return items ? items.length : 0; + } + + getItemHeight(): number { + if (this.cachedItemHeight !== null) return this.cachedItemHeight; + + const hoursCol = this.columns.get('hours'); + if (!hoursCol) return 0; + + const firstItem = hoursCol.querySelector<HTMLDivElement>('.tp-ui-wheel-item'); + if (!firstItem) return 0; + + const height = firstItem.getBoundingClientRect().height; + if (height > 0) { + this.cachedItemHeight = height; + } + return height; + } + + destroy(): void { + this.columns.clear(); + this.cachedItems.clear(); + this.cachedItemHeight = null; + } +} diff --git a/app/src/managers/plugins/wheel/WheelScrollHandler.ts b/app/src/managers/plugins/wheel/WheelScrollHandler.ts new file mode 100644 index 0000000..105ae49 --- /dev/null +++ b/app/src/managers/plugins/wheel/WheelScrollHandler.ts @@ -0,0 +1,193 @@ +import type { CoreState } from '../../../timepicker/CoreState'; +import type { WheelColumnType, WheelSelectionState, WheelScrollEndCallback } from './WheelTypes'; +import type { WheelRenderer } from './WheelRenderer'; +import type { WheelDragHandler } from './WheelDragHandler'; + +export class WheelScrollHandler { + private renderer: WheelRenderer; + private core: CoreState; + private dragHandler: WheelDragHandler | null = null; + private onScrollEnd: WheelScrollEndCallback | null = null; + private onScrollStart: ((columnType: WheelColumnType) => void) | null = null; + + constructor(renderer: WheelRenderer, core: CoreState) { + this.renderer = renderer; + this.core = core; + } + + setDragHandler(dragHandler: WheelDragHandler): void { + this.dragHandler = dragHandler; + } + + init(): void { + if (this.dragHandler) { + this.dragHandler.setSnapCallback((columnType: WheelColumnType): void => { + this.onColumnSnapped(columnType); + }); + this.dragHandler.setScrollStartCallback((columnType: WheelColumnType): void => { + this.emitScrollStart(columnType); + }); + } + } + + setScrollEndCallback(callback: WheelScrollEndCallback): void { + this.onScrollEnd = callback; + } + + setScrollStartCallback(callback: ((columnType: WheelColumnType) => void) | null): void { + this.onScrollStart = callback; + } + + scrollToValue(columnType: WheelColumnType, value: string): void { + const col = this.renderer.getColumnElement(columnType); + if (!col || !this.dragHandler) return; + + const itemHeight = this.renderer.getItemHeight(); + if (itemHeight <= 0) return; + + const items = this.renderer.getItems(columnType); + if (!items) return; + + let targetIndex = -1; + for (let i = 0; i < items.length; i++) { + if (items[i].getAttribute('data-value') === value) { + targetIndex = i; + break; + } + } + + if (targetIndex < 0) return; + + const offset = targetIndex * itemHeight; + this.dragHandler.setScrollOffset(columnType, offset); + this.applyVisualClassesForIndex(columnType, targetIndex); + } + + getSelectedValue(columnType: WheelColumnType): string | null { + if (!this.dragHandler) return null; + + const itemHeight = this.renderer.getItemHeight(); + if (itemHeight <= 0) return null; + + const offset = this.dragHandler.getScrollOffset(columnType); + const index = Math.round(offset / itemHeight); + const items = this.renderer.getItems(columnType); + + if (!items || index < 0 || index >= items.length) return null; + + return items[index].getAttribute('data-value'); + } + + getCurrentSelection(): WheelSelectionState { + const hour = this.getSelectedValue('hours') ?? '12'; + const minute = this.getSelectedValue('minutes') ?? '00'; + const ampm = this.core.options.clock.type !== '24h' ? this.getSelectedValue('ampm') : null; + + return { hour, minute, ampm }; + } + + destroy(): void { + this.onScrollEnd = null; + this.onScrollStart = null; + this.dragHandler = null; + } + + private onColumnSnapped(columnType: WheelColumnType): void { + const value = this.getSelectedValue(columnType); + if (value === null) return; + + if (this.isValueDisabled(columnType, value)) { + this.scrollToNextValid(columnType, value); + return; + } + + if (this.onScrollEnd) { + this.onScrollEnd(columnType, value); + } + } + + emitScrollStart(columnType: WheelColumnType): void { + if (this.onScrollStart) { + this.onScrollStart(columnType); + } + } + + updateVisualClasses(columnType: WheelColumnType): void { + if (!this.dragHandler) return; + + const itemHeight = this.renderer.getItemHeight(); + if (itemHeight <= 0) return; + + const offset = this.dragHandler.getScrollOffset(columnType); + const centerIndex = Math.round(offset / itemHeight); + this.applyVisualClassesForIndex(columnType, centerIndex); + } + + private applyVisualClassesForIndex(columnType: WheelColumnType, centerIndex: number): void { + const items = this.renderer.getItems(columnType); + if (!items) return; + + items.forEach((item, i) => { + const distance = Math.abs(i - centerIndex); + item.classList.toggle('is-center', distance === 0); + item.classList.toggle('is-near', distance === 1); + }); + + const col = this.renderer.getColumnElement(columnType); + if (col) { + const wrapper = col.parentElement; + if (wrapper) { + wrapper.classList.toggle('at-start', centerIndex <= 0); + wrapper.classList.toggle('at-end', centerIndex >= items.length - 1); + } + } + } + + private isValueDisabled(columnType: WheelColumnType, value: string): boolean { + const items = this.renderer.getItems(columnType); + if (!items) return false; + for (let i = 0; i < items.length; i++) { + if (items[i].getAttribute('data-value') === value) { + return items[i].classList.contains('is-disabled'); + } + } + return false; + } + + private scrollToNextValid(columnType: WheelColumnType, currentValue: string): void { + const items = this.renderer.getItems(columnType); + if (!items) return; + let currentIndex = -1; + + for (let i = 0; i < items.length; i++) { + if (items[i].getAttribute('data-value') === currentValue) { + currentIndex = i; + break; + } + } + + if (currentIndex < 0) return; + + const maxOffset = items.length; + for (let offset = 1; offset <= maxOffset; offset++) { + const nextIndex = currentIndex + offset; + const prevIndex = currentIndex - offset; + + if (nextIndex < items.length && !items[nextIndex].classList.contains('is-disabled')) { + const nextValue = items[nextIndex].getAttribute('data-value'); + if (nextValue !== null) { + this.scrollToValue(columnType, nextValue); + return; + } + } + + if (prevIndex >= 0 && !items[prevIndex].classList.contains('is-disabled')) { + const prevValue = items[prevIndex].getAttribute('data-value'); + if (prevValue !== null) { + this.scrollToValue(columnType, prevValue); + return; + } + } + } + } +} diff --git a/app/src/managers/plugins/wheel/WheelTypes.ts b/app/src/managers/plugins/wheel/WheelTypes.ts new file mode 100644 index 0000000..16d49d5 --- /dev/null +++ b/app/src/managers/plugins/wheel/WheelTypes.ts @@ -0,0 +1,16 @@ +export interface WheelColumnConfig { + readonly type: 'hours' | 'minutes' | 'ampm'; + readonly values: readonly string[]; +} + +export interface WheelSelectionState { + readonly hour: string; + readonly minute: string; + readonly ampm: string | null; +} + +export interface WheelScrollEndCallback { + (columnType: 'hours' | 'minutes' | 'ampm', value: string): void; +} + +export type WheelColumnType = 'hours' | 'minutes' | 'ampm'; diff --git a/app/src/managers/plugins/wheel/index.ts b/app/src/managers/plugins/wheel/index.ts new file mode 100644 index 0000000..7f52ce1 --- /dev/null +++ b/app/src/managers/plugins/wheel/index.ts @@ -0,0 +1,8 @@ +export { default as WheelManager } from './WheelManager'; +export { WheelRenderer } from './WheelRenderer'; +export { WheelScrollHandler } from './WheelScrollHandler'; +export { WheelEventHandler } from './WheelEventHandler'; +export { WheelDragHandler } from './WheelDragHandler'; +export { ColumnDragState } from './ColumnDragState'; +export * from './WheelTypes'; + diff --git a/app/src/plugins/wheel.d.ts b/app/src/plugins/wheel.d.ts new file mode 100644 index 0000000..a871a46 --- /dev/null +++ b/app/src/plugins/wheel.d.ts @@ -0,0 +1,20 @@ +interface PluginManager { + init(): void; + destroy(): void; +} + +interface PluginDefinition { + name: string; + factory: (core: never, emitter: never) => PluginManager; + optionsExtender?: (options: Record<string, unknown>) => void; +} + +export declare class WheelManager implements PluginManager { + init(): void; + destroy(): void; + scrollToValue(hour: string, minute: string, type?: string): void; + updateDisabledItems(): void; +} + +export declare const WheelPlugin: PluginDefinition; + diff --git a/app/src/plugins/wheel.ts b/app/src/plugins/wheel.ts new file mode 100644 index 0000000..ee1bc7d --- /dev/null +++ b/app/src/plugins/wheel.ts @@ -0,0 +1,10 @@ +import { WheelManager } from '../managers/plugins/wheel'; +import type { Plugin } from '../core/PluginRegistry'; + +export const WheelPlugin: Plugin = { + name: 'wheel', + factory: (core, emitter) => new WheelManager(core, emitter), +}; + +export { WheelManager }; + diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss index 5ba8b04..ed39d42 100644 --- a/app/src/styles/main.scss +++ b/app/src/styles/main.scss @@ -16,3 +16,4 @@ @use './partials/ripple'; @use './partials/timezone'; @use './partials/range'; +@use './partials/wheel'; diff --git a/app/src/styles/partials/_buttons.scss b/app/src/styles/partials/_buttons.scss index 44a0fd9..0a79cfd 100644 --- a/app/src/styles/partials/_buttons.scss +++ b/app/src/styles/partials/_buttons.scss @@ -1,13 +1,19 @@ @use '../variables.scss' as *; .tp-ui { + &-clear-btn { + margin-right: auto; + } + &-cancel-btn { margin-right: var(--tp-spacing-xs); } + &-clear-btn, &-cancel-btn, &-ok-btn, &-cancel-btn.mobile, + &-clear-btn.mobile, &-ok.btn-mobile { position: relative; color: var(--tp-primary); @@ -56,7 +62,8 @@ } &[disabled], - &[aria-disabled='true'] { + &[aria-disabled='true'], + &.disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; diff --git a/app/src/styles/partials/_time-inputs.scss b/app/src/styles/partials/_time-inputs.scss index a15b3e7..bfa0b86 100644 --- a/app/src/styles/partials/_time-inputs.scss +++ b/app/src/styles/partials/_time-inputs.scss @@ -82,7 +82,10 @@ background-color: var(--tp-input-bg); border-radius: var(--tp-radius-md); cursor: pointer; - transition: all 0.3s ease; + transition: + color var(--tp-duration-slow, 300ms) var(--tp-easing-ease, ease), + background-color var(--tp-duration-slow, 300ms) var(--tp-easing-ease, ease), + border-color var(--tp-duration-slow, 300ms) var(--tp-easing-ease, ease); outline: none; border: var(--tp-border-width-thick) solid transparent; padding: var(--tp-size-padding); diff --git a/app/src/styles/partials/_wheel.scss b/app/src/styles/partials/_wheel.scss new file mode 100644 index 0000000..a7783d0 --- /dev/null +++ b/app/src/styles/partials/_wheel.scss @@ -0,0 +1,152 @@ +/* Wheel picker styles — native-feeling scroll-spinner columns */ + +.tp-ui-wheel-container { + position: relative; + display: flex; + align-items: center; + justify-content: center; + gap: var(--tp-spacing-xs); + padding: var(--tp-spacing-lg) 0; + min-height: calc(var(--tp-wheel-item-height) * var(--tp-wheel-visible-items)); +} + +.tp-ui-wheel-column-wrapper { + position: relative; + width: var(--tp-wheel-column-width); + height: calc(var(--tp-wheel-item-height) * var(--tp-wheel-visible-items)); +} + +.tp-ui-wheel-column { + position: relative; + width: 100%; + height: 100%; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + cursor: grab; + touch-action: none; + + &::-webkit-scrollbar { + display: none; + } + + &:focus-visible { + outline: var(--tp-outline-width) solid var(--tp-outline, #6750a4); + outline-offset: var(--tp-outline-offset); + border-radius: var(--tp-radius-sm); + } +} + +.tp-ui-wheel-column.is-dragging { + cursor: grabbing; +} + +.tp-ui-wheel-item { + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + height: var(--tp-wheel-item-height); + font-size: var(--tp-wheel-font-size); + color: var(--tp-wheel-text-color); + user-select: none; + transition: color var(--tp-duration-fast, 100ms) var(--tp-easing-standard, ease-out); +} + +.tp-ui-wheel-item.is-center { + color: var(--tp-wheel-selected-color); + font-weight: 600; +} + +.tp-ui-wheel-item.is-disabled { + opacity: var(--tp-wheel-disabled-opacity); + pointer-events: none; +} + +.tp-ui-wheel-padding { + height: var(--tp-wheel-item-height); + pointer-events: none; +} + +.tp-ui-wheel-separator { + display: flex; + align-items: center; + justify-content: center; + width: var(--tp-wheel-separator-width); + font-size: var(--tp-wheel-selected-font-size); + font-weight: 600; + color: var(--tp-wheel-text-color); + user-select: none; +} + +.tp-ui-wheel-highlight { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: calc(100% - var(--tp-spacing-lg)); + height: var(--tp-wheel-item-height); + background: var(--tp-wheel-highlight-bg); + border: 1px solid var(--tp-wheel-highlight-border); + border-radius: var(--tp-wheel-highlight-radius); + pointer-events: none; + z-index: 0; +} + +.tp-ui-wheel-column-wrapper::before, +.tp-ui-wheel-column-wrapper::after { + content: ''; + position: absolute; + left: 0; + right: 0; + height: var(--tp-wheel-item-height); + pointer-events: none; + z-index: 2; + opacity: 0.6; + transition: opacity var(--tp-duration-fast, 150ms) var(--tp-easing-standard, ease-out); +} + +.tp-ui-wheel-column-wrapper::before { + top: 0; + background: linear-gradient(to bottom, var(--tp-bg, #fff) 10%, transparent 100%); +} + +.tp-ui-wheel-column-wrapper::after { + bottom: 0; + background: linear-gradient(to top, var(--tp-bg, #fff) 10%, transparent 100%); +} + +.tp-ui-wheel-column-wrapper.at-start::before { + opacity: 0; +} + +.tp-ui-wheel-column-wrapper.at-end::after { + opacity: 0; +} + +.tp-ui-wheel-mode .tp-ui-mobile-clock-wrapper { + min-height: auto; + + &.expanded { + @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + justify-content: center; + } + } +} + +@media (prefers-reduced-motion: reduce) { + .tp-ui-wheel-item { + transition: none; + } +} + +@media (forced-colors: active) { + .tp-ui-wheel-highlight { + border: var(--tp-border-width-thick) solid ButtonText; + } + + .tp-ui-wheel-item.is-center { + color: Highlight; + } +} diff --git a/app/src/styles/themes/theme-ai.scss b/app/src/styles/themes/theme-ai.scss index 0f8a6b5..45bc5a6 100644 --- a/app/src/styles/themes/theme-ai.scss +++ b/app/src/styles/themes/theme-ai.scss @@ -29,4 +29,9 @@ --tp-dropdown-option-bg: #ffffff; --tp-dropdown-option-text: #111827; + + --tp-wheel-highlight-bg: rgba(59, 130, 246, 0.1); + --tp-wheel-highlight-border: #d1d5db; + --tp-wheel-text-color: #111827; + --tp-wheel-selected-color: #3b82f6; } diff --git a/app/src/styles/themes/theme-crane-straight.scss b/app/src/styles/themes/theme-crane-straight.scss index 41f6bb1..7f77cce 100644 --- a/app/src/styles/themes/theme-crane-straight.scss +++ b/app/src/styles/themes/theme-crane-straight.scss @@ -31,4 +31,9 @@ --tp-dropdown-option-bg: #ffffff; --tp-dropdown-option-text: #000000; + + --tp-wheel-highlight-bg: rgba(247, 54, 62, 0.12); + --tp-wheel-highlight-border: rgba(255, 255, 255, 0.15); + --tp-wheel-text-color: #ffffff; + --tp-wheel-selected-color: #f7363e; } diff --git a/app/src/styles/themes/theme-crane.scss b/app/src/styles/themes/theme-crane.scss index 0c7f0e0..2a462c5 100644 --- a/app/src/styles/themes/theme-crane.scss +++ b/app/src/styles/themes/theme-crane.scss @@ -31,4 +31,9 @@ --tp-dropdown-option-bg: #ffffff; --tp-dropdown-option-text: #000000; + + --tp-wheel-highlight-bg: rgba(247, 54, 62, 0.12); + --tp-wheel-highlight-border: rgba(255, 255, 255, 0.15); + --tp-wheel-text-color: #ffffff; + --tp-wheel-selected-color: #f7363e; } diff --git a/app/src/styles/themes/theme-cyberpunk.scss b/app/src/styles/themes/theme-cyberpunk.scss index e992750..ef249e5 100644 --- a/app/src/styles/themes/theme-cyberpunk.scss +++ b/app/src/styles/themes/theme-cyberpunk.scss @@ -32,4 +32,9 @@ --tp-dropdown-option-bg: #1a1a2e; --tp-dropdown-option-text: #f8f8ff; + + --tp-wheel-highlight-bg: rgba(0, 240, 255, 0.1); + --tp-wheel-highlight-border: rgba(0, 240, 255, 0.3); + --tp-wheel-text-color: #f8f8ff; + --tp-wheel-selected-color: #00f0ff; } diff --git a/app/src/styles/themes/theme-dark.scss b/app/src/styles/themes/theme-dark.scss index 684d3a8..b6b2af2 100644 --- a/app/src/styles/themes/theme-dark.scss +++ b/app/src/styles/themes/theme-dark.scss @@ -32,4 +32,9 @@ --tp-dropdown-option-bg: #2c2b30; --tp-dropdown-option-text: #e5e5e5; + + --tp-wheel-highlight-bg: rgba(187, 134, 252, 0.12); + --tp-wheel-highlight-border: rgba(255, 255, 255, 0.12); + --tp-wheel-text-color: #e5e5e5; + --tp-wheel-selected-color: #bb86fc; } diff --git a/app/src/styles/themes/theme-glassmorphic.scss b/app/src/styles/themes/theme-glassmorphic.scss index c0e6c13..fe645d7 100644 --- a/app/src/styles/themes/theme-glassmorphic.scss +++ b/app/src/styles/themes/theme-glassmorphic.scss @@ -32,4 +32,9 @@ --tp-dropdown-option-bg: rgba(255, 255, 255, 0.85); --tp-dropdown-option-text: #000000; + + --tp-wheel-highlight-bg: rgba(255, 255, 255, 0.12); + --tp-wheel-highlight-border: rgba(255, 255, 255, 0.2); + --tp-wheel-text-color: rgba(255, 255, 255, 0.95); + --tp-wheel-selected-color: rgba(255, 255, 255, 0.95); } diff --git a/app/src/styles/themes/theme-m2.scss b/app/src/styles/themes/theme-m2.scss index 110c077..405b6f1 100644 --- a/app/src/styles/themes/theme-m2.scss +++ b/app/src/styles/themes/theme-m2.scss @@ -37,4 +37,9 @@ --tp-dropdown-option-bg: #ffffff; --tp-dropdown-option-text: #000000; + + --tp-wheel-highlight-bg: #ece0fd; + --tp-wheel-highlight-border: #d6d6d6; + --tp-wheel-text-color: #000000; + --tp-wheel-selected-color: #6200ee; } diff --git a/app/src/styles/themes/theme-m3-green.scss b/app/src/styles/themes/theme-m3-green.scss index 23fbb00..bd79179 100644 --- a/app/src/styles/themes/theme-m3-green.scss +++ b/app/src/styles/themes/theme-m3-green.scss @@ -29,4 +29,9 @@ --tp-dropdown-option-bg: #ffffff; --tp-dropdown-option-text: #1a1c18; + + --tp-wheel-highlight-bg: rgba(184, 243, 151, 0.3); + --tp-wheel-highlight-border: #c4c8bb; + --tp-wheel-text-color: #1a1c18; + --tp-wheel-selected-color: #386a20; } diff --git a/app/src/styles/themes/theme-pastel.scss b/app/src/styles/themes/theme-pastel.scss index d776134..c72dc28 100644 --- a/app/src/styles/themes/theme-pastel.scss +++ b/app/src/styles/themes/theme-pastel.scss @@ -29,4 +29,9 @@ --tp-dropdown-option-bg: #ffffff; --tp-dropdown-option-text: #3b3b3b; + + --tp-wheel-highlight-bg: rgba(255, 182, 185, 0.18); + --tp-wheel-highlight-border: #efdcd2; + --tp-wheel-text-color: #3b3b3b; + --tp-wheel-selected-color: #ff8a8f; } diff --git a/app/src/styles/variables.scss b/app/src/styles/variables.scss index d3c1d8e..0d720a4 100644 --- a/app/src/styles/variables.scss +++ b/app/src/styles/variables.scss @@ -134,6 +134,19 @@ --tp-gap-md: 12px; --tp-position-hidden: -10000px; + + --tp-wheel-item-height: 44px; + --tp-wheel-visible-items: 5; + --tp-wheel-column-width: 76px; + --tp-wheel-separator-width: 20px; + --tp-wheel-highlight-bg: var(--tp-primary-container, rgba(103, 80, 164, 0.08)); + --tp-wheel-highlight-border: var(--tp-outline-variant, rgba(0, 0, 0, 0.12)); + --tp-wheel-highlight-radius: var(--tp-radius-md); + --tp-wheel-text-color: var(--tp-on-surface, #1d1b20); + --tp-wheel-selected-color: var(--tp-primary, #6750a4); + --tp-wheel-disabled-opacity: var(--tp-opacity-disabled, 0.38); + --tp-wheel-font-size: var(--tp-font-size-lg, 16px); + --tp-wheel-selected-font-size: 22px; } $red-invalid: #d50000; diff --git a/app/src/timepicker/Lifecycle.ts b/app/src/timepicker/Lifecycle.ts index a39bef5..a3c63b4 100644 --- a/app/src/timepicker/Lifecycle.ts +++ b/app/src/timepicker/Lifecycle.ts @@ -1,6 +1,7 @@ import type { CoreState } from './CoreState'; import type { Managers } from './Managers'; import type { EventEmitter, TimepickerEventMap } from '../utils/EventEmitter'; +import { PluginRegistry } from '../core/PluginRegistry'; import { initMd3Ripple } from '../utils/ripple'; import { debounce } from '../utils/debounce'; import { allEvents } from '../utils/variables'; @@ -92,6 +93,10 @@ export class Lifecycle { if (callbacks.onRangeValidation) { this.emitter.on('range:validation', callbacks.onRangeValidation); } + + if (callbacks.onClear) { + this.emitter.on('clear', callbacks.onClear); + } } mount(): void { @@ -276,9 +281,37 @@ export class Lifecycle { this.managers.animation.setAnimationToOpen(); this.managers.config.getInputValueOnOpenAndSet(); - this.managers.clock.initializeClockSystem(); - this.managers.clock.setOnStartCSSClassesIfClockType24h(); - this.managers.clock.setClassActiveToHourOnOpen(); + const isWheelMode = this.core.options.ui.mode === 'wheel' && PluginRegistry.has('wheel'); + + if (this.core.options.ui.mode === 'wheel' && !PluginRegistry.has('wheel')) { + this.emitter.emit('error', { + error: 'WheelPlugin is not registered. Import and register it: PluginRegistry.register(WheelPlugin)', + }); + } + + if (this.core.options.range?.enabled && !PluginRegistry.has('range')) { + this.emitter.emit('error', { + error: 'RangePlugin is not registered. Import and register it: PluginRegistry.register(RangePlugin)', + }); + } + + if (this.core.options.timezone?.enabled && !PluginRegistry.has('timezone')) { + this.emitter.emit('error', { + error: + 'TimezonePlugin is not registered. Import and register it: PluginRegistry.register(TimezonePlugin)', + }); + } + + if (isWheelMode) { + const wheel = this.managers.getPlugin('wheel'); + if (wheel) { + wheel.init(); + } + } else { + this.managers.clock.initializeClockSystem(); + this.managers.clock.setOnStartCSSClassesIfClockType24h(); + this.managers.clock.setClassActiveToHourOnOpen(); + } const timezone = this.managers.getPlugin('timezone'); if (timezone) { @@ -286,17 +319,22 @@ export class Lifecycle { } const range = this.managers.getPlugin('range'); - if (range) { + if (range && !isWheelMode) { range.init(); } this.managers.events.handleCancelButton(); this.managers.events.handleOkButton(); - this.managers.events.handleHourEvents(); - this.managers.events.handleMinutesEvents(); + this.managers.clearButton.init(); + + if (!isWheelMode) { + this.managers.events.handleHourEvents(); + this.managers.events.handleMinutesEvents(); + } + this.managers.events.handleKeyboardInput(); - if (this.core.options.ui.enableSwitchIcon) { + if (this.core.options.ui.enableSwitchIcon && !isWheelMode) { this.managers.events.handleSwitchViewButton(); } @@ -319,13 +357,15 @@ export class Lifecycle { initMd3Ripple(modal); } - const clockFace = this.core.getClockFace(); - if (clockFace && typeof requestAnimationFrame !== 'undefined') { - requestAnimationFrame(() => { + if (!isWheelMode) { + const clockFace = this.core.getClockFace(); + if (clockFace && typeof requestAnimationFrame !== 'undefined') { requestAnimationFrame(() => { - clockFace?.classList.add('scale-in'); + requestAnimationFrame(() => { + clockFace?.classList.add('scale-in'); + }); }); - }); + } } this.managers.modal.setShowClassToBackdrop(); diff --git a/app/src/timepicker/Managers.ts b/app/src/timepicker/Managers.ts index d1f56c8..47b31c7 100644 --- a/app/src/timepicker/Managers.ts +++ b/app/src/timepicker/Managers.ts @@ -7,6 +7,7 @@ import ThemeManager from '../managers/ThemeManager'; import ValidationManager from '../managers/ValidationManager'; import EventManager from '../managers/EventManager'; import ClockManager from '../managers/ClockManager'; +import ClearButtonManager from '../managers/ClearButtonManager'; import { PluginRegistry, type PluginManager } from '../core/PluginRegistry'; export class Managers { @@ -17,6 +18,7 @@ export class Managers { public readonly validation: ValidationManager; public readonly events: EventManager; public readonly clock: ClockManager; + public readonly clearButton: ClearButtonManager; private plugins: Map<string, PluginManager> = new Map(); constructor(core: CoreState, emitter: EventEmitter<TimepickerEventMap>) { @@ -27,6 +29,7 @@ export class Managers { this.validation = new ValidationManager(core, emitter); this.events = new EventManager(core, emitter); this.clock = new ClockManager(core, emitter); + this.clearButton = new ClearButtonManager(core, emitter); const registeredPlugins = PluginRegistry.getAll(); @@ -48,7 +51,7 @@ export class Managers { this.validation.destroy(); this.events.destroy(); this.clock.destroy(); - + this.clearButton.destroy(); this.plugins.forEach((plugin) => plugin.destroy()); this.plugins.clear(); } diff --git a/app/src/timepicker/TimepickerUI.ts b/app/src/timepicker/TimepickerUI.ts index 6a26264..ffd8e75 100644 --- a/app/src/timepicker/TimepickerUI.ts +++ b/app/src/timepicker/TimepickerUI.ts @@ -7,6 +7,7 @@ import { getInputValue } from '../utils/input'; import { mergeOptions } from '../utils/options'; import { sanitizeTimeInput } from '../utils/validation'; import type { TimepickerOptions } from '../types/options'; +import type { WheelManager } from '../managers/plugins/wheel'; import { isDocument, isNode } from '../utils/node'; type Callback = () => void; @@ -315,9 +316,16 @@ export default class TimepickerUI { } } - const clockHand = this.core.getClockHand(); - if (clockHand) { - clockHand.style.transform = `rotateZ(${this.core.degreesHours || 0}deg)`; + if (this.core.options.ui.mode === 'wheel') { + const wheel = this.managers.getPlugin<WheelManager>('wheel'); + if (wheel) { + wheel.scrollToValue(hourValue, minutesValue, typeValue); + } + } else { + const clockHand = this.core.getClockHand(); + if (clockHand) { + clockHand.style.transform = `rotateZ(${this.core.degreesHours || 0}deg)`; + } } } catch (error) { return; diff --git a/app/src/types/options.d.ts b/app/src/types/options.d.ts index 9ddaf7d..50de4a1 100644 --- a/app/src/types/options.d.ts +++ b/app/src/types/options.d.ts @@ -20,6 +20,7 @@ import type { RangeConfirmEventData, RangeSwitchEventData, RangeValidationEventData, + ClearEventData, } from './types'; /** @@ -97,6 +98,12 @@ export interface ClockOptions { * UI appearance and behavior configuration */ export interface UIOptions { + /** + * @description Picker mode: analog clock face or scroll wheel spinner + * @default "clock" + */ + mode?: 'clock' | 'wheel'; + /** * @description Theme for the timepicker * @default "basic" @@ -155,6 +162,12 @@ export interface UIOptions { */ cssClass?: string; + /** + * @description Show clear button to reset time selection + * @default true + */ + clearButton?: boolean; + /** * @description Selector where to append modal (default: body) * @default "" @@ -242,6 +255,12 @@ export interface LabelsOptions { * @default "Minute" */ mobileMinute?: string; + + /** + * @description "Clear" button text + * @default "Clear" + */ + clear?: string; } /** @@ -406,6 +425,22 @@ export interface CallbacksOptions { * @description Triggered on range validation (range mode only) */ onRangeValidation?: TimepickerEventCallback<RangeValidationEventData>; + + /** + * @description Triggered when clear button is clicked + */ + onClear?: TimepickerEventCallback<ClearEventData>; +} + +/** + * Clear button behavior configuration + */ +export interface ClearBehaviorOptions { + /** + * @description Whether clicking clear also empties the input field value + * @default true + */ + clearInput?: boolean; } /** @@ -419,4 +454,5 @@ export interface TimepickerOptions { callbacks?: CallbacksOptions; timezone?: TimezoneOptions; range?: RangeOptions; + clearBehavior?: ClearBehaviorOptions; } diff --git a/app/src/types/types.d.ts b/app/src/types/types.d.ts index 0f4af19..62822b2 100644 --- a/app/src/types/types.d.ts +++ b/app/src/types/types.d.ts @@ -17,6 +17,11 @@ export type ConfirmEventData = { type?: string; }; +/** Payload when user clears time */ +export type ClearEventData = { + previousValue: string | null; +}; + /** Payload when modal shows */ export type ShowEventData = Record<string, never>; @@ -87,6 +92,18 @@ export type RangeGetDisabledTimeEventData = Record<string, never>; export type RangeUpdateDisabledEventData = Record<string, never>; +/** Payload when wheel scroll starts on a column */ +export type WheelScrollStartEventData = { + column: 'hours' | 'minutes' | 'ampm'; +}; + +/** Payload when wheel scroll ends and snaps to a value */ +export type WheelScrollEndEventData = { + column: 'hours' | 'minutes' | 'ampm'; + value: string; + previousValue: string | null; +}; + /** Payload when validation error occurs */ export type ErrorEventData = { error: string; @@ -102,6 +119,8 @@ export type ErrorEventData = { export type TimepickerEventCallback<T = unknown> = (eventData: T) => void; export type OptionTypes = { + /** Picker mode: clock or wheel @default "clock" */ + mode?: 'clock' | 'wheel'; /** AM label text @default "AM" */ amLabel?: string; /** Enable animations @default true */ diff --git a/app/src/utils/EventEmitter.ts b/app/src/utils/EventEmitter.ts index abdbd89..82ff5cc 100644 --- a/app/src/utils/EventEmitter.ts +++ b/app/src/utils/EventEmitter.ts @@ -17,7 +17,10 @@ import type { RangeMinuteCommitEventData, RangeGetDisabledTimeEventData, RangeUpdateDisabledEventData, + WheelScrollStartEventData, + WheelScrollEndEventData, ErrorEventData, + ClearEventData, } from '../types/types'; type EventHandler<T = unknown> = (data: T) => void; @@ -26,6 +29,7 @@ export interface TimepickerEventMap { open: OpenEventData; cancel: CancelEventData; confirm: ConfirmEventData; + clear: ClearEventData; show: ShowEventData; hide: HideEventData; update: UpdateEventData; @@ -41,6 +45,8 @@ export interface TimepickerEventMap { 'range:minute:commit': RangeMinuteCommitEventData; 'range:get-disabled-time': RangeGetDisabledTimeEventData; 'range:update-disabled': RangeUpdateDisabledEventData; + 'wheel:scroll:start': WheelScrollStartEventData; + 'wheel:scroll:end': WheelScrollEndEventData; 'animation:clock': Record<string, never>; 'animation:start': Record<string, never>; 'animation:end': Record<string, never>; diff --git a/app/src/utils/options/defaults.ts b/app/src/utils/options/defaults.ts index a450253..fbda70f 100644 --- a/app/src/utils/options/defaults.ts +++ b/app/src/utils/options/defaults.ts @@ -1,9 +1,3 @@ -/** - * Default options for Timepicker UI v4.0.0 - * - * Uses grouped structure for better organization and clarity. - */ - import type { TimepickerOptions } from '../../types/options'; export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { @@ -17,6 +11,7 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { }, ui: { + mode: 'clock', theme: 'basic', animation: true, backdrop: true, @@ -29,6 +24,7 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { iconTemplate: '', iconTemplateMobile: '', inline: undefined, + clearButton: true, }, labels: { @@ -40,6 +36,7 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { mobileTime: 'Enter Time', mobileHour: 'Hour', mobileMinute: 'Minute', + clear: 'Clear', }, behavior: { @@ -63,6 +60,7 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { onRangeConfirm: undefined, onRangeSwitch: undefined, onRangeValidation: undefined, + onClear: undefined, }, timezone: { @@ -79,6 +77,10 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { fromLabel: 'From', toLabel: 'To', }, + + clearBehavior: { + clearInput: true, + }, }; export function mergeOptions(userOptions: TimepickerOptions = {}): Required<TimepickerOptions> { @@ -111,5 +113,9 @@ export function mergeOptions(userOptions: TimepickerOptions = {}): Required<Time ...DEFAULT_OPTIONS.range, ...(userOptions.range || {}), }, + clearBehavior: { + ...DEFAULT_OPTIONS.clearBehavior, + ...(userOptions.clearBehavior || {}), + }, }; } diff --git a/app/src/utils/template/index.ts b/app/src/utils/template/index.ts index b098a38..e299cb9 100644 --- a/app/src/utils/template/index.ts +++ b/app/src/utils/template/index.ts @@ -1,6 +1,8 @@ import type { TimepickerOptions } from '../../types/options'; import keyboardSvg from '../../../assets/keyboard.svg'; import scheduleSvg from '../../../assets/schedule.svg'; +import { getWheelTemplate } from './wheel'; +import { PluginRegistry } from '../../core/PluginRegistry'; export const HOURS_24 = ['00', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']; export const HOURS_12 = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']; @@ -8,7 +10,17 @@ export const MINUTES_STEP_5 = ['00', '05', '10', '15', '20', '25', '30', '35', ' export const getModalTemplate = (options: Required<TimepickerOptions>, instanceId: string): string => { const { - ui: { iconTemplate, enableSwitchIcon, animation, theme, mobile, editable, iconTemplateMobile }, + ui: { + mode: pickerMode, + iconTemplate, + enableSwitchIcon, + animation, + theme, + mobile, + editable, + iconTemplateMobile, + clearButton: clearButtonEnabled, + }, labels: { time: timeLabel, mobileTime: mobileTimeLabel, @@ -18,8 +30,9 @@ export const getModalTemplate = (options: Required<TimepickerOptions>, instanceI ok: okLabel, mobileMinute: minuteMobileLabel, mobileHour: hourMobileLabel, + clear: clearLabel, }, - clock: { type: clockType }, + clock: { type: clockType, incrementMinutes }, timezone: { enabled: tzEnabled, label: tzLabel }, range: { enabled: rangeEnabled, fromLabel, toLabel }, } = options; @@ -30,8 +43,9 @@ export const getModalTemplate = (options: Required<TimepickerOptions>, instanceI iconTemplateMobile || `<button aria-label="Clock" type="button" class="tp-ui-keyboard-icon">${iconTemplateMobile || scheduleSvg}</button>`; - const timezoneSelector = tzEnabled - ? `<div class="tp-ui-timezone ${mobileClass}"> + const timezoneSelector = + tzEnabled && PluginRegistry.has('timezone') + ? `<div class="tp-ui-timezone ${mobileClass}"> <span class="tp-ui-timezone-label" id="tp-tz-label-${instanceId}">${tzLabel}</span> <div class="tp-ui-timezone-dropdown" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="tp-tz-label-${instanceId}" tabindex="0" data-tz-id="${instanceId}"> <div class="tp-ui-timezone-selected" data-placeholder="${tzLabel}...">${tzLabel}...</div> @@ -39,11 +53,26 @@ export const getModalTemplate = (options: Required<TimepickerOptions>, instanceI <div class="tp-ui-timezone-menu" role="listbox" aria-labelledby="tp-tz-label-${instanceId}"></div> </div> </div>` - : ''; + : ''; - const rangeSelector = rangeEnabled - ? `<div class="tp-ui-range-header" role="tablist" aria-label="Range selection"><button type="button" class="tp-ui-range-tab tp-ui-range-from active" role="tab" tabindex="0" aria-selected="true"><span class="tp-ui-range-tab-label">${fromLabel}</span><span class="tp-ui-range-tab-value tp-ui-range-from-time">--:--</span></button><button type="button" class="tp-ui-range-tab tp-ui-range-to" role="tab" tabindex="-1" aria-selected="false"><span class="tp-ui-range-tab-label">${toLabel}</span><span class="tp-ui-range-tab-value tp-ui-range-to-time">--:--</span></button></div>` + const rangeSelector = + rangeEnabled && PluginRegistry.has('range') + ? `<div class="tp-ui-range-header" role="tablist" aria-label="Range selection"><button type="button" class="tp-ui-range-tab tp-ui-range-from active" role="tab" tabindex="0" aria-selected="true"><span class="tp-ui-range-tab-label">${fromLabel}</span><span class="tp-ui-range-tab-value tp-ui-range-from-time">--:--</span></button><button type="button" class="tp-ui-range-tab tp-ui-range-to" role="tab" tabindex="-1" aria-selected="false"><span class="tp-ui-range-tab-label">${toLabel}</span><span class="tp-ui-range-tab-value tp-ui-range-to-time">--:--</span></button></div>` + : ''; + + const clearButton = clearButtonEnabled + ? `<div class="tp-ui-clear-btn ${mobileClass} disabled" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${clearLabel}" aria-disabled="true">${clearLabel}</div>` : ''; - return `<div class="tp-ui-modal normalize ${mobileClass}${rangeEnabled ? ' tp-ui-range-mode' : ''}" data-theme="${theme}" role="dialog" aria-modal="true" aria-labelledby="tp-ui-label-${instanceId}" data-owner-id="${instanceId}" style='transition:${animation ? 'opacity 0.15s linear' : 'none'}'><div class="tp-ui-wrapper ${mobileClass}" tabindex="0">${rangeSelector}<div class="tp-ui-select-time ${mobileClass}" id="tp-ui-label-${instanceId}">${mobileClass ? mobileTimeLabel : timeLabel}</div><div class="tp-ui-header ${mobileClass}"><div class="tp-ui-wrapper-time ${mobileClass} ${clockType === '24h' ? 'tp-ui-wrapper-time-24h' : ''}" role="group" aria-label="${mobileClass ? mobileTimeLabel : timeLabel}"><div class="tp-ui-input-wrapper ${mobileClass}"><div class="tp-ui-input-ripple-wrapper ${mobileClass}" data-md3-ripple><input name="hour" ${!editable && !mobileClass ? 'readonly' : ''} class="tp-ui-hour ${mobileClass}" tabindex="0" type="number" min="0" max="${clockType === '12h' ? '12' : '23'}" aria-label="${mobileClass ? hourMobileLabel : 'Hour'}" role="spinbutton" aria-valuenow="12"></div><div class="tp-ui-hour-text ${mobileClass}">${hourMobileLabel}</div></div><div class="tp-ui-dots ${mobileClass}" aria-hidden="true"><span></span><span></span></div><div class="tp-ui-input-wrapper ${mobileClass}"><div class="tp-ui-input-ripple-wrapper ${mobileClass}" data-md3-ripple><input name="minutes" ${!editable && !mobileClass ? 'readonly' : ''} class="tp-ui-minutes ${mobileClass}" tabindex="0" type="number" min="0" max="59" aria-label="${mobileClass ? minuteMobileLabel : 'Minute'}" role="spinbutton" aria-valuenow="0"></div><div class="tp-ui-minute-text ${mobileClass}">${minuteMobileLabel}</div></div></div>${clockType !== '24h' ? `<div class="tp-ui-wrapper-type-time ${mobileClass}" role="group" aria-label="Period"><div class="tp-ui-type-mode tp-ui-am ${mobileClass ? 'mobile' : 'tp-ui-ripple'}" data-md3-ripple tabindex="0" role="button" aria-label="${amLabel}" aria-pressed="false" data-type="AM">${amLabel}</div><div class="tp-ui-type-mode tp-ui-pm ${mobileClass ? 'mobile' : 'tp-ui-ripple'}" data-md3-ripple tabindex="0" role="button" aria-label="${pmLabel}" aria-pressed="false" data-type="PM">${pmLabel}</div></div>` : ''}</div>${timezoneSelector}<div class="tp-ui-mobile-clock-wrapper ${mobileClass}"><div class="tp-ui-body ${mobileClass}"><div class="tp-ui-clock-face ${mobileClass}" role="group" aria-label="Clock"><div class="tp-ui-dot ${mobileClass}" aria-hidden="true"></div><div class="tp-ui-clock-hand ${mobileClass}" aria-hidden="true"><div class="tp-ui-circle-hand ${mobileClass}"></div></div><div class="tp-ui-tips-wrapper ${mobileClass}" role="listbox" aria-label="Time"></div>${clockType === '24h' ? `<div class="tp-ui-tips-wrapper-24h ${mobileClass}" role="listbox" aria-label="24h"></div>` : ''}</div></div></div><div class="tp-ui-footer ${mobileClass}" ${mobileClass ? 'data-view="mobile"' : ''}>${enableSwitchIcon ? `<div class="tp-ui-keyboard-icon-wrapper ${mobileClass}" tabindex="0" role="button" aria-pressed="false" aria-label="Toggle" data-view="desktop">${mobileClass ? clockIcon : keyboardIcon}</div>` : ''}<div class="tp-ui-wrapper-btn ${mobileClass}"><div class="tp-ui-cancel-btn ${mobileClass}" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${cancelLabel}">${cancelLabel}</div><div class="tp-ui-ok-btn ${mobileClass}" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${okLabel}">${okLabel}</div></div></div></div><div class="timepicker-announcer sr-only" role="status" aria-live="polite" aria-atomic="true"></div></div>`; + const isWheelMode = pickerMode === 'wheel' && PluginRegistry.has('wheel'); + + const clockBody = `<div class="tp-ui-mobile-clock-wrapper ${mobileClass}"><div class="tp-ui-body ${mobileClass}"><div class="tp-ui-clock-face ${mobileClass}" role="group" aria-label="Clock"><div class="tp-ui-dot ${mobileClass}" aria-hidden="true"></div><div class="tp-ui-clock-hand ${mobileClass}" aria-hidden="true"><div class="tp-ui-circle-hand ${mobileClass}"></div></div><div class="tp-ui-tips-wrapper ${mobileClass}" role="listbox" aria-label="Time"></div>${clockType === '24h' ? `<div class="tp-ui-tips-wrapper-24h ${mobileClass}" role="listbox" aria-label="24h"></div>` : ''}</div></div></div>`; + + const wheelBody = `<div class="tp-ui-mobile-clock-wrapper ${mobileClass}">${getWheelTemplate(clockType as '12h' | '24h', incrementMinutes ?? 1)}</div>`; + + const isRangeMode = rangeEnabled && PluginRegistry.has('range'); + + const pickerBody = isWheelMode ? wheelBody : clockBody; + + return `<div class="tp-ui-modal normalize ${mobileClass}${isRangeMode ? ' tp-ui-range-mode' : ''}${isWheelMode ? ' tp-ui-wheel-mode' : ''}" data-theme="${theme}" role="dialog" aria-modal="true" aria-labelledby="tp-ui-label-${instanceId}" data-owner-id="${instanceId}" style='transition:${animation ? 'opacity 0.15s linear' : 'none'}'><div class="tp-ui-wrapper ${mobileClass}" tabindex="0">${rangeSelector}<div class="tp-ui-select-time ${mobileClass}" id="tp-ui-label-${instanceId}">${mobileClass ? mobileTimeLabel : timeLabel}</div><div class="tp-ui-header ${mobileClass}"><div class="tp-ui-wrapper-time ${mobileClass} ${clockType === '24h' ? 'tp-ui-wrapper-time-24h' : ''}" role="group" aria-label="${mobileClass ? mobileTimeLabel : timeLabel}"><div class="tp-ui-input-wrapper ${mobileClass}"><div class="tp-ui-input-ripple-wrapper ${mobileClass}" data-md3-ripple><input name="hour" ${!editable && !mobileClass ? 'readonly' : ''} class="tp-ui-hour ${mobileClass}" tabindex="0" type="number" min="0" max="${clockType === '12h' ? '12' : '23'}" aria-label="${mobileClass ? hourMobileLabel : 'Hour'}" role="spinbutton" aria-valuenow="12"></div><div class="tp-ui-hour-text ${mobileClass}">${hourMobileLabel}</div></div><div class="tp-ui-dots ${mobileClass}" aria-hidden="true"><span></span><span></span></div><div class="tp-ui-input-wrapper ${mobileClass}"><div class="tp-ui-input-ripple-wrapper ${mobileClass}" data-md3-ripple><input name="minutes" ${!editable && !mobileClass ? 'readonly' : ''} class="tp-ui-minutes ${mobileClass}" tabindex="0" type="number" min="0" max="59" aria-label="${mobileClass ? minuteMobileLabel : 'Minute'}" role="spinbutton" aria-valuenow="0"></div><div class="tp-ui-minute-text ${mobileClass}">${minuteMobileLabel}</div></div></div>${clockType !== '24h' ? `<div class="tp-ui-wrapper-type-time ${mobileClass}" role="group" aria-label="Period"><div class="tp-ui-type-mode tp-ui-am ${mobileClass ? 'mobile' : 'tp-ui-ripple'}" data-md3-ripple tabindex="0" role="button" aria-label="${amLabel}" aria-pressed="false" data-type="AM">${amLabel}</div><div class="tp-ui-type-mode tp-ui-pm ${mobileClass ? 'mobile' : 'tp-ui-ripple'}" data-md3-ripple tabindex="0" role="button" aria-label="${pmLabel}" aria-pressed="false" data-type="PM">${pmLabel}</div></div>` : ''}</div>${timezoneSelector}${pickerBody}<div class="tp-ui-footer ${mobileClass}" ${mobileClass ? 'data-view="mobile"' : ''}>${enableSwitchIcon ? `<div class="tp-ui-keyboard-icon-wrapper ${mobileClass}" tabindex="0" role="button" aria-pressed="false" aria-label="Toggle" data-view="desktop">${mobileClass ? clockIcon : keyboardIcon}</div>` : ''}<div class="tp-ui-wrapper-btn ${mobileClass}">${clearButton}<div class="tp-ui-cancel-btn ${mobileClass}" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${cancelLabel}">${cancelLabel}</div><div class="tp-ui-ok-btn ${mobileClass}" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${okLabel}">${okLabel}</div></div></div></div><div class="timepicker-announcer sr-only" role="status" aria-live="polite" aria-atomic="true"></div></div>`; }; diff --git a/app/src/utils/template/wheel.ts b/app/src/utils/template/wheel.ts new file mode 100644 index 0000000..0d258c3 --- /dev/null +++ b/app/src/utils/template/wheel.ts @@ -0,0 +1,47 @@ +const TP_PADDING_COUNT = 2; + +const pad = (value: number): string => String(value).padStart(2, '0'); + +const buildPadding = (): string => + Array.from({ length: TP_PADDING_COUNT }) + .map(() => '<div class="tp-ui-wheel-padding"></div>') + .join(''); + +const buildItems = (values: ReadonlyArray<string>, labelPrefix: string): string => + values + .map( + (v) => + `<div class="tp-ui-wheel-item" role="option" data-value="${v}" aria-label="${labelPrefix} ${v}">${v}</div>`, + ) + .join(''); + +const buildColumn = ( + className: string, + ariaLabel: string, + values: ReadonlyArray<string>, + labelPrefix: string, +): string => + `<div class="tp-ui-wheel-column-wrapper at-start"><div class="tp-ui-wheel-column ${className}" role="listbox" aria-label="${ariaLabel}" tabindex="0">${buildPadding()}${buildItems(values, labelPrefix)}${buildPadding()}</div></div>`; + +const generateHours12 = (): ReadonlyArray<string> => Array.from({ length: 12 }, (_, i) => pad(i + 1)); + +const generateHours24 = (): ReadonlyArray<string> => Array.from({ length: 24 }, (_, i) => pad(i)); + +const generateMinutes = (step: number): ReadonlyArray<string> => + Array.from({ length: Math.ceil(60 / step) }, (_, i) => pad(i * step)); + +export const getWheelTemplate = (clockType: '12h' | '24h', incrementMinutes: number): string => { + const hours = clockType === '12h' ? generateHours12() : generateHours24(); + + const minutes = generateMinutes(incrementMinutes); + + const hoursColumn = buildColumn('tp-ui-wheel-hours', 'Hours', hours, 'Hour'); + + const separator = '<div class="tp-ui-wheel-separator" aria-hidden="true">:</div>'; + + const minutesColumn = buildColumn('tp-ui-wheel-minutes', 'Minutes', minutes, 'Minute'); + + const highlight = '<div class="tp-ui-wheel-highlight" aria-hidden="true"></div>'; + + return `<div class="tp-ui-wheel-container">${hoursColumn}${separator}${minutesColumn}${highlight}</div>`; +}; diff --git a/app/src/wheel.ts b/app/src/wheel.ts new file mode 100644 index 0000000..0ea347a --- /dev/null +++ b/app/src/wheel.ts @@ -0,0 +1,2 @@ +export * from './plugins/wheel'; + diff --git a/app/tests/unit/managers/ClearButtonManager.test.ts b/app/tests/unit/managers/ClearButtonManager.test.ts new file mode 100644 index 0000000..ae024a7 --- /dev/null +++ b/app/tests/unit/managers/ClearButtonManager.test.ts @@ -0,0 +1,656 @@ +import ClearButtonManager from '../../../src/managers/ClearButtonManager'; +import { CoreState } from '../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../src/utils/EventEmitter'; +import { DEFAULT_OPTIONS } from '../../../src/utils/options/defaults'; +import { getModalTemplate } from '../../../src/utils/template'; +import type { TimepickerOptions } from '../../../src/types/options'; + +const INSTANCE_ID = 'test-instance-id'; + +function createOptions(overrides: Partial<TimepickerOptions> = {}): Required<TimepickerOptions> { + return { + ...DEFAULT_OPTIONS, + ui: { + ...DEFAULT_OPTIONS.ui, + clearButton: true, + ...overrides.ui, + }, + clock: { + ...DEFAULT_OPTIONS.clock, + ...overrides.clock, + }, + labels: { + ...DEFAULT_OPTIONS.labels, + ...overrides.labels, + }, + behavior: { + ...DEFAULT_OPTIONS.behavior, + ...overrides.behavior, + }, + callbacks: { + ...DEFAULT_OPTIONS.callbacks, + ...overrides.callbacks, + }, + timezone: { + ...DEFAULT_OPTIONS.timezone, + ...overrides.timezone, + }, + range: { + ...DEFAULT_OPTIONS.range, + ...overrides.range, + }, + clearBehavior: { + ...DEFAULT_OPTIONS.clearBehavior, + ...overrides.clearBehavior, + }, + }; +} + +function mountModal(options: Required<TimepickerOptions>): void { + const html = getModalTemplate(options, INSTANCE_ID); + const wrapper = document.createElement('div'); + wrapper.innerHTML = html; + document.body.appendChild(wrapper.firstElementChild!); +} + +function getModal(): HTMLElement { + return document.querySelector(`[data-owner-id="${INSTANCE_ID}"]`)!; +} + +function getClearBtn(): HTMLElement { + return getModal().querySelector('.tp-ui-clear-btn')!; +} + +function getOkBtn(): HTMLElement { + return getModal().querySelector('.tp-ui-ok-btn')!; +} + +function getHourInput(): HTMLInputElement { + return getModal().querySelector('.tp-ui-hour')!; +} + +function getMinuteInput(): HTMLInputElement { + return getModal().querySelector('.tp-ui-minutes')!; +} + +function getClockHand(): HTMLElement { + return getModal().querySelector('.tp-ui-clock-hand')!; +} + +function getAMButton(): HTMLElement | null { + return getModal().querySelector('.tp-ui-am'); +} + +function getPMButton(): HTMLElement | null { + return getModal().querySelector('.tp-ui-pm'); +} + +function simulateUserSelectsHour( + core: CoreState, + emitter: EventEmitter<TimepickerEventMap>, + hour: string, + degrees: number, +): void { + const hourInput = core.getHour(); + if (hourInput) hourInput.value = hour; + core.setDegreesHours(degrees); + emitter.emit('select:hour', { hour }); + emitter.emit('update', { hour, minutes: undefined, type: undefined }); +} + +function simulateUserSelectsMinute( + core: CoreState, + emitter: EventEmitter<TimepickerEventMap>, + minutes: string, + degrees: number, +): void { + const minuteInput = core.getMinutes(); + if (minuteInput) minuteInput.value = minutes; + core.setDegreesMinutes(degrees); + emitter.emit('select:minute', { minutes }); + emitter.emit('update', { hour: undefined, minutes, type: undefined }); +} + +function simulateOpenWithValue( + input: HTMLInputElement, + core: CoreState, + emitter: EventEmitter<TimepickerEventMap>, + value: string, + hour: string, + minutes: string, + type?: string, +): void { + input.value = value; + const hourInput = core.getHour(); + const minuteInput = core.getMinutes(); + if (hourInput) hourInput.value = hour; + if (minuteInput) minuteInput.value = minutes; + emitter.emit('open', { + hour, + minutes, + type, + degreesHours: null, + degreesMinutes: null, + }); +} + +describe('ClearButtonManager', () => { + let core: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let manager: ClearButtonManager; + let element: HTMLElement; + let input: HTMLInputElement; + + function setup(optionOverrides: Partial<TimepickerOptions> = {}): void { + const options = createOptions(optionOverrides); + + element = document.createElement('div'); + input = document.createElement('input'); + input.type = 'text'; + element.appendChild(input); + document.body.appendChild(element); + + core = new CoreState(element, options, INSTANCE_ID); + emitter = new EventEmitter(); + + mountModal(options); + + manager = new ClearButtonManager(core, emitter); + manager.init(); + } + + afterEach(() => { + manager.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + jest.useRealTimers(); + }); + + describe('user opens picker with a value then clicks clear', () => { + it('should empty the input value', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + expect(input.value).toBe(''); + }); + + it('should reset hour display to 12', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + expect(getHourInput().value).toBe('12'); + }); + + it('should reset minute display to 00', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + expect(getMinuteInput().value).toBe('00'); + }); + + it('should reset clock hand rotation to 0 degrees', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + getClockHand().style.transform = 'rotateZ(90deg)'; + + getClearBtn().click(); + + expect(getClockHand().style.transform).toBe('rotateZ(0deg)'); + }); + + it('should reset AM/PM to PM in 12h mode', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 AM', '03', '30', 'AM'); + getAMButton()!.classList.add('active'); + + getClearBtn().click(); + + expect(getPMButton()!.classList.contains('active')).toBe(true); + expect(getAMButton()!.classList.contains('active')).toBe(false); + expect(getPMButton()!.getAttribute('aria-pressed')).toBe('true'); + expect(getAMButton()!.getAttribute('aria-pressed')).toBe('false'); + }); + + it('should remove aria-valuenow from hour and minute inputs', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + getHourInput().setAttribute('aria-valuenow', '3'); + getMinuteInput().setAttribute('aria-valuenow', '30'); + + getClearBtn().click(); + + expect(getHourInput().hasAttribute('aria-valuenow')).toBe(false); + expect(getMinuteInput().hasAttribute('aria-valuenow')).toBe(false); + }); + + it('should set degrees to null in core state', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + core.setDegreesHours(90); + core.setDegreesMinutes(180); + + getClearBtn().click(); + + expect(core.degreesHours).toBeNull(); + expect(core.degreesMinutes).toBeNull(); + }); + }); + + describe('confirm button after clear', () => { + it('should disable the confirm button when user clicks clear', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + expect(getOkBtn().classList.contains('disabled')).toBe(true); + expect(getOkBtn().getAttribute('aria-disabled')).toBe('true'); + }); + + it('should keep confirm button disabled after clear despite clock showing 12:00', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '05:15 PM', '05', '15', 'PM'); + + getClearBtn().click(); + + expect(getHourInput().value).toBe('12'); + expect(getMinuteInput().value).toBe('00'); + expect(getOkBtn().classList.contains('disabled')).toBe(true); + }); + + it('should re-enable confirm button when user selects a new hour after clearing', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + expect(getOkBtn().classList.contains('disabled')).toBe(true); + + simulateUserSelectsHour(core, emitter, '05', 150); + + expect(getOkBtn().classList.contains('disabled')).toBe(false); + expect(getOkBtn().getAttribute('aria-disabled')).toBe('false'); + }); + + it('should re-enable confirm button when user selects a new minute after clearing', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + expect(getOkBtn().classList.contains('disabled')).toBe(true); + + simulateUserSelectsMinute(core, emitter, '45', 270); + + expect(getOkBtn().classList.contains('disabled')).toBe(false); + }); + }); + + describe('onClear callback', () => { + it('should fire onClear with previous value when user clicks clear', () => { + const onClear = jest.fn(); + setup({ callbacks: { onClear } }); + simulateOpenWithValue(input, core, emitter, '08:45 AM', '08', '45', 'AM'); + + getClearBtn().click(); + + expect(onClear).toHaveBeenCalledTimes(1); + expect(onClear).toHaveBeenCalledWith({ previousValue: '08:45 AM' }); + }); + + it('should fire onClear with null when there was no value', () => { + const onClear = jest.fn(); + setup({ callbacks: { onClear } }); + input.value = ''; + + getHourInput().value = '05'; + emitter.emit('update', { hour: '05', minutes: undefined, type: undefined }); + + getClearBtn().click(); + + expect(onClear).toHaveBeenCalledWith({ previousValue: null }); + }); + + it('should emit clear event on the EventEmitter with previous value', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '10:00 PM', '10', '00', 'PM'); + const clearListener = jest.fn(); + emitter.on('clear', clearListener); + + getClearBtn().click(); + + expect(clearListener).toHaveBeenCalledWith({ previousValue: '10:00 PM' }); + }); + + it('should emit update event after clear event', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '10:00 PM', '10', '00', 'PM'); + const events: string[] = []; + emitter.on('clear', () => events.push('clear')); + emitter.on('update', () => events.push('update')); + + getClearBtn().click(); + + expect(events[0]).toBe('clear'); + expect(events[1]).toBe('update'); + }); + }); + + describe('clear button disabled state', () => { + it('should start disabled when no time is selected', () => { + setup(); + + expect(getClearBtn().classList.contains('disabled')).toBe(true); + expect(getClearBtn().getAttribute('aria-disabled')).toBe('true'); + }); + + it('should not fire handleClearClick when user clicks a disabled clear button', () => { + const onClear = jest.fn(); + setup({ callbacks: { onClear } }); + + getClearBtn().click(); + + expect(onClear).not.toHaveBeenCalled(); + expect(input.value).toBe(''); + }); + + it('should become enabled when user selects a non-default hour', () => { + setup(); + + getHourInput().value = '05'; + emitter.emit('update', { hour: '05', minutes: undefined, type: undefined }); + + expect(getClearBtn().classList.contains('disabled')).toBe(false); + expect(getClearBtn().getAttribute('aria-disabled')).toBe('false'); + }); + + it('should become enabled when user selects a non-default minute', () => { + setup(); + + getMinuteInput().value = '30'; + emitter.emit('update', { hour: undefined, minutes: '30', type: undefined }); + + expect(getClearBtn().classList.contains('disabled')).toBe(false); + }); + + it('should become enabled when the input already has a value', () => { + setup(); + input.value = '03:30 PM'; + emitter.emit('open', { + hour: '03', + minutes: '30', + type: 'PM', + degreesHours: 90, + degreesMinutes: 180, + }); + + expect(getClearBtn().classList.contains('disabled')).toBe(false); + }); + + it('should become disabled again after user clicks clear', () => { + setup(); + input.value = '03:30 PM'; + + getClearBtn().click(); + + expect(getClearBtn().classList.contains('disabled')).toBe(true); + expect(getClearBtn().getAttribute('aria-disabled')).toBe('true'); + }); + + it('should re-enable after clear when user starts a new selection', () => { + setup(); + input.value = '03:30 PM'; + + getClearBtn().click(); + expect(getClearBtn().classList.contains('disabled')).toBe(true); + + getHourInput().value = '07'; + emitter.emit('select:hour', { hour: '07' }); + + expect(getClearBtn().classList.contains('disabled')).toBe(false); + }); + }); + + describe('24h mode', () => { + it('should reset clock to 12:00 in 24h mode', () => { + setup({ clock: { type: '24h' } }); + simulateOpenWithValue(input, core, emitter, '14:30', '14', '30'); + + getClearBtn().click(); + + expect(getHourInput().value).toBe('12'); + expect(getMinuteInput().value).toBe('00'); + expect(input.value).toBe(''); + }); + + it('should not render AM/PM buttons in 24h mode', () => { + setup({ clock: { type: '24h' } }); + + expect(getAMButton()).toBeNull(); + expect(getPMButton()).toBeNull(); + }); + + it('should fire onClear with the 24h previous value', () => { + const onClear = jest.fn(); + setup({ clock: { type: '24h' }, callbacks: { onClear } }); + simulateOpenWithValue(input, core, emitter, '22:15', '22', '15'); + + getClearBtn().click(); + + expect(onClear).toHaveBeenCalledWith({ previousValue: '22:15' }); + }); + + it('should disable confirm button after clearing in 24h mode', () => { + setup({ clock: { type: '24h' } }); + simulateOpenWithValue(input, core, emitter, '14:30', '14', '30'); + + getClearBtn().click(); + + expect(getOkBtn().classList.contains('disabled')).toBe(true); + }); + }); + + describe('clear button not enabled', () => { + it('should not init when clearButton is false', () => { + const options = createOptions({ ui: { clearButton: false } }); + element = document.createElement('div'); + input = document.createElement('input'); + input.type = 'text'; + element.appendChild(input); + document.body.appendChild(element); + + core = new CoreState(element, options, INSTANCE_ID); + emitter = new EventEmitter(); + mountModal(options); + manager = new ClearButtonManager(core, emitter); + manager.init(); + + expect(getModal().querySelector('.tp-ui-clear-btn')).toBeNull(); + }); + }); + + describe('screen reader announcement', () => { + it('should announce time cleared to screen readers', () => { + jest.useFakeTimers(); + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + jest.advanceTimersByTime(150); + + const announcer = getModal().querySelector('.timepicker-announcer'); + expect(announcer!.textContent).toBe('Time cleared'); + }); + }); + + describe('active tip states after clear', () => { + it('should remove active class from all value tips', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + const tipsWrapper = getModal().querySelector('.tp-ui-tips-wrapper')!; + const tip = document.createElement('div'); + tip.classList.add('tp-ui-value-tips', 'active'); + tip.setAttribute('aria-selected', 'true'); + tipsWrapper.appendChild(tip); + + getClearBtn().click(); + + expect(tip.classList.contains('active')).toBe(false); + expect(tip.hasAttribute('aria-selected')).toBe(false); + }); + }); + + describe('destroyed instance guard', () => { + it('should not fire clear when instance is destroyed', () => { + const onClear = jest.fn(); + setup({ callbacks: { onClear } }); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + core.setIsDestroyed(true); + + getClearBtn().click(); + + expect(onClear).not.toHaveBeenCalled(); + }); + }); + + describe('full user flow: select → clear → reselect', () => { + it('should handle a complete select → clear → reselect cycle', () => { + const onClear = jest.fn(); + setup({ callbacks: { onClear } }); + + simulateUserSelectsHour(core, emitter, '03', 90); + simulateUserSelectsMinute(core, emitter, '30', 180); + input.value = '03:30 PM'; + + expect(getClearBtn().classList.contains('disabled')).toBe(false); + expect(getOkBtn().classList.contains('disabled')).toBe(false); + + getClearBtn().click(); + + expect(input.value).toBe(''); + expect(getHourInput().value).toBe('12'); + expect(getMinuteInput().value).toBe('00'); + expect(getClearBtn().classList.contains('disabled')).toBe(true); + expect(getOkBtn().classList.contains('disabled')).toBe(true); + expect(onClear).toHaveBeenCalledWith({ previousValue: '03:30 PM' }); + + simulateUserSelectsHour(core, emitter, '07', 210); + + expect(getClearBtn().classList.contains('disabled')).toBe(false); + expect(getOkBtn().classList.contains('disabled')).toBe(false); + }); + + it('should handle double clear without errors', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + expect(getClearBtn().classList.contains('disabled')).toBe(true); + + getClearBtn().click(); + + expect(input.value).toBe(''); + expect(getClearBtn().classList.contains('disabled')).toBe(true); + }); + }); + + describe('clearBehavior.clearInput option', () => { + it('should clear input value when clearInput is true (default)', () => { + setup(); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + expect(input.value).toBe(''); + }); + + it('should keep input value when clearInput is false', () => { + setup({ clearBehavior: { clearInput: false } }); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + expect(input.value).toBe('03:30 PM'); + }); + + it('should still reset clock hands when clearInput is false', () => { + setup({ clearBehavior: { clearInput: false } }); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + expect(getHourInput().value).toBe('12'); + expect(getMinuteInput().value).toBe('00'); + }); + + it('should still reset clock hand rotation when clearInput is false', () => { + setup({ clearBehavior: { clearInput: false } }); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + getClockHand().style.transform = 'rotateZ(90deg)'; + + getClearBtn().click(); + + expect(getClockHand().style.transform).toBe('rotateZ(0deg)'); + }); + + it('should still disable confirm button when clearInput is false', () => { + setup({ clearBehavior: { clearInput: false } }); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + + getClearBtn().click(); + + expect(getOkBtn().classList.contains('disabled')).toBe(true); + }); + + it('should still fire onClear callback when clearInput is false', () => { + const onClear = jest.fn(); + setup({ clearBehavior: { clearInput: false }, callbacks: { onClear } }); + simulateOpenWithValue(input, core, emitter, '05:00 AM', '05', '00', 'AM'); + + getClearBtn().click(); + + expect(onClear).toHaveBeenCalledWith({ previousValue: '05:00 AM' }); + }); + + it('should still set degrees to null when clearInput is false', () => { + setup({ clearBehavior: { clearInput: false } }); + simulateOpenWithValue(input, core, emitter, '03:30 PM', '03', '30', 'PM'); + core.setDegreesHours(90); + core.setDegreesMinutes(180); + + getClearBtn().click(); + + expect(core.degreesHours).toBeNull(); + expect(core.degreesMinutes).toBeNull(); + }); + + it('should handle full flow with clearInput false: select → clear → reselect', () => { + const onClear = jest.fn(); + setup({ clearBehavior: { clearInput: false }, callbacks: { onClear } }); + + simulateUserSelectsHour(core, emitter, '03', 90); + simulateUserSelectsMinute(core, emitter, '30', 180); + input.value = '03:30 PM'; + + getClearBtn().click(); + + expect(input.value).toBe('03:30 PM'); + expect(getHourInput().value).toBe('12'); + expect(getMinuteInput().value).toBe('00'); + expect(getOkBtn().classList.contains('disabled')).toBe(true); + + simulateUserSelectsHour(core, emitter, '07', 210); + + expect(getOkBtn().classList.contains('disabled')).toBe(false); + }); + }); +}); + diff --git a/app/tests/unit/managers/WheelManager.test.ts b/app/tests/unit/managers/WheelManager.test.ts new file mode 100644 index 0000000..3e3f7b6 --- /dev/null +++ b/app/tests/unit/managers/WheelManager.test.ts @@ -0,0 +1,305 @@ +import WheelManager from '../../../src/managers/plugins/wheel/WheelManager'; +import { CoreState } from '../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../src/utils/EventEmitter'; +import { DEFAULT_OPTIONS } from '../../../src/utils/options/defaults'; +import type { TimepickerOptions } from '../../../src/types/options'; + +function createModalWithWheel(instanceId: string, clockType: '12h' | '24h'): HTMLDivElement { + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', instanceId); + modal.classList.add('tp-ui-modal'); + + const hourInput = document.createElement('input'); + hourInput.className = 'tp-ui-hour'; + hourInput.value = '12'; + modal.appendChild(hourInput); + + const minuteInput = document.createElement('input'); + minuteInput.className = 'tp-ui-minutes'; + minuteInput.value = '00'; + modal.appendChild(minuteInput); + + if (clockType !== '24h') { + const am = document.createElement('div'); + am.className = 'tp-ui-type-mode tp-ui-am active'; + am.textContent = 'AM'; + modal.appendChild(am); + + const pm = document.createElement('div'); + pm.className = 'tp-ui-type-mode tp-ui-pm'; + pm.textContent = 'PM'; + modal.appendChild(pm); + } + + const container = document.createElement('div'); + container.className = 'tp-ui-wheel-container'; + + const hoursWrapper = document.createElement('div'); + hoursWrapper.className = 'tp-ui-wheel-column-wrapper at-start'; + const hoursCol = document.createElement('div'); + hoursCol.className = 'tp-ui-wheel-column tp-ui-wheel-hours'; + hoursCol.setAttribute('role', 'listbox'); + hoursCol.setAttribute('tabindex', '0'); + + const maxHour = clockType === '12h' ? 12 : 23; + const startHour = clockType === '12h' ? 1 : 0; + for (let i = startHour; i <= maxHour; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.setAttribute('role', 'option'); + item.textContent = String(i).padStart(2, '0'); + item.style.height = '40px'; + hoursCol.appendChild(item); + } + hoursWrapper.appendChild(hoursCol); + container.appendChild(hoursWrapper); + + const minutesWrapper = document.createElement('div'); + minutesWrapper.className = 'tp-ui-wheel-column-wrapper at-start'; + const minutesCol = document.createElement('div'); + minutesCol.className = 'tp-ui-wheel-column tp-ui-wheel-minutes'; + minutesCol.setAttribute('role', 'listbox'); + minutesCol.setAttribute('tabindex', '0'); + + for (let i = 0; i < 60; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.setAttribute('role', 'option'); + item.textContent = String(i).padStart(2, '0'); + item.style.height = '40px'; + minutesCol.appendChild(item); + } + minutesWrapper.appendChild(minutesCol); + container.appendChild(minutesWrapper); + + if (clockType !== '24h') { + const ampmWrapper = document.createElement('div'); + ampmWrapper.className = 'tp-ui-wheel-column-wrapper at-start'; + const ampmCol = document.createElement('div'); + ampmCol.className = 'tp-ui-wheel-column tp-ui-wheel-ampm'; + ampmCol.setAttribute('role', 'listbox'); + ampmCol.setAttribute('tabindex', '0'); + + ['AM', 'PM'].forEach((val) => { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', val); + item.setAttribute('role', 'option'); + item.textContent = val; + item.style.height = '40px'; + ampmCol.appendChild(item); + }); + ampmWrapper.appendChild(ampmCol); + container.appendChild(ampmWrapper); + } + + modal.appendChild(container); + return modal; +} + +function createWheelOptions(overrides: Partial<TimepickerOptions> = {}): Required<TimepickerOptions> { + return { + ...DEFAULT_OPTIONS, + ui: { ...DEFAULT_OPTIONS.ui, mode: 'wheel', ...overrides.ui }, + clock: { ...DEFAULT_OPTIONS.clock, ...overrides.clock }, + labels: { ...DEFAULT_OPTIONS.labels, ...overrides.labels }, + behavior: { ...DEFAULT_OPTIONS.behavior, ...overrides.behavior }, + callbacks: { ...DEFAULT_OPTIONS.callbacks, ...overrides.callbacks }, + timezone: { ...DEFAULT_OPTIONS.timezone, ...overrides.timezone }, + range: { ...DEFAULT_OPTIONS.range, ...overrides.range }, + clearBehavior: { ...DEFAULT_OPTIONS.clearBehavior, ...overrides.clearBehavior }, + }; +} + +describe('WheelManager', () => { + let mockElement: HTMLDivElement; + let coreState: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let wheelManager: WheelManager; + let modal: HTMLDivElement; + + const INSTANCE_ID = 'test-wheel-instance'; + + beforeEach(() => { + mockElement = document.createElement('div'); + mockElement.innerHTML = '<input type="text" />'; + document.body.appendChild(mockElement); + + const options = createWheelOptions(); + coreState = new CoreState(mockElement, options, INSTANCE_ID); + + modal = createModalWithWheel(INSTANCE_ID, '12h'); + document.body.appendChild(modal); + + emitter = new EventEmitter<TimepickerEventMap>(); + wheelManager = new WheelManager(coreState, emitter); + }); + + afterEach(() => { + wheelManager.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + describe('constructor', () => { + it('should create an instance without side effects', () => { + expect(wheelManager).toBeInstanceOf(WheelManager); + }); + + it('should not attach any DOM listeners in constructor', () => { + const addEventSpy = jest.spyOn(HTMLDivElement.prototype, 'addEventListener'); + const newManager = new WheelManager(coreState, emitter); + expect(addEventSpy).not.toHaveBeenCalled(); + newManager.destroy(); + addEventSpy.mockRestore(); + }); + }); + + describe('init', () => { + it('should initialize without throwing', () => { + expect(() => wheelManager.init()).not.toThrow(); + }); + + it('should cache column elements after init', () => { + wheelManager.init(); + const hoursCol = modal.querySelector('.tp-ui-wheel-hours'); + expect(hoursCol).not.toBeNull(); + }); + }); + + describe('scrollToValue', () => { + it('should not throw when called before init', () => { + expect(() => wheelManager.scrollToValue('09', '30', 'AM')).not.toThrow(); + }); + + it('should not throw when called after init', () => { + wheelManager.init(); + expect(() => wheelManager.scrollToValue('09', '30', 'AM')).not.toThrow(); + }); + + it('should zero-pad hour values', () => { + wheelManager.init(); + expect(() => wheelManager.scrollToValue('9', '5')).not.toThrow(); + }); + }); + + describe('updateDisabledItems', () => { + it('should not throw when no disabled time is set', () => { + wheelManager.init(); + expect(() => wheelManager.updateDisabledItems()).not.toThrow(); + }); + + it('should mark disabled hours', () => { + coreState.setDisabledTime({ + value: { hours: ['3', '5'] }, + }); + + wheelManager.init(); + wheelManager.updateDisabledItems(); + + const hoursCol = modal.querySelector('.tp-ui-wheel-hours'); + const item3 = hoursCol?.querySelector('[data-value="03"]'); + const item5 = hoursCol?.querySelector('[data-value="05"]'); + const item4 = hoursCol?.querySelector('[data-value="04"]'); + + expect(item3?.classList.contains('is-disabled')).toBe(true); + expect(item5?.classList.contains('is-disabled')).toBe(true); + expect(item4?.classList.contains('is-disabled')).toBe(false); + }); + + it('should mark disabled minutes', () => { + coreState.setDisabledTime({ + value: { minutes: ['15', '30'] }, + }); + + wheelManager.init(); + wheelManager.updateDisabledItems(); + + const minutesCol = modal.querySelector('.tp-ui-wheel-minutes'); + const item15 = minutesCol?.querySelector('[data-value="15"]'); + const item30 = minutesCol?.querySelector('[data-value="30"]'); + const item00 = minutesCol?.querySelector('[data-value="00"]'); + + expect(item15?.classList.contains('is-disabled')).toBe(true); + expect(item30?.classList.contains('is-disabled')).toBe(true); + expect(item00?.classList.contains('is-disabled')).toBe(false); + }); + }); + + describe('destroy', () => { + it('should not throw when called without init', () => { + expect(() => wheelManager.destroy()).not.toThrow(); + }); + + it('should not throw when called after init', () => { + wheelManager.init(); + expect(() => wheelManager.destroy()).not.toThrow(); + }); + + it('should allow multiple destroy calls', () => { + wheelManager.init(); + wheelManager.destroy(); + expect(() => wheelManager.destroy()).not.toThrow(); + }); + }); + + describe('events', () => { + it('should not throw when emitting select:hour', () => { + wheelManager.init(); + expect(() => emitter.emit('select:hour', { hour: '09' })).not.toThrow(); + }); + + it('should not throw when emitting select:minute', () => { + wheelManager.init(); + expect(() => emitter.emit('select:minute', { minutes: '30' })).not.toThrow(); + }); + + it('should not throw when emitting update', () => { + wheelManager.init(); + expect(() => emitter.emit('update', { hour: '09', minutes: '30', type: 'AM' })).not.toThrow(); + }); + }); + + describe('24h mode', () => { + let coreState24h: CoreState; + let modal24h: HTMLDivElement; + let wheelManager24h: WheelManager; + + beforeEach(() => { + const options = createWheelOptions({ clock: { type: '24h' } }); + coreState24h = new CoreState(mockElement, options, 'test-24h'); + + modal24h = createModalWithWheel('test-24h', '24h'); + document.body.appendChild(modal24h); + + wheelManager24h = new WheelManager(coreState24h, emitter); + }); + + afterEach(() => { + wheelManager24h.destroy(); + modal24h.remove(); + }); + + it('should initialize in 24h mode', () => { + expect(() => wheelManager24h.init()).not.toThrow(); + }); + + it('should not have AM/PM column in 24h mode', () => { + const ampmCol = modal24h.querySelector('.tp-ui-wheel-ampm'); + expect(ampmCol).toBeNull(); + }); + + it('should have 24 hour items', () => { + const hoursCol = modal24h.querySelector('.tp-ui-wheel-hours'); + const items = hoursCol?.querySelectorAll('.tp-ui-wheel-item'); + expect(items?.length).toBe(24); + }); + + it('should scroll to value without type in 24h mode', () => { + wheelManager24h.init(); + expect(() => wheelManager24h.scrollToValue('14', '30')).not.toThrow(); + }); + }); +}); diff --git a/app/tests/unit/managers/plugins/wheel/ColumnDragState.test.ts b/app/tests/unit/managers/plugins/wheel/ColumnDragState.test.ts new file mode 100644 index 0000000..f04c067 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/ColumnDragState.test.ts @@ -0,0 +1,190 @@ +import { ColumnDragState } from '../../../../../src/managers/plugins/wheel/ColumnDragState'; + +describe('ColumnDragState', () => { + let element: HTMLDivElement; + let state: ColumnDragState; + + beforeEach(() => { + element = document.createElement('div'); + document.body.appendChild(element); + state = new ColumnDragState(element, 'hours'); + }); + + afterEach(() => { + state.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + jest.useRealTimers(); + }); + + describe('constructor', () => { + it('should store the element and column type', () => { + expect(state.element).toBe(element); + expect(state.columnType).toBe('hours'); + }); + + it('should start in non-dragging state', () => { + expect(state.isDragging).toBe(false); + }); + + it('should produce a valid AbortSignal', () => { + expect(state.signal).toBeInstanceOf(AbortSignal); + expect(state.signal.aborted).toBe(false); + }); + }); + + describe('startDrag()', () => { + it('should set dragging state', () => { + state.startDrag(100, 1); + + expect(state.isDragging).toBe(true); + expect(state.lastY).toBe(100); + expect(state.pointerId).toBe(1); + }); + + it('should stop existing momentum before starting', () => { + const stopSpy = jest.spyOn(state, 'stopMomentum'); + state.startDrag(50, 2); + + expect(stopSpy).toHaveBeenCalled(); + }); + }); + + describe('updateLastY()', () => { + it('should update the lastY value', () => { + state.startDrag(100, 1); + state.updateLastY(200); + + expect(state.lastY).toBe(200); + }); + }); + + describe('addVelocitySample()', () => { + it('should not throw', () => { + state.startDrag(100, 1); + expect(() => state.addVelocitySample(110)).not.toThrow(); + expect(() => state.addVelocitySample(120)).not.toThrow(); + }); + }); + + describe('computeReleaseVelocity()', () => { + it('should return 0 with no samples', () => { + expect(state.computeReleaseVelocity()).toBe(0); + }); + + it('should return 0 with only one recent sample', () => { + state.startDrag(100, 1); + expect(state.computeReleaseVelocity()).toBe(0); + }); + }); + + describe('endDrag()', () => { + it('should clear dragging state', () => { + state.startDrag(100, 1); + state.endDrag(); + + expect(state.isDragging).toBe(false); + expect(state.pointerId).toBe(-1); + }); + }); + + describe('stopMomentum()', () => { + it('should not throw when no momentum is active', () => { + expect(() => state.stopMomentum()).not.toThrow(); + }); + + it('should cancel active momentum rAF', () => { + const cancelSpy = jest.spyOn(window, 'cancelAnimationFrame'); + state.setMomentumRaf(42); + state.stopMomentum(); + + expect(cancelSpy).toHaveBeenCalledWith(42); + }); + }); + + describe('setMomentumRaf()', () => { + it('should not throw', () => { + expect(() => state.setMomentumRaf(123)).not.toThrow(); + expect(() => state.setMomentumRaf(null)).not.toThrow(); + }); + }); + + describe('animateToOffset()', () => { + it('should call onComplete immediately when distance is negligible', () => { + element.scrollTop = 100; + const onComplete = jest.fn(); + + state.animateToOffset(100, onComplete); + + expect(onComplete).toHaveBeenCalled(); + }); + + it('should start animation for non-trivial distances', () => { + jest.useFakeTimers(); + const rafSpy = jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => { + setTimeout(() => cb(performance.now()), 16); + return 1; + }); + + element.scrollTop = 0; + const onComplete = jest.fn(); + + state.animateToOffset(200, onComplete); + + expect(rafSpy).toHaveBeenCalled(); + + state.stopMomentum(); + rafSpy.mockRestore(); + }); + }); + + describe('scheduleSnapAfterWheel()', () => { + it('should call callback after debounce timeout', () => { + jest.useFakeTimers(); + const callback = jest.fn(); + + state.scheduleSnapAfterWheel(callback); + expect(callback).not.toHaveBeenCalled(); + + jest.advanceTimersByTime(200); + expect(callback).toHaveBeenCalledTimes(1); + }); + + it('should debounce multiple calls', () => { + jest.useFakeTimers(); + const callback = jest.fn(); + + state.scheduleSnapAfterWheel(callback); + state.scheduleSnapAfterWheel(callback); + state.scheduleSnapAfterWheel(callback); + + jest.advanceTimersByTime(200); + expect(callback).toHaveBeenCalledTimes(1); + }); + }); + + describe('destroy()', () => { + it('should abort the signal', () => { + const signal = state.signal; + state.destroy(); + expect(signal.aborted).toBe(true); + }); + + it('should not throw when called multiple times', () => { + state.destroy(); + expect(() => state.destroy()).not.toThrow(); + }); + + it('should clear pending snap timeout', () => { + jest.useFakeTimers(); + const callback = jest.fn(); + + state.scheduleSnapAfterWheel(callback); + state.destroy(); + + jest.advanceTimersByTime(200); + expect(callback).not.toHaveBeenCalled(); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelDragHandler.test.ts b/app/tests/unit/managers/plugins/wheel/WheelDragHandler.test.ts new file mode 100644 index 0000000..59a1b61 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelDragHandler.test.ts @@ -0,0 +1,207 @@ +import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { setupWheelTestContext, WHEEL_ITEM_HEIGHT_PX, type WheelTestContext } from './wheel-test-helpers'; + +describe('WheelDragHandler', () => { + let ctx: WheelTestContext; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + + beforeEach(() => { + ctx = setupWheelTestContext('12h'); + renderer = new WheelRenderer(ctx.core, ctx.emitter); + renderer.init(); + dragHandler = new WheelDragHandler(renderer); + }); + + afterEach(() => { + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + describe('init()', () => { + it('should not throw', () => { + expect(() => dragHandler.init()).not.toThrow(); + }); + + it('should attach pointer and wheel listeners to columns', () => { + const hoursCol = renderer.getColumnElement('hours'); + const addSpy = jest.spyOn(hoursCol as HTMLDivElement, 'addEventListener'); + + dragHandler.init(); + + const eventNames = addSpy.mock.calls.map((call) => call[0]); + expect(eventNames).toContain('pointerdown'); + expect(eventNames).toContain('wheel'); + + addSpy.mockRestore(); + }); + + it('should attach document-level pointermove and pointerup', () => { + const docSpy = jest.spyOn(document, 'addEventListener'); + + dragHandler.init(); + + const eventNames = docSpy.mock.calls.map((call) => call[0]); + expect(eventNames).toContain('pointermove'); + expect(eventNames).toContain('pointerup'); + + docSpy.mockRestore(); + }); + }); + + describe('getScrollOffset()', () => { + it('should return 0 initially', () => { + dragHandler.init(); + expect(dragHandler.getScrollOffset('hours')).toBe(0); + }); + }); + + describe('setScrollOffset()', () => { + it('should set scrollTop on the column element', () => { + dragHandler.init(); + dragHandler.setScrollOffset('hours', 120); + + const col = renderer.getColumnElement('hours'); + expect(col?.scrollTop).toBe(120); + }); + + it('should not throw for non-existent column', () => { + dragHandler.init(); + expect(() => dragHandler.setScrollOffset('ampm', 0)).not.toThrow(); + }); + }); + + describe('getMaxOffset()', () => { + it('should return 0 when item height is 0', () => { + dragHandler.init(); + expect(dragHandler.getMaxOffset('hours')).toBe(0); + }); + + it('should calculate max offset based on item count', () => { + dragHandler.init(); + + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + jest.spyOn(renderer, 'getItemCount').mockReturnValue(12); + + const expected = (12 - 1) * WHEEL_ITEM_HEIGHT_PX; + expect(dragHandler.getMaxOffset('hours')).toBe(expected); + }); + }); + + describe('setSnapCallback()', () => { + it('should accept a callback without throwing', () => { + expect(() => dragHandler.setSnapCallback(jest.fn())).not.toThrow(); + }); + }); + + describe('setVisualUpdateCallback()', () => { + it('should accept a callback without throwing', () => { + expect(() => dragHandler.setVisualUpdateCallback(jest.fn())).not.toThrow(); + }); + }); + + describe('pointer drag interaction', () => { + beforeEach(() => { + HTMLElement.prototype.setPointerCapture = jest.fn(); + HTMLElement.prototype.releasePointerCapture = jest.fn(); + + if (typeof globalThis.PointerEvent === 'undefined') { + (globalThis as Record<string, unknown>).PointerEvent = class PointerEvent extends MouseEvent { + readonly pointerId: number; + constructor(type: string, init: PointerEventInit & { pointerId?: number } = {}) { + super(type, init); + this.pointerId = init.pointerId ?? 0; + } + }; + } + }); + + it('should add is-dragging class on pointerdown', () => { + dragHandler.init(); + + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) throw new Error('hours column not found'); + + hoursCol.dispatchEvent( + new PointerEvent('pointerdown', { + clientY: 100, + pointerId: 1, + bubbles: true, + }), + ); + + expect(hoursCol.classList.contains('is-dragging')).toBe(true); + }); + + it('should remove is-dragging class on pointerup', () => { + dragHandler.init(); + + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) throw new Error('hours column not found'); + + hoursCol.dispatchEvent( + new PointerEvent('pointerdown', { + clientY: 100, + pointerId: 1, + bubbles: true, + }), + ); + + document.dispatchEvent( + new PointerEvent('pointerup', { + clientY: 100, + pointerId: 1, + bubbles: true, + }), + ); + + expect(hoursCol.classList.contains('is-dragging')).toBe(false); + }); + }); + + describe('wheel interaction', () => { + it('should prevent default on wheel events', () => { + dragHandler.init(); + + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) throw new Error('hours column not found'); + + const event = new WheelEvent('wheel', { + deltaY: 50, + bubbles: true, + cancelable: true, + }); + + const preventSpy = jest.spyOn(event, 'preventDefault'); + hoursCol.dispatchEvent(event); + + expect(preventSpy).toHaveBeenCalled(); + }); + }); + + describe('destroy()', () => { + it('should not throw when called without init', () => { + expect(() => dragHandler.destroy()).not.toThrow(); + }); + + it('should not throw when called after init', () => { + dragHandler.init(); + expect(() => dragHandler.destroy()).not.toThrow(); + }); + + it('should not throw when called multiple times', () => { + dragHandler.init(); + dragHandler.destroy(); + expect(() => dragHandler.destroy()).not.toThrow(); + }); + + it('should clean up without errors after init', () => { + dragHandler.init(); + expect(() => dragHandler.destroy()).not.toThrow(); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelEventHandler.test.ts b/app/tests/unit/managers/plugins/wheel/WheelEventHandler.test.ts new file mode 100644 index 0000000..77aabd1 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelEventHandler.test.ts @@ -0,0 +1,196 @@ +import { WheelEventHandler } from '../../../../../src/managers/plugins/wheel/WheelEventHandler'; +import { WheelScrollHandler } from '../../../../../src/managers/plugins/wheel/WheelScrollHandler'; +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { setupWheelTestContext, type WheelTestContext } from './wheel-test-helpers'; + +describe('WheelEventHandler', () => { + let ctx: WheelTestContext; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + let scrollHandler: WheelScrollHandler; + let eventHandler: WheelEventHandler; + + beforeEach(() => { + ctx = setupWheelTestContext('12h'); + renderer = new WheelRenderer(ctx.core, ctx.emitter); + dragHandler = new WheelDragHandler(renderer); + scrollHandler = new WheelScrollHandler(renderer, ctx.core); + scrollHandler.setDragHandler(dragHandler); + eventHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + + renderer.init(); + dragHandler.init(); + scrollHandler.init(); + eventHandler.init(); + }); + + afterEach(() => { + eventHandler.destroy(); + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + describe('init()', () => { + it('should set the scroll end callback on the scroll handler', () => { + const spy = jest.spyOn(scrollHandler, 'setScrollEndCallback'); + + const freshHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + freshHandler.init(); + + expect(spy).toHaveBeenCalledWith(expect.any(Function)); + + freshHandler.destroy(); + }); + + it('should not throw when called', () => { + const freshHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + expect(() => freshHandler.init()).not.toThrow(); + freshHandler.destroy(); + }); + }); + + describe('clear event', () => { + it('should scroll hours and minutes to neutral values on clear', () => { + const scrollSpy = jest.spyOn(scrollHandler, 'scrollToValue'); + + ctx.emitter.emit('clear', { previousValue: null }); + + expect(scrollSpy).toHaveBeenCalledWith('hours', '12'); + expect(scrollSpy).toHaveBeenCalledWith('minutes', '00'); + }); + }); + + describe('keyboard navigation', () => { + it('should not throw on ArrowDown keypress on hours column', () => { + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) return; + + expect(() => { + hoursCol.dispatchEvent( + new KeyboardEvent('keydown', { + key: 'ArrowDown', + bubbles: true, + }), + ); + }).not.toThrow(); + }); + + it('should not throw on ArrowUp keypress on hours column', () => { + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) return; + + expect(() => { + hoursCol.dispatchEvent( + new KeyboardEvent('keydown', { + key: 'ArrowUp', + bubbles: true, + }), + ); + }).not.toThrow(); + }); + + it('should not respond to non-arrow keys', () => { + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) return; + + const scrollSpy = jest.spyOn(scrollHandler, 'scrollToValue'); + + hoursCol.dispatchEvent( + new KeyboardEvent('keydown', { + key: 'Enter', + bubbles: true, + }), + ); + + expect(scrollSpy).not.toHaveBeenCalled(); + }); + }); + + describe('scroll end event emission', () => { + it('should emit select:hour when scroll handler reports hour scroll end', () => { + const emitSpy = jest.spyOn(ctx.emitter, 'emit'); + let capturedCallback: ((columnType: string, value: string) => void) | null = null; + + jest.spyOn(scrollHandler, 'setScrollEndCallback').mockImplementation((cb) => { + capturedCallback = cb as (columnType: string, value: string) => void; + }); + + jest.spyOn(scrollHandler, 'getCurrentSelection').mockReturnValue({ + hour: '09', + minute: '30', + ampm: 'AM', + }); + + eventHandler.destroy(); + eventHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + eventHandler.init(); + + expect(capturedCallback).not.toBeNull(); + capturedCallback?.('hours', '09'); + + expect(emitSpy).toHaveBeenCalledWith('select:hour', { hour: '09' }); + expect(emitSpy).toHaveBeenCalledWith('update', { + hour: '09', + minutes: '30', + type: 'AM', + }); + }); + + it('should emit select:minute when scroll handler reports minute scroll end', () => { + const emitSpy = jest.spyOn(ctx.emitter, 'emit'); + let capturedCallback: ((columnType: string, value: string) => void) | null = null; + + jest.spyOn(scrollHandler, 'setScrollEndCallback').mockImplementation((cb) => { + capturedCallback = cb as (columnType: string, value: string) => void; + }); + + jest.spyOn(scrollHandler, 'getCurrentSelection').mockReturnValue({ + hour: '12', + minute: '45', + ampm: 'AM', + }); + + eventHandler.destroy(); + eventHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + eventHandler.init(); + + expect(capturedCallback).not.toBeNull(); + capturedCallback?.('minutes', '45'); + + expect(emitSpy).toHaveBeenCalledWith('select:minute', { minutes: '45' }); + expect(emitSpy).toHaveBeenCalledWith('update', { + hour: '12', + minutes: '45', + type: 'AM', + }); + }); + }); + + describe('destroy()', () => { + it('should not throw when called', () => { + expect(() => eventHandler.destroy()).not.toThrow(); + }); + + it('should not throw when called multiple times', () => { + eventHandler.destroy(); + expect(() => eventHandler.destroy()).not.toThrow(); + }); + + it('should remove clear listener', () => { + const offSpy = jest.spyOn(ctx.emitter, 'off'); + eventHandler.destroy(); + expect(offSpy).toHaveBeenCalledWith('clear', expect.any(Function)); + }); + + it('should not throw when called without init', () => { + const freshHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + expect(() => freshHandler.destroy()).not.toThrow(); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelRenderer.test.ts b/app/tests/unit/managers/plugins/wheel/WheelRenderer.test.ts new file mode 100644 index 0000000..60fd814 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelRenderer.test.ts @@ -0,0 +1,214 @@ +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { setupWheelTestContext, type WheelTestContext } from './wheel-test-helpers'; + +describe('WheelRenderer', () => { + let ctx: WheelTestContext; + let renderer: WheelRenderer; + + beforeEach(() => { + ctx = setupWheelTestContext('12h'); + renderer = new WheelRenderer(ctx.core, ctx.emitter); + }); + + afterEach(() => { + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + describe('init()', () => { + it('should cache column elements from the modal DOM', () => { + renderer.init(); + + expect(renderer.getColumnElement('hours')).toBeInstanceOf(HTMLDivElement); + expect(renderer.getColumnElement('minutes')).toBeInstanceOf(HTMLDivElement); + }); + + it('should cache ampm column in 12h mode', () => { + renderer.init(); + + expect(renderer.getColumnElement('ampm')).toBeInstanceOf(HTMLDivElement); + }); + + it('should not cache ampm column in 24h mode', () => { + document.body.innerHTML = ''; + const ctx24 = setupWheelTestContext('24h', 'test-24h-renderer'); + const renderer24 = new WheelRenderer(ctx24.core, ctx24.emitter); + + renderer24.init(); + expect(renderer24.getColumnElement('ampm')).toBeNull(); + + renderer24.destroy(); + }); + + it('should not throw when modal is missing', () => { + document.body.innerHTML = ''; + const element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const emitter = new EventEmitter<TimepickerEventMap>(); + const orphanRenderer = new WheelRenderer(ctx.core, emitter); + + expect(() => orphanRenderer.init()).not.toThrow(); + expect(orphanRenderer.getColumnElement('hours')).toBeNull(); + + orphanRenderer.destroy(); + }); + }); + + describe('getColumnElement()', () => { + it('should return null before init', () => { + expect(renderer.getColumnElement('hours')).toBeNull(); + expect(renderer.getColumnElement('minutes')).toBeNull(); + expect(renderer.getColumnElement('ampm')).toBeNull(); + }); + + it('should return correct elements after init', () => { + renderer.init(); + + const hours = renderer.getColumnElement('hours'); + expect(hours?.classList.contains('tp-ui-wheel-hours')).toBe(true); + + const minutes = renderer.getColumnElement('minutes'); + expect(minutes?.classList.contains('tp-ui-wheel-minutes')).toBe(true); + }); + }); + + describe('getItems()', () => { + it('should return null before init', () => { + expect(renderer.getItems('hours')).toBeNull(); + }); + + it('should return 12 hour items in 12h mode', () => { + renderer.init(); + const items = renderer.getItems('hours'); + + expect(items).not.toBeNull(); + expect(items?.length).toBe(12); + }); + + it('should return 60 minute items', () => { + renderer.init(); + const items = renderer.getItems('minutes'); + + expect(items).not.toBeNull(); + expect(items?.length).toBe(60); + }); + + it('should cache items on subsequent calls', () => { + renderer.init(); + const first = renderer.getItems('hours'); + const second = renderer.getItems('hours'); + + expect(first).toBe(second); + }); + }); + + describe('getItemCount()', () => { + it('should return 0 before init', () => { + expect(renderer.getItemCount('hours')).toBe(0); + }); + + it('should return correct count after init', () => { + renderer.init(); + expect(renderer.getItemCount('hours')).toBe(12); + expect(renderer.getItemCount('minutes')).toBe(60); + }); + }); + + describe('getItemHeight()', () => { + it('should return 0 before init', () => { + expect(renderer.getItemHeight()).toBe(0); + }); + + it('should cache the height value', () => { + renderer.init(); + + const first = renderer.getItemHeight(); + const second = renderer.getItemHeight(); + expect(first).toBe(second); + }); + }); + + describe('updateDisabledItems()', () => { + it('should not throw when no disabled time is set', () => { + renderer.init(); + expect(() => renderer.updateDisabledItems()).not.toThrow(); + }); + + it('should add is-disabled class to disabled hours', () => { + ctx.core.setDisabledTime({ + value: { hours: ['3', '5'] }, + }); + + renderer.init(); + renderer.updateDisabledItems(); + + const hoursCol = renderer.getColumnElement('hours'); + const item03 = hoursCol?.querySelector('[data-value="03"]'); + const item05 = hoursCol?.querySelector('[data-value="05"]'); + const item04 = hoursCol?.querySelector('[data-value="04"]'); + + expect(item03?.classList.contains('is-disabled')).toBe(true); + expect(item05?.classList.contains('is-disabled')).toBe(true); + expect(item04?.classList.contains('is-disabled')).toBe(false); + }); + + it('should add is-disabled class to disabled minutes', () => { + ctx.core.setDisabledTime({ + value: { minutes: ['00', '15', '30', '45'] }, + }); + + renderer.init(); + renderer.updateDisabledItems(); + + const minutesCol = renderer.getColumnElement('minutes'); + const item00 = minutesCol?.querySelector('[data-value="00"]'); + const item15 = minutesCol?.querySelector('[data-value="15"]'); + const item01 = minutesCol?.querySelector('[data-value="01"]'); + + expect(item00?.classList.contains('is-disabled')).toBe(true); + expect(item15?.classList.contains('is-disabled')).toBe(true); + expect(item01?.classList.contains('is-disabled')).toBe(false); + }); + + it('should toggle disabled state when called again with different values', () => { + ctx.core.setDisabledTime({ value: { hours: ['3'] } }); + renderer.init(); + renderer.updateDisabledItems(); + + const hoursCol = renderer.getColumnElement('hours'); + expect(hoursCol?.querySelector('[data-value="03"]')?.classList.contains('is-disabled')).toBe(true); + + ctx.core.setDisabledTime({ value: { hours: ['7'] } }); + renderer.updateDisabledItems(); + + expect(hoursCol?.querySelector('[data-value="03"]')?.classList.contains('is-disabled')).toBe(false); + expect(hoursCol?.querySelector('[data-value="07"]')?.classList.contains('is-disabled')).toBe(true); + }); + }); + + describe('destroy()', () => { + it('should clear cached data', () => { + renderer.init(); + expect(renderer.getColumnElement('hours')).not.toBeNull(); + + renderer.destroy(); + expect(renderer.getColumnElement('hours')).toBeNull(); + expect(renderer.getItems('hours')).toBeNull(); + }); + + it('should not throw when called multiple times', () => { + renderer.init(); + renderer.destroy(); + expect(() => renderer.destroy()).not.toThrow(); + }); + + it('should not throw when called without init', () => { + expect(() => renderer.destroy()).not.toThrow(); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.test.ts b/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.test.ts new file mode 100644 index 0000000..a857955 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.test.ts @@ -0,0 +1,153 @@ +import { WheelScrollHandler } from '../../../../../src/managers/plugins/wheel/WheelScrollHandler'; +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; +import { setupWheelTestContext, WHEEL_ITEM_HEIGHT_PX, type WheelTestContext } from './wheel-test-helpers'; + +describe('WheelScrollHandler', () => { + let ctx: WheelTestContext; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + let scrollHandler: WheelScrollHandler; + + beforeEach(() => { + ctx = setupWheelTestContext('12h'); + renderer = new WheelRenderer(ctx.core, ctx.emitter); + dragHandler = new WheelDragHandler(renderer); + scrollHandler = new WheelScrollHandler(renderer, ctx.core); + scrollHandler.setDragHandler(dragHandler); + + renderer.init(); + dragHandler.init(); + scrollHandler.init(); + }); + + afterEach(() => { + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + describe('scrollToValue()', () => { + it('should not throw for a valid hour value', () => { + expect(() => scrollHandler.scrollToValue('hours', '05')).not.toThrow(); + }); + + it('should not throw for a valid minute value', () => { + expect(() => scrollHandler.scrollToValue('minutes', '30')).not.toThrow(); + }); + + it('should not throw for a non-existent value', () => { + expect(() => scrollHandler.scrollToValue('hours', '99')).not.toThrow(); + }); + + it('should not throw when column is missing', () => { + expect(() => scrollHandler.scrollToValue('ampm', 'AM')).not.toThrow(); + }); + }); + + describe('getSelectedValue()', () => { + it('should return a string value for hours', () => { + const value = scrollHandler.getSelectedValue('hours'); + expect(typeof value === 'string' || value === null).toBe(true); + }); + + it('should return a string value for minutes', () => { + const value = scrollHandler.getSelectedValue('minutes'); + expect(typeof value === 'string' || value === null).toBe(true); + }); + }); + + describe('getCurrentSelection()', () => { + it('should return an object with hour, minute, and ampm', () => { + const selection = scrollHandler.getCurrentSelection(); + + expect(selection).toHaveProperty('hour'); + expect(selection).toHaveProperty('minute'); + expect(selection).toHaveProperty('ampm'); + }); + + it('should return null ampm in 24h mode', () => { + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + + const ctx24 = setupWheelTestContext('24h', 'test-24h-scroll'); + const renderer24 = new WheelRenderer(ctx24.core, ctx24.emitter); + const dragHandler24 = new WheelDragHandler(renderer24); + const scrollHandler24 = new WheelScrollHandler(renderer24, ctx24.core); + scrollHandler24.setDragHandler(dragHandler24); + + renderer24.init(); + dragHandler24.init(); + scrollHandler24.init(); + + const selection = scrollHandler24.getCurrentSelection(); + expect(selection.ampm).toBeNull(); + + scrollHandler24.destroy(); + dragHandler24.destroy(); + renderer24.destroy(); + }); + }); + + describe('updateVisualClasses()', () => { + it('should not throw when called', () => { + expect(() => scrollHandler.updateVisualClasses('hours')).not.toThrow(); + }); + + it('should toggle at-start on the wrapper element when at index 0', () => { + scrollHandler.updateVisualClasses('hours'); + + const hoursCol = renderer.getColumnElement('hours'); + const wrapper = hoursCol?.parentElement; + expect(wrapper?.classList.contains('at-start')).toBe(true); + }); + + it('should toggle at-end on the wrapper when getScrollOffset returns max offset', () => { + const itemCount = renderer.getItemCount('hours'); + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + jest.spyOn(dragHandler, 'getScrollOffset').mockReturnValue((itemCount - 1) * WHEEL_ITEM_HEIGHT_PX); + + scrollHandler.updateVisualClasses('hours'); + + const hoursCol = renderer.getColumnElement('hours'); + const wrapper = hoursCol?.parentElement; + expect(wrapper?.classList.contains('at-end')).toBe(true); + }); + + it('should add is-center class to the center item', () => { + scrollHandler.updateVisualClasses('hours'); + + const hoursCol = renderer.getColumnElement('hours'); + const centerItems = hoursCol?.querySelectorAll('.is-center'); + expect(centerItems?.length).toBeGreaterThanOrEqual(0); + }); + }); + + describe('setScrollEndCallback()', () => { + it('should accept a callback without throwing', () => { + const callback = jest.fn(); + expect(() => scrollHandler.setScrollEndCallback(callback)).not.toThrow(); + }); + }); + + describe('destroy()', () => { + it('should not throw when called', () => { + expect(() => scrollHandler.destroy()).not.toThrow(); + }); + + it('should not throw when called multiple times', () => { + scrollHandler.destroy(); + expect(() => scrollHandler.destroy()).not.toThrow(); + }); + + it('should not throw when called without init', () => { + const freshHandler = new WheelScrollHandler(renderer, ctx.core); + expect(() => freshHandler.destroy()).not.toThrow(); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/wheel-test-helpers.ts b/app/tests/unit/managers/plugins/wheel/wheel-test-helpers.ts new file mode 100644 index 0000000..78da75c --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/wheel-test-helpers.ts @@ -0,0 +1,165 @@ +import { CoreState } from '../../../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { DEFAULT_OPTIONS } from '../../../../../src/utils/options/defaults'; +import type { TimepickerOptions } from '../../../../../src/types/options'; + +const WHEEL_ITEM_HEIGHT_PX = 40; + +function createModalWithWheel(instanceId: string, clockType: '12h' | '24h'): HTMLDivElement { + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', instanceId); + modal.classList.add('tp-ui-modal'); + + const hourInput = document.createElement('input'); + hourInput.className = 'tp-ui-hour'; + hourInput.value = '12'; + modal.appendChild(hourInput); + + const minuteInput = document.createElement('input'); + minuteInput.className = 'tp-ui-minutes'; + minuteInput.value = '00'; + modal.appendChild(minuteInput); + + if (clockType !== '24h') { + const am = document.createElement('div'); + am.className = 'tp-ui-type-mode tp-ui-am active'; + am.textContent = 'AM'; + modal.appendChild(am); + + const pm = document.createElement('div'); + pm.className = 'tp-ui-type-mode tp-ui-pm'; + pm.textContent = 'PM'; + modal.appendChild(pm); + } + + const container = document.createElement('div'); + container.className = 'tp-ui-wheel-container'; + + const hoursWrapper = document.createElement('div'); + hoursWrapper.className = 'tp-ui-wheel-column-wrapper at-start'; + const hoursCol = buildColumn( + 'tp-ui-wheel-hours', + clockType === '12h' ? 1 : 0, + clockType === '12h' ? 12 : 23, + ); + hoursWrapper.appendChild(hoursCol); + container.appendChild(hoursWrapper); + + const minutesWrapper = document.createElement('div'); + minutesWrapper.className = 'tp-ui-wheel-column-wrapper at-start'; + const minutesCol = buildColumn('tp-ui-wheel-minutes', 0, 59); + minutesWrapper.appendChild(minutesCol); + container.appendChild(minutesWrapper); + + if (clockType !== '24h') { + const ampmWrapper = document.createElement('div'); + ampmWrapper.className = 'tp-ui-wheel-column-wrapper at-start'; + const ampmCol = buildAmPmColumn(); + ampmWrapper.appendChild(ampmCol); + container.appendChild(ampmWrapper); + } + + modal.appendChild(container); + return modal; +} + +function buildColumn(className: string, start: number, end: number): HTMLDivElement { + const col = document.createElement('div'); + col.className = `tp-ui-wheel-column ${className}`; + col.setAttribute('role', 'listbox'); + col.setAttribute('tabindex', '0'); + + appendPadding(col); + + for (let i = start; i <= end; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.setAttribute('role', 'option'); + item.textContent = String(i).padStart(2, '0'); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + col.appendChild(item); + } + + appendPadding(col); + + return col; +} + +function appendPadding(col: HTMLDivElement): void { + for (let p = 0; p < 2; p++) { + const pad = document.createElement('div'); + pad.className = 'tp-ui-wheel-padding'; + pad.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + col.appendChild(pad); + } +} + +function buildAmPmColumn(): HTMLDivElement { + const col = document.createElement('div'); + col.className = 'tp-ui-wheel-column tp-ui-wheel-ampm'; + col.setAttribute('role', 'listbox'); + col.setAttribute('tabindex', '0'); + + appendPadding(col); + + ['AM', 'PM'].forEach((val) => { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', val); + item.setAttribute('role', 'option'); + item.textContent = val; + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + col.appendChild(item); + }); + + appendPadding(col); + + return col; +} + +function createWheelOptions(overrides: Partial<TimepickerOptions> = {}): Required<TimepickerOptions> { + return { + ...DEFAULT_OPTIONS, + ui: { ...DEFAULT_OPTIONS.ui, mode: 'wheel', ...overrides.ui }, + clock: { ...DEFAULT_OPTIONS.clock, ...overrides.clock }, + labels: { ...DEFAULT_OPTIONS.labels, ...overrides.labels }, + behavior: { ...DEFAULT_OPTIONS.behavior, ...overrides.behavior }, + callbacks: { ...DEFAULT_OPTIONS.callbacks, ...overrides.callbacks }, + timezone: { ...DEFAULT_OPTIONS.timezone, ...overrides.timezone }, + range: { ...DEFAULT_OPTIONS.range, ...overrides.range }, + clearBehavior: { ...DEFAULT_OPTIONS.clearBehavior, ...overrides.clearBehavior }, + }; +} + +interface WheelTestContext { + readonly element: HTMLDivElement; + readonly modal: HTMLDivElement; + readonly core: CoreState; + readonly emitter: EventEmitter<TimepickerEventMap>; +} + +function setupWheelTestContext( + clockType: '12h' | '24h' = '12h', + instanceId: string = 'test-wheel', +): WheelTestContext { + const element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const options = createWheelOptions({ + clock: { type: clockType }, + }); + const core = new CoreState(element, options, instanceId); + + const modal = createModalWithWheel(instanceId, clockType); + document.body.appendChild(modal); + + const emitter = new EventEmitter<TimepickerEventMap>(); + + return { element, modal, core, emitter }; +} + +export { createModalWithWheel, createWheelOptions, setupWheelTestContext, WHEEL_ITEM_HEIGHT_PX }; +export type { WheelTestContext }; + diff --git a/app/tests/unit/utils/template/wheel.test.ts b/app/tests/unit/utils/template/wheel.test.ts new file mode 100644 index 0000000..3c53e13 --- /dev/null +++ b/app/tests/unit/utils/template/wheel.test.ts @@ -0,0 +1,188 @@ +import { getWheelTemplate } from '../../../../src/utils/template/wheel'; + +describe('getWheelTemplate', () => { + describe('12h mode', () => { + it('should return a string containing the wheel container', () => { + const html = getWheelTemplate('12h', 1); + expect(html).toContain('tp-ui-wheel-container'); + }); + + it('should contain hours column with 12 items', () => { + const html = getWheelTemplate('12h', 1); + expect(html).toContain('tp-ui-wheel-hours'); + + const container = document.createElement('div'); + container.innerHTML = html; + const hours = container.querySelectorAll('.tp-ui-wheel-hours .tp-ui-wheel-item'); + expect(hours.length).toBe(12); + }); + + it('should have hour values from 01 to 12', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + const items = container.querySelectorAll('.tp-ui-wheel-hours .tp-ui-wheel-item'); + + expect(items[0].getAttribute('data-value')).toBe('01'); + expect(items[11].getAttribute('data-value')).toBe('12'); + }); + + it('should contain minutes column with 60 items for step 1', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + const minutes = container.querySelectorAll('.tp-ui-wheel-minutes .tp-ui-wheel-item'); + expect(minutes.length).toBe(60); + }); + + it('should contain minutes column with 12 items for step 5', () => { + const html = getWheelTemplate('12h', 5); + const container = document.createElement('div'); + container.innerHTML = html; + const minutes = container.querySelectorAll('.tp-ui-wheel-minutes .tp-ui-wheel-item'); + expect(minutes.length).toBe(12); + }); + + it('should contain minutes column with 4 items for step 15', () => { + const html = getWheelTemplate('12h', 15); + const container = document.createElement('div'); + container.innerHTML = html; + const minutes = container.querySelectorAll('.tp-ui-wheel-minutes .tp-ui-wheel-item'); + expect(minutes.length).toBe(4); + }); + + it('should contain a separator with colon', () => { + const html = getWheelTemplate('12h', 1); + expect(html).toContain('tp-ui-wheel-separator'); + expect(html).toContain(':'); + }); + + it('should contain a highlight element', () => { + const html = getWheelTemplate('12h', 1); + expect(html).toContain('tp-ui-wheel-highlight'); + }); + }); + + describe('24h mode', () => { + it('should contain 24 hour items', () => { + const html = getWheelTemplate('24h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + const hours = container.querySelectorAll('.tp-ui-wheel-hours .tp-ui-wheel-item'); + expect(hours.length).toBe(24); + }); + + it('should have hour values from 00 to 23', () => { + const html = getWheelTemplate('24h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + const items = container.querySelectorAll('.tp-ui-wheel-hours .tp-ui-wheel-item'); + + expect(items[0].getAttribute('data-value')).toBe('00'); + expect(items[23].getAttribute('data-value')).toBe('23'); + }); + }); + + describe('column wrapper structure', () => { + it('should wrap each column in a tp-ui-wheel-column-wrapper', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + + const wrappers = container.querySelectorAll('.tp-ui-wheel-column-wrapper'); + expect(wrappers.length).toBe(2); + }); + + it('should set at-start class on wrappers by default', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + + const wrappers = container.querySelectorAll('.tp-ui-wheel-column-wrapper'); + wrappers.forEach((wrapper) => { + expect(wrapper.classList.contains('at-start')).toBe(true); + }); + }); + + it('should have the column as a direct child of the wrapper', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + + const hoursWrapper = container.querySelector('.tp-ui-wheel-column-wrapper'); + expect(hoursWrapper?.firstElementChild?.classList.contains('tp-ui-wheel-column')).toBe(true); + }); + }); + + describe('padding elements', () => { + it('should include padding items before and after hour items', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + + const hoursCol = container.querySelector('.tp-ui-wheel-hours'); + const paddings = hoursCol?.querySelectorAll('.tp-ui-wheel-padding'); + expect(paddings?.length).toBe(4); + }); + }); + + describe('accessibility attributes', () => { + it('should set role=listbox on columns', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + + const columns = container.querySelectorAll('.tp-ui-wheel-column'); + columns.forEach((col) => { + expect(col.getAttribute('role')).toBe('listbox'); + }); + }); + + it('should set role=option on items', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + + const items = container.querySelectorAll('.tp-ui-wheel-item'); + items.forEach((item) => { + expect(item.getAttribute('role')).toBe('option'); + }); + }); + + it('should set aria-label on items', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + + const firstHour = container.querySelector('.tp-ui-wheel-hours .tp-ui-wheel-item'); + expect(firstHour?.getAttribute('aria-label')).toBe('Hour 01'); + + const firstMinute = container.querySelector('.tp-ui-wheel-minutes .tp-ui-wheel-item'); + expect(firstMinute?.getAttribute('aria-label')).toBe('Minute 00'); + }); + + it('should mark separator and highlight as aria-hidden', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + + const separator = container.querySelector('.tp-ui-wheel-separator'); + expect(separator?.getAttribute('aria-hidden')).toBe('true'); + + const highlight = container.querySelector('.tp-ui-wheel-highlight'); + expect(highlight?.getAttribute('aria-hidden')).toBe('true'); + }); + + it('should set tabindex on columns', () => { + const html = getWheelTemplate('12h', 1); + const container = document.createElement('div'); + container.innerHTML = html; + + const columns = container.querySelectorAll('.tp-ui-wheel-column'); + columns.forEach((col) => { + expect(col.getAttribute('tabindex')).toBe('0'); + }); + }); + }); +}); + diff --git a/app/tsup.config.ts b/app/tsup.config.ts index 8f26c70..cedbeab 100644 --- a/app/tsup.config.ts +++ b/app/tsup.config.ts @@ -5,6 +5,7 @@ export default defineConfig({ index: 'src/index.ts', 'plugins/range': 'src/range.ts', 'plugins/timezone': 'src/timezone.ts', + 'plugins/wheel': 'src/wheel.ts', }, format: ['esm', 'cjs'], outDir: '../dist', diff --git a/docs-app/app/docs/api/events/page.tsx b/docs-app/app/docs/api/events/page.tsx index 2e06420..8dfcca5 100644 --- a/docs-app/app/docs/api/events/page.tsx +++ b/docs-app/app/docs/api/events/page.tsx @@ -101,6 +101,32 @@ const availableEvents = [ code: `picker.on('error', (data) => { console.error('Error:', data.error); console.log('Current values:', data.currentHour, data.currentMin); +});`, + }, + { + name: "clear", + description: "Triggered when user clicks the clear button.", + code: `picker.on('clear', (data) => { + console.log('Time cleared. Previous value:', data.previousValue); +});`, + }, + { + name: "wheel:scroll:start", + description: + "Triggered when a wheel column starts scrolling (wheel mode only).", + code: `picker.on('wheel:scroll:start', (data) => { + console.log('Scroll started on column:', data.column); + // data.column: 'hours' | 'minutes' | 'ampm' +});`, + }, + { + name: "wheel:scroll:end", + description: + "Triggered when a wheel column finishes scrolling and snaps to a value (wheel mode only).", + code: `picker.on('wheel:scroll:end', (data) => { + console.log('Column:', data.column, 'snapped to:', data.value); + console.log('Previous value:', data.previousValue); + // data.column: 'hours' | 'minutes' | 'ampm' });`, }, ]; @@ -194,6 +220,17 @@ const callbacks = [ onError: (data) => { console.error('Error:', data.error); } +});`, + }, + { + name: "onClear", + description: "Triggered when user clicks the clear button.", + code: `new TimepickerUI(input, { + callbacks: { + onClear: (data) => { + console.log('Cleared:', data.previousValue); + } + } });`, }, ]; @@ -230,7 +267,8 @@ export default function EventsPage() { <Section icon={Bell} title="Available Events"> <p className="text-muted-foreground mb-6"> - All events you can subscribe to: + All events you can subscribe to. These events work in both{" "} + <strong>clock</strong> (default) and <strong>wheel</strong> mode. </p> <div className="space-y-8"> {availableEvents.map((event) => ( diff --git a/docs-app/app/docs/api/options/page.tsx b/docs-app/app/docs/api/options/page.tsx index 7a020f6..8ebd082 100644 --- a/docs-app/app/docs/api/options/page.tsx +++ b/docs-app/app/docs/api/options/page.tsx @@ -10,6 +10,7 @@ import { Palette, Sliders, Bell, + Trash2, } from "lucide-react"; import Link from "next/link"; @@ -49,6 +50,12 @@ const clockOptions = [ default: "undefined", description: "Disable specific hours, minutes, or intervals", }, + { + name: "smoothHourSnap", + type: "boolean", + default: "true", + description: "Enable smooth hour dragging with snap animation", + }, { name: "currentTime", type: "CurrentTime", @@ -130,6 +137,18 @@ const uiOptions = [ default: "undefined", description: "Inline mode configuration", }, + { + name: "clearButton", + type: "boolean", + default: "true", + description: "Show clear button to reset time selection", + }, + { + name: "mode", + type: '"clock" | "wheel"', + default: '"clock"', + description: "Picker mode — analog clock face or scroll-spinner wheels", + }, ]; const labelsOptions = [ @@ -181,6 +200,12 @@ const labelsOptions = [ default: '"Minute"', description: "Minute label for mobile version", }, + { + name: "clear", + type: "string", + default: '"Clear"', + description: "Text for clear button", + }, ]; const behaviorOptions = [ @@ -265,6 +290,21 @@ const callbacksOptions = [ default: "undefined", description: "Triggered when validation error occurs", }, + { + name: "onClear", + type: "(data: ClearEventData) => void", + default: "undefined", + description: "Triggered when user clicks the clear button", + }, +]; + +const clearBehaviorOptions = [ + { + name: "clearInput", + type: "boolean", + default: "true", + description: "Whether clearing also empties the input field value", + }, ]; const OptionsTable = ({ options }: { options: typeof clockOptions }) => ( @@ -388,6 +428,14 @@ export default function OptionsPage() { <OptionsTable options={callbacksOptions} /> </Section> + <Section icon={Trash2} title="Clear Behavior Options"> + <p className="text-muted-foreground mb-4"> + Control clear button behavior via{" "} + <code className="text-primary">clearBehavior</code>: + </p> + <OptionsTable options={clearBehaviorOptions} /> + </Section> + <Section icon={Palette} title="Available Themes"> <p className="text-muted-foreground mb-6"> Choose from 10 built-in themes via{" "} diff --git a/docs-app/app/docs/changelog/page.tsx b/docs-app/app/docs/changelog/page.tsx index 429ea75..748b8e8 100644 --- a/docs-app/app/docs/changelog/page.tsx +++ b/docs-app/app/docs/changelog/page.tsx @@ -59,6 +59,40 @@ function ChangeSection({ ); } +const CHANGELOG_420 = { + added: [ + { + title: "Wheel mode", + description: + "Scroll-spinner interface replacing the analog clock face. Enable via ui.mode: 'wheel'. Supports 12h/24h, all themes, disabled time, and keyboard navigation", + }, + { + title: "Clear button", + description: + "Reset time selection with a dedicated clear button. Enabled by default via ui.clearButton option", + }, + { + title: "clearBehavior.clearInput option", + description: + "Control whether clearing also empties the input field value (default: true)", + }, + { + title: "labels.clear option", + description: 'Customize the clear button text (default: "Clear")', + }, + { + title: "onClear callback and clear event", + description: + "New callback and EventEmitter event with previousValue payload", + }, + { + title: "ClearEventData and ClearBehaviorOptions types", + description: + "Exported TypeScript types for clear button configuration and event data", + }, + ], +}; + const CHANGELOG_417 = { fixed: [ { @@ -357,9 +391,20 @@ export default function ChangelogPage() { variant="purple" className="mb-6" > - <strong>v4.1.7</strong> - Released March 8, 2026 + <strong>v4.2.0</strong> - Released March 13, 2026 </InfoBox> + <Section icon={History} title="Version 4.2.0 - March 13, 2026"> + <div className="space-y-4"> + <ChangeSection + icon={Sparkles} + label="Added" + color="green-500" + items={CHANGELOG_420.added} + /> + </div> + </Section> + <Section icon={Bug} title="Version 4.1.7 - March 8, 2026"> <div className="space-y-4"> <ChangeSection diff --git a/docs-app/app/docs/configuration/page.tsx b/docs-app/app/docs/configuration/page.tsx index d53f11d..2440e4c 100644 --- a/docs-app/app/docs/configuration/page.tsx +++ b/docs-app/app/docs/configuration/page.tsx @@ -1,6 +1,15 @@ import { CodeBlock } from "@/components/code-block"; import { Section } from "@/components/section"; -import { Settings, Tag, Layout, Lock, Clock, Zap, Bell } from "lucide-react"; +import { + Settings, + Tag, + Layout, + Lock, + Clock, + Zap, + Bell, + Trash2, +} from "lucide-react"; import { InfoBox } from "@/components/info-box"; export const metadata = { @@ -38,6 +47,12 @@ const clockOptions = [ default: "undefined", description: "Disable specific times", }, + { + name: "smoothHourSnap", + type: "boolean", + default: "true", + description: "Smooth hour dragging with snap", + }, { name: "currentTime", type: "boolean | object", @@ -119,6 +134,18 @@ const uiOptions = [ default: "undefined", description: "Inline mode config", }, + { + name: "clearButton", + type: "boolean", + default: "true", + description: "Show clear button", + }, + { + name: "mode", + type: "clock | wheel", + default: "clock", + description: "Picker mode", + }, ]; const labelsOptions = [ @@ -155,6 +182,12 @@ const labelsOptions = [ default: "Minute", description: "Mobile minute", }, + { + name: "clear", + type: "string", + default: "Clear", + description: "Clear button text", + }, ]; const behaviorOptions = [ @@ -239,6 +272,21 @@ const callbacksOptions = [ default: "undefined", description: "Error occurred", }, + { + name: "onClear", + type: "function", + default: "undefined", + description: "Time cleared", + }, +]; + +const clearBehaviorOptions = [ + { + name: "clearInput", + type: "boolean", + default: "true", + description: "Whether clearing also empties the input", + }, ]; function OptionsTable({ options, title }: { options: any[]; title?: string }) { @@ -335,6 +383,13 @@ export default function ConfigurationPage() { <OptionsTable options={behaviorOptions} /> </Section> + <Section icon={Trash2} title="Clear Behavior Options"> + <p className="text-muted-foreground mb-4"> + Control clear button behavior: + </p> + <OptionsTable options={clearBehaviorOptions} /> + </Section> + <Section icon={Bell} title="Callbacks Options"> <p className="text-muted-foreground mb-4"> Event handlers for user interactions: diff --git a/docs-app/app/docs/features/clear-button/page.tsx b/docs-app/app/docs/features/clear-button/page.tsx new file mode 100644 index 0000000..af8fe5c --- /dev/null +++ b/docs-app/app/docs/features/clear-button/page.tsx @@ -0,0 +1,184 @@ +import { CodeBlock } from "@/components/code-block"; +import { Section } from "@/components/section"; +import { InfoBox } from "@/components/info-box"; +import { Trash2, Settings, Bell, Code2 } from "lucide-react"; + +export const metadata = { + title: "Clear Button - Timepicker-UI", + description: "Reset time selection with a dedicated clear button", +}; + +export default function ClearButtonPage() { + return ( + <div> + <div className="mb-12"> + <h1 className="text-4xl font-bold tracking-tight mb-4 text-foreground"> + Clear Button + </h1> + <p className="text-lg text-muted-foreground"> + Reset time selection with a dedicated button in the picker footer + </p> + </div> + + <InfoBox + title="Available since v4.2.0" + variant="emerald" + className="mb-8" + > + The clear button is <strong>enabled by default</strong> via{" "} + <code>ui.clearButton: true</code>. It resets the clock hands to 12:00, + disables the confirm button, and optionally empties the input value. + </InfoBox> + + <Section icon={Trash2} title="Basic Usage"> + <p className="text-muted-foreground mb-4"> + The clear button appears automatically. No extra configuration needed: + </p> + <CodeBlock + code={`const picker = new TimepickerUI(input); +picker.create(); +// Clear button is visible by default`} + language="typescript" + /> + </Section> + + <Section icon={Settings} title="Disable Clear Button"> + <p className="text-muted-foreground mb-4"> + Set <code className="text-primary">ui.clearButton: false</code> to + hide it: + </p> + <CodeBlock + code={`new TimepickerUI(input, { + ui: { clearButton: false } +}).create();`} + language="typescript" + /> + </Section> + + <Section icon={Settings} title="Clear Behavior Options"> + <p className="text-muted-foreground mb-4"> + Use <code className="text-primary">clearBehavior</code> to control + what happens when the user clicks Clear: + </p> + <CodeBlock + code={`new TimepickerUI(input, { + clearBehavior: { + clearInput: false // Keep the input value after clearing + } +}).create();`} + language="typescript" + /> + <div className="mt-4 overflow-x-auto rounded-lg border border-border"> + <table className="w-full text-sm"> + <thead className="bg-muted/50"> + <tr className="border-b border-border"> + <th className="px-4 py-3 text-left font-semibold text-foreground"> + Option + </th> + <th className="px-4 py-3 text-left font-semibold text-foreground"> + Type + </th> + <th className="px-4 py-3 text-left font-semibold text-foreground"> + Default + </th> + <th className="px-4 py-3 text-left font-semibold text-foreground"> + Description + </th> + </tr> + </thead> + <tbody> + <tr> + <td className="px-4 py-3"> + <code className="text-primary bg-primary/10 px-2 py-1 rounded text-xs font-mono"> + clearInput + </code> + </td> + <td className="px-4 py-3 text-muted-foreground font-mono text-xs"> + boolean + </td> + <td className="px-4 py-3"> + <code className="text-xs">true</code> + </td> + <td className="px-4 py-3 text-muted-foreground"> + Whether clearing also empties the input field value + </td> + </tr> + </tbody> + </table> + </div> + </Section> + + <Section icon={Code2} title="Custom Label"> + <p className="text-muted-foreground mb-4"> + Customize the button text with{" "} + <code className="text-primary">labels.clear</code>: + </p> + <CodeBlock + code={`new TimepickerUI(input, { + labels: { clear: 'Reset' } +}).create();`} + language="typescript" + /> + </Section> + + <Section icon={Bell} title="Clear Event"> + <p className="text-muted-foreground mb-4"> + Listen for the clear event via EventEmitter or callback: + </p> + <div className="space-y-6"> + <div className="rounded-lg border border-border bg-card p-6"> + <h3 className="font-semibold mb-3 text-foreground">EventEmitter</h3> + <CodeBlock + code={`picker.on('clear', (data) => { + console.log('Cleared! Previous value:', data.previousValue); +});`} + language="typescript" + /> + </div> + <div className="rounded-lg border border-border bg-card p-6"> + <h3 className="font-semibold mb-3 text-foreground"> + Callback option + </h3> + <CodeBlock + code={`new TimepickerUI(input, { + callbacks: { + onClear: (data) => { + console.log('Cleared! Previous value:', data.previousValue); + } + } +}).create();`} + language="typescript" + /> + </div> + </div> + </Section> + + <Section icon={Settings} title="Behavior Details"> + <ul className="space-y-2 text-muted-foreground ml-4 list-disc list-inside"> + <li>Clock hands reset to the 12:00 (neutral) position</li> + <li> + Confirm (OK) button becomes disabled until a new time is selected + </li> + <li>Clear button auto-disables when no time is selected</li> + <li> + Screen reader announces "Time selection cleared" for + accessibility + </li> + </ul> + </Section> + + <Section icon={Code2} title="TypeScript Types"> + <CodeBlock + code={`import type { + ClearEventData, + ClearBehaviorOptions +} from 'timepicker-ui'; + +// ClearEventData: { previousValue: string } +// ClearBehaviorOptions: { clearInput: boolean }`} + language="typescript" + /> + </Section> + </div> + ); +} diff --git a/docs-app/app/docs/features/wheel-mode/page.tsx b/docs-app/app/docs/features/wheel-mode/page.tsx new file mode 100644 index 0000000..62899c4 --- /dev/null +++ b/docs-app/app/docs/features/wheel-mode/page.tsx @@ -0,0 +1,208 @@ +import { CodeBlock } from "@/components/code-block"; +import { Section } from "@/components/section"; +import { InfoBox } from "@/components/info-box"; +import { Disc3, Settings, Palette, Keyboard, Zap } from "lucide-react"; + +export const metadata = { + title: "Wheel Mode - Timepicker-UI", + description: + "Scroll-spinner interface that replaces the analog clock face with touch-friendly wheels", +}; + +export default function WheelModePage() { + return ( + <div> + <div className="mb-12"> + <h1 className="text-4xl font-bold tracking-tight mb-4 text-foreground"> + Wheel Mode + </h1> + <p className="text-lg text-muted-foreground"> + Replace the analog clock face with a touch-friendly scroll-spinner + interface + </p> + </div> + + <InfoBox + title="Available since v4.2.0" + variant="emerald" + className="mb-8" + > + Set <code>ui.mode: 'wheel'</code> to switch from the default + analog clock to scroll wheels. The header (hour/minute inputs, AM/PM + toggle) and footer (OK/Cancel/Clear buttons) remain unchanged. + </InfoBox> + + <Section icon={Disc3} title="Basic Usage"> + <p className="text-muted-foreground mb-4"> + Enable wheel mode with a single option: + </p> + <CodeBlock + code={`const picker = new TimepickerUI(input, { + ui: { mode: 'wheel' } +}); +picker.create();`} + language="typescript" + /> + </Section> + + <Section icon={Settings} title="12h and 24h Support"> + <p className="text-muted-foreground mb-4"> + Wheel mode respects the{" "} + <code className="text-primary">clock.type</code> setting. In 12h mode + an AM/PM column appears automatically. + </p> + <div className="space-y-6"> + <div className="rounded-lg border border-border bg-card p-6"> + <h3 className="font-semibold mb-3 text-foreground"> + 12h Wheel (default) + </h3> + <CodeBlock + code={`new TimepickerUI(input, { + ui: { mode: 'wheel' } +}).create();`} + language="typescript" + /> + </div> + + <div className="rounded-lg border border-border bg-card p-6"> + <h3 className="font-semibold mb-3 text-foreground">24h Wheel</h3> + <CodeBlock + code={`new TimepickerUI(input, { + clock: { type: '24h' }, + ui: { mode: 'wheel' } +}).create();`} + language="typescript" + /> + </div> + </div> + </Section> + + <Section icon={Palette} title="Theme Compatibility"> + <p className="text-muted-foreground mb-4"> + Wheel mode inherits the active theme via CSS variables. All 10 + built-in themes work out of the box. + </p> + <CodeBlock + code={`// Dark theme wheel +new TimepickerUI(input, { + ui: { mode: 'wheel', theme: 'dark' } +}).create(); + +// M3 green theme wheel +new TimepickerUI(input, { + ui: { mode: 'wheel', theme: 'm3-green' } +}).create(); + +// Cyberpunk theme wheel +new TimepickerUI(input, { + ui: { mode: 'wheel', theme: 'cyberpunk' } +}).create();`} + language="typescript" + /> + </Section> + + <Section icon={Settings} title="Minute Steps"> + <p className="text-muted-foreground mb-4"> + Use <code className="text-primary">clock.incrementMinutes</code> to + control the step between minute wheel items. + </p> + <CodeBlock + code={`new TimepickerUI(input, { + clock: { incrementMinutes: 5 }, + ui: { mode: 'wheel' } +}).create();`} + language="typescript" + /> + </Section> + + <Section icon={Zap} title="Events"> + <p className="text-muted-foreground mb-4"> + Wheel mode emits all standard events plus two wheel-specific events + for tracking scroll interactions: + </p> + <CodeBlock + code={`const picker = new TimepickerUI(input, { + ui: { mode: 'wheel' } +}); +picker.create(); + +// Wheel-specific events +picker.on('wheel:scroll:start', (data) => { + console.log('Scroll started on:', data.column); + // data.column: 'hours' | 'minutes' | 'ampm' +}); + +picker.on('wheel:scroll:end', (data) => { + console.log('Column:', data.column, 'snapped to:', data.value); + console.log('Previous value:', data.previousValue); +}); + +// All standard events also work +picker.on('select:hour', (data) => { + console.log('Hour scrolled to:', data.hour); +}); + +picker.on('select:minute', (data) => { + console.log('Minute scrolled to:', data.minutes); +}); + +picker.on('update', (data) => { + console.log('Time changed:', data.hour, data.minutes); +}); + +picker.on('confirm', (data) => { + console.log('Confirmed:', data.hour, data.minutes, data.type); +}); + +picker.on('clear', (data) => { + console.log('Cleared, previous:', data.previousValue); +});`} + language="typescript" + /> + <div className="mt-4 rounded-lg border border-border bg-card p-4"> + <p className="text-sm text-muted-foreground mb-2"> + <strong>Wheel-specific events:</strong>{" "} + <code>wheel:scroll:start</code>, <code>wheel:scroll:end</code> + </p> + <p className="text-sm text-muted-foreground"> + <strong>Standard events:</strong> <code>confirm</code>,{" "} + <code>cancel</code>, <code>open</code>, <code>update</code>,{" "} + <code>select:hour</code>, <code>select:minute</code>,{" "} + <code>select:am</code>, <code>select:pm</code>, <code>error</code>,{" "} + <code>clear</code> + </p> + </div> + </Section> + + <Section icon={Keyboard} title="Keyboard Navigation"> + <p className="text-muted-foreground mb-4"> + Wheel mode supports full keyboard navigation: + </p> + <ul className="space-y-2 text-muted-foreground ml-4 list-disc list-inside"> + <li> + <strong>Arrow Up / Down</strong> — scroll one item + </li> + <li> + <strong>Tab</strong> — move between columns (hours → minutes → + AM/PM) + </li> + </ul> + </Section> + + <Section icon={Settings} title="Limitations"> + <div className="rounded-lg border border-orange-200 dark:border-orange-800 bg-orange-50 dark:bg-orange-900/20 p-6"> + <ul className="space-y-2 text-sm text-orange-800 dark:text-orange-300 list-disc list-inside"> + <li> + Range plugin (<code>range.enabled</code>) is not supported in + wheel mode + </li> + <li> + <code>ui.mobile</code> is ignored — wheel layout is always the + same regardless of viewport + </li> + </ul> + </div> + </Section> + </div> + ); +} diff --git a/docs-app/app/docs/whats-new/page.tsx b/docs-app/app/docs/whats-new/page.tsx index d8f5c81..46ac665 100644 --- a/docs-app/app/docs/whats-new/page.tsx +++ b/docs-app/app/docs/whats-new/page.tsx @@ -34,22 +34,35 @@ export default function WhatsNewPage() { </div> <InfoBox - title="Version 4.1.1 Released!" + title="Version 4.2.0 Released!" variant="emerald" className="mb-8" > <p className="mb-3"> - <strong>February 1, 2026</strong> - Bug fix and quality improvements + <strong>March 13, 2026</strong> - Wheel mode & clear button </p> <p className="text-sm">What's new:</p> <ul className="mt-2 space-y-1 text-sm ml-4"> <li> - <strong>Mobile input validation fix</strong> - Invalid time values - (e.g., 169:70) now auto-clamp to valid ranges when typing + <strong>Wheel mode</strong> - Scroll-spinner interface replacing the + analog clock face. Enable via{" "} + <code>ui.mode: 'wheel'</code> </li> <li> - <strong>Test coverage</strong> - Expanded to 1100+ tests with 90%+ - code coverage + <strong>Clear button</strong> - Reset time selection with a + dedicated button, enabled by default via <code>ui.clearButton</code> + </li> + <li> + <strong>clearBehavior options</strong> - Control whether clearing + empties the input value with <code>clearBehavior.clearInput</code> + </li> + <li> + <strong>onClear callback & event</strong> - New callback and + EventEmitter event with <code>previousValue</code> payload + </li> + <li> + <strong>New exported types</strong> - <code>ClearEventData</code>{" "} + and <code>ClearBehaviorOptions</code> </li> </ul> <Link diff --git a/docs-app/app/examples/features/clear-button/page.tsx b/docs-app/app/examples/features/clear-button/page.tsx new file mode 100644 index 0000000..470c95f --- /dev/null +++ b/docs-app/app/examples/features/clear-button/page.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { Section } from "@/components/section"; +import { TimepickerExample } from "@/components/examples/timepicker-example"; +import { Trash2, Settings, Bell } from "lucide-react"; + +export default function ClearButtonPage() { + return ( + <div> + <div className="mb-12"> + <h1 className="text-4xl font-bold tracking-tight mb-4 text-foreground"> + Clear Button + </h1> + <p className="text-lg text-muted-foreground"> + Reset time selection with a dedicated clear button + </p> + </div> + + <Section icon={Trash2} title="Default (Enabled)"> + <p className="text-muted-foreground mb-4"> + The clear button is enabled by default in all pickers: + </p> + <TimepickerExample + code={`const picker = new TimepickerUI(input); +picker.create(); +// Clear button is visible by default`} + options={{}} + /> + </Section> + + <Section icon={Settings} title="Disabled Clear Button"> + <p className="text-muted-foreground mb-4">Hide the clear button:</p> + <TimepickerExample + code={`new TimepickerUI(input, { + ui: { clearButton: false } +}).create();`} + options={{ + ui: { clearButton: false }, + }} + /> + </Section> + + <Section icon={Settings} title="Keep Input Value on Clear"> + <p className="text-muted-foreground mb-4"> + Clear the clock state but keep the input value: + </p> + <TimepickerExample + code={`new TimepickerUI(input, { + clearBehavior: { clearInput: false } +}).create();`} + options={{ + clearBehavior: { clearInput: false }, + }} + /> + </Section> + + <Section icon={Trash2} title="Custom Label"> + <p className="text-muted-foreground mb-4"> + Use a custom label for the clear button: + </p> + <TimepickerExample + code={`new TimepickerUI(input, { + labels: { clear: 'Reset' } +}).create();`} + options={{ + labels: { clear: "Reset" }, + }} + /> + </Section> + + <Section icon={Bell} title="With Clear Callback"> + <p className="text-muted-foreground mb-4"> + Handle the clear event via callback: + </p> + <TimepickerExample + code={`new TimepickerUI(input, { + callbacks: { + onClear: (data) => { + console.log('Cleared! Previous:', data.previousValue); + } + } +}).create();`} + options={{ + callbacks: { + onClear: (data: { previousValue: string }) => { + console.log("Cleared! Previous:", data.previousValue); + }, + }, + }} + /> + </Section> + </div> + ); +} diff --git a/docs-app/app/examples/features/wheel-mode/page.tsx b/docs-app/app/examples/features/wheel-mode/page.tsx new file mode 100644 index 0000000..e52160e --- /dev/null +++ b/docs-app/app/examples/features/wheel-mode/page.tsx @@ -0,0 +1,108 @@ +"use client"; + +import { Section } from "@/components/section"; +import { TimepickerExample } from "@/components/examples/timepicker-example"; +import { Disc3, Palette, Settings } from "lucide-react"; + +export default function WheelModePage() { + return ( + <div> + <div className="mb-12"> + <h1 className="text-4xl font-bold tracking-tight mb-4 text-foreground"> + Wheel Mode + </h1> + <p className="text-lg text-muted-foreground"> + Scroll-spinner interface replacing the analog clock face + </p> + </div> + + <Section icon={Disc3} title="12h Wheel"> + <p className="text-muted-foreground mb-4"> + Basic wheel mode with 12-hour format and AM/PM column: + </p> + <TimepickerExample + code={`new TimepickerUI(input, { + ui: { mode: 'wheel' } +}).create();`} + options={{ + ui: { mode: "wheel" }, + }} + /> + </Section> + + <Section icon={Disc3} title="24h Wheel"> + <p className="text-muted-foreground mb-4"> + Wheel mode with 24-hour format (no AM/PM column): + </p> + <TimepickerExample + code={`new TimepickerUI(input, { + clock: { type: '24h' }, + ui: { mode: 'wheel' } +}).create();`} + options={{ + clock: { type: "24h" }, + ui: { mode: "wheel" }, + }} + /> + </Section> + + <Section icon={Palette} title="Wheel + Dark Theme"> + <p className="text-muted-foreground mb-4"> + Wheel mode styled with the dark theme: + </p> + <TimepickerExample + code={`new TimepickerUI(input, { + ui: { mode: 'wheel', theme: 'dark' } +}).create();`} + options={{ + ui: { mode: "wheel", theme: "dark" }, + }} + /> + </Section> + + <Section icon={Palette} title="Wheel + M3 Theme"> + <p className="text-muted-foreground mb-4"> + Wheel mode with Material Design 3 green theme: + </p> + <TimepickerExample + code={`new TimepickerUI(input, { + ui: { mode: 'wheel', theme: 'm3-green' } +}).create();`} + options={{ + ui: { mode: "wheel", theme: "m3-green" }, + }} + /> + </Section> + + <Section icon={Palette} title="Wheel + Cyberpunk Theme"> + <p className="text-muted-foreground mb-4"> + Wheel mode with the cyberpunk theme: + </p> + <TimepickerExample + code={`new TimepickerUI(input, { + ui: { mode: 'wheel', theme: 'cyberpunk' } +}).create();`} + options={{ + ui: { mode: "wheel", theme: "cyberpunk" }, + }} + /> + </Section> + + <Section icon={Settings} title="Wheel + 5 Minute Steps"> + <p className="text-muted-foreground mb-4"> + Wheel mode with 5-minute increment between wheel items: + </p> + <TimepickerExample + code={`new TimepickerUI(input, { + clock: { incrementMinutes: 5 }, + ui: { mode: 'wheel' } +}).create();`} + options={{ + clock: { incrementMinutes: 5 }, + ui: { mode: "wheel" }, + }} + /> + </Section> + </div> + ); +} diff --git a/docs-app/components/docs-sidebar.tsx b/docs-app/components/docs-sidebar.tsx index fc409f6..6da684e 100644 --- a/docs-app/components/docs-sidebar.tsx +++ b/docs-app/components/docs-sidebar.tsx @@ -32,6 +32,8 @@ const navigation = [ { title: "Inline Mode", href: "/docs/features/inline-mode" }, { title: "Mobile Support", href: "/docs/features/mobile" }, { title: "Disabled Time", href: "/docs/features/disabled-time" }, + { title: "Wheel Mode", href: "/docs/features/wheel-mode" }, + { title: "Clear Button", href: "/docs/features/clear-button" }, { title: "Validation", href: "/docs/features/validation" }, { title: "Plugins", href: "/docs/features/plugins" }, ], diff --git a/docs-app/components/examples-sidebar.tsx b/docs-app/components/examples-sidebar.tsx index 10b3bac..6369865 100644 --- a/docs-app/components/examples-sidebar.tsx +++ b/docs-app/components/examples-sidebar.tsx @@ -53,6 +53,12 @@ const navigation: NavigationSection[] = [ { title: "Increment Steps", href: "/examples/features/increment" }, { title: "Focus Trap", href: "/examples/features/focus-trap" }, { title: "Switch Icon", href: "/examples/features/switch-icon" }, + { + title: "Smooth Hour Snap", + href: "/examples/features/smooth-hour-snap", + }, + { title: "Wheel Mode", href: "/examples/features/wheel-mode" }, + { title: "Clear Button", href: "/examples/features/clear-button" }, ], }, { diff --git a/package.json b/package.json index b022bcc..39ad663 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "timepicker-ui", - "version": "4.1.7", + "version": "4.2.0", "description": "timepicker-ui is a customizable time picker library built with TypeScript, inspired by Google's Material Design. Lightweight, themeable, and easy to integrate.", "main": "./dist/index.cjs", "module": "./dist/index.js", From fc0abec74ff991ccd07739b217ff0511061f56d5 Mon Sep 17 00:00:00 2001 From: pglejzer <glejzerpiotr@gmail.com> Date: Sat, 14 Mar 2026 15:44:48 +0100 Subject: [PATCH 02/10] update docs --- docs-app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-app/package.json b/docs-app/package.json index 0bebe36..e82222e 100644 --- a/docs-app/package.json +++ b/docs-app/package.json @@ -20,7 +20,7 @@ "react": "19.2.4", "react-dom": "19.2.4", "recharts": "^3.7.0", - "timepicker-ui": "4.1.7", + "timepicker-ui": "4.2.0", "timepicker-ui-react": "1.1.0" }, "devDependencies": { From 1b25d1658b7c186e5c809cb68415440a7462ef64 Mon Sep 17 00:00:00 2001 From: pglejzer <glejzerpiotr@gmail.com> Date: Sat, 14 Mar 2026 15:54:13 +0100 Subject: [PATCH 03/10] update docs --- docs-app/app/page.tsx | 48 +++++++++++++++++-- .../examples/timepicker-example.tsx | 6 ++- 2 files changed, 50 insertions(+), 4 deletions(-) diff --git a/docs-app/app/page.tsx b/docs-app/app/page.tsx index 04799ac..a2eb04a 100644 --- a/docs-app/app/page.tsx +++ b/docs-app/app/page.tsx @@ -17,6 +17,7 @@ import { Paintbrush, Languages, Timer, + Disc3, } from "lucide-react"; import { TimepickerExample } from "@/components/examples/timepicker-example"; @@ -75,6 +76,27 @@ const picker = new TimepickerUI(input, { ); } +function WheelExample() { + return ( + <TimepickerExample + code={`import { TimepickerUI, PluginRegistry } from 'timepicker-ui'; +import { WheelPlugin } from 'timepicker-ui/plugins/wheel'; + +PluginRegistry.register(WheelPlugin); + +const picker = new TimepickerUI(input, { + ui: { mode: 'wheel' }, +});`} + options={{ + ui: { mode: "wheel" }, + }} + plugins={["wheel"]} + inputPlaceholder="Select time" + showCode={false} + /> + ); +} + const features = [ { icon: Palette, @@ -209,8 +231,8 @@ export default function Home() { > <Sparkles className="h-4 w-4 flex-shrink-0" /> <span> - <span className="font-medium">New:</span> Version 4.1.1 with - Range Plugin and improved input validation! + <span className="font-medium">New:</span> Version 4.2.0 — Wheel + Plugin, Clear Button and more! </span> </Link> </div> @@ -260,7 +282,7 @@ export default function Home() { Try the timepicker right here with different configurations </p> </div> - <div className="mx-auto max-w-6xl grid gap-8 lg:grid-cols-3"> + <div className="mx-auto max-w-6xl grid gap-8 sm:grid-cols-2 lg:grid-cols-4"> <div className="rounded-xl border border-border bg-card p-6"> <div className="flex items-center gap-3 mb-4"> <div className="p-2 rounded-lg bg-primary/10"> @@ -312,6 +334,26 @@ export default function Home() { </div> <RangeExample /> </div> + + <div className="rounded-xl border border-amber-500/30 bg-gradient-to-br from-amber-500/5 to-transparent p-6"> + <div className="flex items-center gap-3 mb-4"> + <div className="p-2 rounded-lg bg-amber-500/10"> + <Disc3 className="h-5 w-5 text-amber-500" /> + </div> + <div> + <h3 className="font-semibold text-foreground flex items-center gap-2"> + Wheel Plugin + <span className="text-xs font-medium px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-600 dark:text-amber-400"> + NEW + </span> + </h3> + <p className="text-sm text-muted-foreground"> + Scroll-spinner interface + </p> + </div> + </div> + <WheelExample /> + </div> </div> <div className="mt-12 text-center"> <Link diff --git a/docs-app/components/examples/timepicker-example.tsx b/docs-app/components/examples/timepicker-example.tsx index 47b1cee..2a8de54 100644 --- a/docs-app/components/examples/timepicker-example.tsx +++ b/docs-app/components/examples/timepicker-example.tsx @@ -22,7 +22,7 @@ interface TimepickerExampleProps { options?: Record<string, unknown>; inputPlaceholder?: string; showCode?: boolean; - plugins?: Array<"range" | "timezone">; + plugins?: Array<"range" | "timezone" | "wheel">; } export function TimepickerExample({ @@ -57,6 +57,10 @@ export function TimepickerExample({ await import("timepicker-ui/plugins/timezone"); PluginRegistry.register(TimezonePlugin); } + if (plugins.includes("wheel")) { + const { WheelPlugin } = await import("timepicker-ui/plugins/wheel"); + PluginRegistry.register(WheelPlugin); + } if ( typeof window === "undefined" || From 9506539cb01a9ac59e2e38bbdcc724a18b0d541c Mon Sep 17 00:00:00 2001 From: pglejzer <glejzerpiotr@gmail.com> Date: Sun, 15 Mar 2026 19:35:23 +0100 Subject: [PATCH 04/10] update --- .github/agents/feature-auditor.agent.md | 279 ++ CHANGELOG.md | 15 +- README.md | 79 +- app/docs/examples/api-demo.ts | 161 ++ app/docs/examples/basic.ts | 21 + app/docs/examples/clear-button.ts | 90 + app/docs/examples/disabled.ts | 164 ++ app/docs/examples/features.ts | 249 ++ app/docs/examples/hide-footer.ts | 21 + app/docs/examples/range-themes.ts | 62 + app/docs/examples/setup.ts | 75 + app/docs/examples/themes.ts | 52 + app/docs/examples/timezone-advanced.ts | 120 + app/docs/examples/timezone-themes.ts | 62 + app/docs/examples/wheel.ts | 314 +++ app/docs/index.html | 2329 +---------------- app/docs/index.ts | 999 +------ app/docs/partials/advanced-clear.html | 483 ++++ app/docs/partials/basic-themes.html | 474 ++++ app/docs/partials/disabled.html | 464 ++++ app/docs/partials/hide-footer.html | 150 ++ app/docs/partials/popover-features.html | 636 +++++ app/docs/partials/range.html | 255 ++ app/docs/partials/timezone-api.html | 454 ++++ app/docs/partials/wheel.html | 1030 ++++++++ app/package.json | 4 +- app/src/managers/ModalManager.ts | 10 +- app/src/managers/clock/ClockSystem.ts | 2 + .../clock/handlers/ClockSystemInitializer.ts | 2 +- .../managers/clock/renderer/ClockRenderer.ts | 6 + app/src/managers/clock/types.ts | 1 + app/src/managers/config/InputValueHandler.ts | 5 +- .../managers/plugins/range/RangeManager.ts | 14 + app/src/managers/plugins/range/RangeState.ts | 5 + .../managers/plugins/wheel/PopoverManager.ts | 179 ++ .../plugins/wheel/WheelDragHandler.ts | 12 +- .../plugins/wheel/WheelEventHandler.ts | 66 +- .../managers/plugins/wheel/WheelManager.ts | 44 +- .../managers/plugins/wheel/WheelRenderer.ts | 125 +- .../plugins/wheel/WheelScrollHandler.ts | 28 +- app/src/managers/plugins/wheel/index.ts | 1 + app/src/styles/partials/_buttons.scss | 2 +- app/src/styles/partials/_clock.scss | 4 + app/src/styles/partials/_wheel.scss | 81 +- .../styles/themes/theme-crane-straight.scss | 5 + app/src/styles/themes/theme-glassmorphic.scss | 1 + app/src/styles/themes/theme-m2.scss | 2 + app/src/styles/variables.scss | 10 + app/src/timepicker/Lifecycle.ts | 103 +- app/src/timepicker/TimepickerUI.ts | 133 +- app/src/types/options.d.ts | 46 +- app/src/types/types.d.ts | 6 +- app/src/utils/options/defaults.ts | 31 +- app/src/utils/template/index.ts | 152 +- app/src/utils/template/wheel.ts | 27 +- .../managers/AnimationManager.edge.test.ts | 95 + .../config/InputValueHandler.edge.test.ts | 165 ++ .../managers/config/InputValueHandler.test.ts | 105 +- .../wheel/ColumnDragState.edge.test.ts | 101 + .../wheel/WheelEventHandler.edge.test.ts | 288 ++ .../plugins/wheel/WheelEventHandler.test.ts | 20 +- .../plugins/wheel/WheelHeaderSync.test.ts | 333 +++ .../plugins/wheel/WheelHideDisabled.test.ts | 526 ++++ .../wheel/WheelIntervalDisabled.test.ts | 393 +++ .../plugins/wheel/WheelRenderer.edge.test.ts | 135 + .../wheel/WheelScrollHandler.edge.test.ts | 126 + .../plugins/wheel/WheelScrollHandler.test.ts | 132 +- .../unit/timepicker/CoreState.edge.test.ts | 147 ++ .../unit/utils/EventEmitter.edge.test.ts | 122 + app/tsconfig.json | 2 +- app/webpack.config.js | 5 + docs-app/app/docs/api/options/page.tsx | 45 +- docs-app/app/docs/changelog/page.tsx | 24 +- docs-app/app/docs/configuration/page.tsx | 39 +- .../app/docs/features/wheel-mode/page.tsx | 155 +- docs-app/app/docs/whats-new/page.tsx | 30 +- docs-app/app/page.tsx | 2 +- docs-app/components/footer.tsx | 2 +- 78 files changed, 9602 insertions(+), 3535 deletions(-) create mode 100644 .github/agents/feature-auditor.agent.md create mode 100644 app/docs/examples/api-demo.ts create mode 100644 app/docs/examples/basic.ts create mode 100644 app/docs/examples/clear-button.ts create mode 100644 app/docs/examples/disabled.ts create mode 100644 app/docs/examples/features.ts create mode 100644 app/docs/examples/hide-footer.ts create mode 100644 app/docs/examples/range-themes.ts create mode 100644 app/docs/examples/setup.ts create mode 100644 app/docs/examples/themes.ts create mode 100644 app/docs/examples/timezone-advanced.ts create mode 100644 app/docs/examples/timezone-themes.ts create mode 100644 app/docs/examples/wheel.ts create mode 100644 app/docs/partials/advanced-clear.html create mode 100644 app/docs/partials/basic-themes.html create mode 100644 app/docs/partials/disabled.html create mode 100644 app/docs/partials/hide-footer.html create mode 100644 app/docs/partials/popover-features.html create mode 100644 app/docs/partials/range.html create mode 100644 app/docs/partials/timezone-api.html create mode 100644 app/docs/partials/wheel.html create mode 100644 app/src/managers/plugins/wheel/PopoverManager.ts create mode 100644 app/tests/unit/managers/AnimationManager.edge.test.ts create mode 100644 app/tests/unit/managers/config/InputValueHandler.edge.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/ColumnDragState.edge.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelEventHandler.edge.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelHeaderSync.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelHideDisabled.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelIntervalDisabled.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelRenderer.edge.test.ts create mode 100644 app/tests/unit/managers/plugins/wheel/WheelScrollHandler.edge.test.ts create mode 100644 app/tests/unit/timepicker/CoreState.edge.test.ts create mode 100644 app/tests/unit/utils/EventEmitter.edge.test.ts diff --git a/.github/agents/feature-auditor.agent.md b/.github/agents/feature-auditor.agent.md new file mode 100644 index 0000000..5c3494c --- /dev/null +++ b/.github/agents/feature-auditor.agent.md @@ -0,0 +1,279 @@ +--- +description: "Use when: feature audit, competitive analysis, missing features, library comparison, UX gaps, API design review, feature completeness, ecosystem comparison, quality gaps, production readiness, strategic review, what's missing, improvement roadmap, best practices comparison, top-tier quality" +tools: [read, search, web] +--- + +You are a **Library Feature Auditor** for the **timepicker-ui** library. Your job is to analyze the library's implementation, compare it against top-tier ecosystem competitors, and produce a structured gap analysis that identifies what is missing for the library to reach production-grade, ecosystem-leading quality. + +## Project Context + +- **Library type**: Framework-agnostic vanilla TypeScript timepicker component +- **Runtime dependencies**: Zero — fully self-contained +- **Build**: tsup (ESM + CJS) + Rollup (UMD + SCSS themes) +- **Package type**: `"type": "module"` (ESM-first) +- **SSR**: Fully safe — guards all DOM globals +- **Modes**: Default modal, wheel picker, compact-wheel, popover, inline +- **Plugins**: Range (from/to), Timezone selector +- **Themes**: 10+ themes (M2, M3, crane variants, custom) +- **Framework support**: React, Vue 3, Angular, Svelte (documented examples) + +## Competitor Libraries to Benchmark Against + +When auditing, compare against the best available implementations in the ecosystem. Research current leaders — do NOT rely on assumptions. Examples of libraries to check: + +| Category | Libraries to Research | +| --------------------- | --------------------------------------------------------------------------- | +| Timepicker (web) | Flatpickr, Material UI TimePicker, Ant Design TimePicker, react-time-picker | +| Datepicker (patterns) | date-fns, Day.js pickers, Pikaday, Duet Date Picker (a11y reference) | +| UI component kits | Radix UI, Headless UI, Ark UI, Melt UI (architecture and API patterns) | +| Mobile-first | Native iOS/Android time pickers, Capacitor/Ionic time inputs | + +Always **web-search** to confirm which libraries are currently leading and what features they offer. Do not cite stale competitor data. + +## Operating Modes + +### Mode 1 — Full Library Audit + +Analyze the entire codebase and feature set. Cover every evaluation area below. Produce a comprehensive report. + +### Mode 2 — Targeted Audit + +When the user specifies a feature, module, or area (e.g., `wheel picker`, `range plugin`, `API design`, `mobile UX`): + +- Analyze ONLY that area in depth +- Compare with best-in-class implementations of that specific feature +- Identify missing behaviors, UX patterns, edge cases, and optimizations +- Provide a focused report for that area only + +If the user does not specify a mode, default to **Full Library Audit**. + +## Evaluation Areas + +Analyze each of these dimensions. For targeted audits, focus on the dimensions relevant to the specified feature. + +### 1. Feature Completeness + +- What time-related features do competitors offer that this library lacks? +- Are there common UX patterns (duration picker, time range, multi-timezone) missing? +- Are edge cases handled (midnight crossing, DST transitions, 24h/12h, RTL)? +- Are all interaction modes complete (keyboard, mouse, touch, screen reader)? + +### 2. API Ergonomics & Consistency + +- Is the public API intuitive and predictable? +- Are option names consistent and well-documented? +- Is the API surface minimal or bloated? +- Are there redundant or confusing options? +- How does the API compare to competitors' DX quality? +- Is programmatic control complete (open, close, setValue, getValue, destroy)? + +### 3. Accessibility + +- WCAG 2.1 AA compliance gaps +- ARIA attributes correctness and completeness +- Keyboard navigation coverage +- Screen reader announcements for state changes +- Focus management (trap, restoration, visible indicators) +- Reduced motion support +- High contrast mode support +- Compare against Duet Date Picker and Radix UI as accessibility benchmarks + +### 4. Performance & Bundle Size + +- Bundle size compared to competitors (core, with plugins, full) +- Tree-shaking effectiveness +- Runtime performance (DOM operations, reflows, paint cost) +- Memory leaks (listeners, DOM nodes, timers) +- Lazy loading capabilities +- Cold start / initialization cost + +### 5. UX Quality & Interaction Patterns + +- Visual polish and animation quality +- Micro-interactions (hover, focus, active states) +- Error states and validation feedback +- Loading states (if applicable) +- Transition smoothness and timing +- Responsiveness across viewport sizes +- Touch gesture support quality +- Scroll behavior and containment + +### 6. Mobile & Touch Support + +- Touch target sizes (minimum 44x44px) +- Gesture support (swipe, drag on dial) +- Virtual keyboard interaction +- Responsive layout adaptations +- Performance on low-end devices +- Native-like feel compared to iOS/Android pickers + +### 7. Plugin & Extensibility System + +- Can users extend behavior without forking? +- Is there a plugin API or hook system? +- Are events comprehensive enough for external integration? +- Can themes be customized beyond CSS variables? +- Can new input modes be added externally? + +### 8. TypeScript Support + +- Are all public APIs fully typed? +- Are event payloads typed? +- Are option types strict (no `any`, `unknown`, loose unions)? +- Is the DTS output clean and usable? +- Are generics used where appropriate? + +### 9. Documentation & Examples + +- Are all options documented with examples? +- Are there interactive demos? +- Are framework integration guides complete? +- Is there a migration guide between versions? +- Are edge cases documented? +- Is the README competitive with top libraries? + +### 10. Cross-Framework Compatibility + +- Does the library work seamlessly in React, Vue, Angular, Svelte, Solid? +- Are there official wrapper packages? +- Does it work with SSR frameworks (Next.js, Nuxt, Remix, Astro)? +- Web Component / Custom Element support? + +### 11. Test Coverage & Reliability + +- Unit test coverage percentage +- Are critical paths tested (time selection, validation, edge cases)? +- Are accessibility features tested? +- Are plugins tested independently? +- Are there integration or E2E tests? + +## Analysis Workflow + +1. **Determine mode** — full audit or targeted (based on user input) +2. **Research competitors** — web-search for current market leaders and their feature sets +3. **Scan the codebase** — read `app/src/` to understand what exists +4. **Map features** — create a feature matrix (this library vs competitors) +5. **Identify gaps** — what's missing, weak, or below competitor standard +6. **Categorize findings** — Critical / Important / Nice-to-have +7. **Draft recommendations** — practical, actionable improvements +8. **Produce report** — structured output following the format below + +## Key Files to Inspect + +| Area | Files | +| ----------------- | --------------------------------------- | +| Public API | `app/src/timepicker/TimepickerUI.ts` | +| Options/types | `app/src/types/` | +| Core state | `app/src/core/` | +| Managers | `app/src/managers/` | +| Plugins | `app/src/plugins/` | +| Styles & themes | `app/src/styles/` | +| Utilities | `app/src/utils/` | +| Constants | `app/src/constants/` | +| Template (HTML) | `app/src/utils/template/` | +| Tests | `app/tests/` | +| Docs | `app/docs/`, `docs-app/` | +| Package config | `app/package.json`, `app/tsconfig.json` | +| Bundle benchmarks | `bench/` | + +## Output Format + +### For Full Audit + +``` +# Library Feature Audit — timepicker-ui + +## Executive Summary +[2-3 sentence overview of library maturity and biggest gaps] + +## Competitor Landscape +[Brief overview of current market leaders and their key differentiators] + +--- + +## Critical Gaps (P0) +Issues that block production-grade or ecosystem-leading status. + +### [Gap Title] +- **Area**: [evaluation area] +- **Current state**: [what the library does now] +- **Competitor reference**: [how top libraries handle this] +- **Why it matters**: [impact on users/adoption] +- **Recommendation**: [specific improvement to implement] +- **Effort**: [Low / Medium / High] + +--- + +## Important Improvements (P1) +Issues that significantly improve quality but are not blockers. + +### [Improvement Title] +- **Area**: [evaluation area] +- **Current state**: [what exists] +- **Competitor reference**: [best-in-class example] +- **Why it matters**: [impact] +- **Recommendation**: [what to do] +- **Effort**: [Low / Medium / High] + +--- + +## Nice-to-Have Enhancements (P2) +Polish, DX improvements, and forward-looking features. + +### [Enhancement Title] +- **Area**: [evaluation area] +- **Current state**: [what exists] +- **Competitor reference**: [who does this well] +- **Recommendation**: [what to add] +- **Effort**: [Low / Medium / High] + +--- + +## Feature Matrix + +| Feature | timepicker-ui | Competitor A | Competitor B | Competitor C | +| ------------------------ | ------------- | ------------ | ------------ | ------------ | +| [feature] | ✅ / ❌ / 🟡 | ... | ... | ... | + +--- + +## Summary + +| Priority | Count | +| -------- | ----- | +| Critical (P0) | X | +| Important (P1) | X | +| Nice-to-have (P2) | X | +| **Total** | **X** | + +## Recommended Roadmap +[Ordered list of what to tackle first, based on impact-to-effort ratio] +``` + +### For Targeted Audit + +Use the same structure but scoped to the specific feature/area. Replace "Competitor Landscape" with a focused comparison of that feature across competitors. Include a "Deep Dive" section with implementation-level analysis. + +## Rules + +### MUST + +- **Web-search** competitor features before comparing — never assume what competitors offer +- Cite specific competitor versions and feature names +- Reference exact files and line numbers in the codebase +- Provide actionable recommendations, not vague suggestions +- Distinguish between "missing entirely" vs "exists but below standard" +- Consider the library's zero-dependency constraint when recommending features +- Verify browser support for any suggested API (follow ecosystem-freshness rules) +- Be honest about what the library does well — acknowledge strengths + +### MUST NOT + +- Modify any code — this is a read-only analysis agent +- Make recommendations that violate the project's composition-only architecture +- Suggest adding runtime dependencies (zero-dep policy) +- Cite outdated competitor information without verification +- Recommend features that would break SSR safety +- Produce vague findings like "improve accessibility" without specifics +- Ignore the project's existing architectural rules (see copilot-instructions.md) +- Recommend framework-specific code in the core library diff --git a/CHANGELOG.md b/CHANGELOG.md index 776ed66..88bc824 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,16 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 --- -## [4.2.0] - 2026-03-13 +## [4.2.0] - 2026-03-15 ### Added -- Wheel mode — scroll-spinner interface replacing the analog clock face. Enable via `ui.mode: 'wheel'` +- Wheel mode - scroll-spinner interface replacing the analog clock face. Enable via `ui.mode: 'wheel'` +- Compact-wheel mode - headerless wheel picker without the hour/minute inputs header. Enable via `ui.mode: 'compact-wheel'` - Wheel mode supports 12h/24h, all themes, disabled time, setValue/getValue, and keyboard navigation -- Wheel mode emits all standard events (`select:hour`, `select:minute`, `update`, `confirm`, `cancel`, `clear`, `select:am`, `select:pm`, `error`) — no separate API needed -- `wheel:scroll:start` event — fires when a wheel column starts scrolling (includes `column` field) -- `wheel:scroll:end` event — fires when a wheel column snaps to a value (includes `column`, `value`, `previousValue` fields) +- Wheel mode emits all standard events (`select:hour`, `select:minute`, `update`, `confirm`, `cancel`, `clear`, `select:am`, `select:pm`, `error`) - no separate API needed +- `wheel:scroll:start` event - fires when a wheel column starts scrolling (includes `column` field) +- `wheel:scroll:end` event - fires when a wheel column snaps to a value (includes `column`, `value`, `previousValue` fields) - Exported `WheelScrollStartEventData` and `WheelScrollEndEventData` types +- `ui.wheel.placement` option (`'auto'` | `'top'` | `'bottom'`) for popover positioning in compact-wheel mode +- `clock.disabledTime.hideOptions` option to completely remove disabled hours/minutes from the list instead of dimming them +- `ui.wheel.commitOnScroll` option to auto-commit time at the end of wheel scrolling without pressing OK +- `autoCommit` field on `ConfirmEventData` to distinguish auto-committed from manual confirmations - Clear button to reset time selection. Enabled by default via `ui.clearButton` option - `clearBehavior.clearInput` option to control whether clearing also empties the input field value - `labels.clear` option to customize the clear button text diff --git a/README.md b/README.md index 5367458..b97aff3 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,8 @@ Modern time picker library built with TypeScript. Works with any framework or va - 10 built-in themes (Material, Crane, Dark, Glassmorphic, Cyberpunk, and more) - Mobile-first design with touch support -- **Wheel (scroll-spinner) mode** — alternative to the analog clock face +- **Wheel (scroll-spinner) mode** - alternative to the analog clock face +- **Compact-wheel mode** - headerless wheel picker with optional popover placement - Framework agnostic - works with React, Vue, Angular, Svelte, or vanilla JS - Full TypeScript support - Inline mode for always-visible timepicker @@ -177,22 +178,23 @@ const picker = new TimepickerUI(input, { ### UI Options -| Property | Type | Default | Description | -| --------------------- | ----------------- | ----------- | -------------------------------------------- | -| `theme` | string | `basic` | Theme (11 themes available) | -| `animation` | boolean | `true` | Enable animations | -| `backdrop` | boolean | `true` | Show backdrop overlay | -| `mobile` | boolean | `false` | Force mobile version | -| `enableSwitchIcon` | boolean | `false` | Show desktop/mobile switch icon | -| `editable` | boolean | `false` | Allow manual input editing | -| `enableScrollbar` | boolean | `false` | Enable scroll when picker open | -| `cssClass` | string | `undefined` | Additional CSS class | -| `appendModalSelector` | string | `""` | Custom container selector | -| `iconTemplate` | string | SVG | Desktop switch icon template | -| `iconTemplateMobile` | string | SVG | Mobile switch icon template | -| `inline` | object | `undefined` | Inline mode configuration | -| `clearButton` | boolean | `true` | Show clear button | -| `mode` | `clock` / `wheel` | `clock` | Picker mode — analog clock or scroll-spinner | +| Property | Type | Default | Description | +| --------------------- | ----------------------------------- | ----------- | ------------------------------------------------------------------ | +| `theme` | string | `basic` | Theme (11 themes available) | +| `animation` | boolean | `true` | Enable animations | +| `backdrop` | boolean | `true` | Show backdrop overlay | +| `mobile` | boolean | `false` | Force mobile version | +| `enableSwitchIcon` | boolean | `false` | Show desktop/mobile switch icon | +| `editable` | boolean | `false` | Allow manual input editing | +| `enableScrollbar` | boolean | `false` | Enable scroll when picker open | +| `cssClass` | string | `undefined` | Additional CSS class | +| `appendModalSelector` | string | `""` | Custom container selector | +| `iconTemplate` | string | SVG | Desktop switch icon template | +| `iconTemplateMobile` | string | SVG | Mobile switch icon template | +| `inline` | object | `undefined` | Inline mode configuration | +| `clearButton` | boolean | `true` | Show clear button | +| `mode` | `clock` / `wheel` / `compact-wheel` | `clock` | Picker mode - analog clock, scroll-spinner, or headerless wheel | +| `wheel` | object | `undefined` | Wheel/compact-wheel config (placement, hideFooter, commitOnScroll) | ### Labels Options @@ -362,7 +364,7 @@ const picker = new TimepickerUI(input, { ### Wheel Mode -Wheel mode replaces the analog clock face with a touch-friendly scroll-spinner. The header (hour/minute inputs, AM/PM toggle) and footer (OK/Cancel buttons) remain unchanged — only the clock body is replaced. +Wheel mode replaces the analog clock face with a touch-friendly scroll-spinner. The header (hour/minute inputs, AM/PM toggle) and footer (OK/Cancel buttons) remain unchanged - only the clock body is replaced. ```javascript const picker = new TimepickerUI(input, { @@ -374,18 +376,45 @@ picker.create(); Wheel mode works with all existing features: -- **12h / 24h**: Respects `clock.type` — AM/PM column appears only in 12h mode +- **12h / 24h**: Respects `clock.type` - AM/PM column appears only in 12h mode - **Themes**: Inherits the active theme via CSS variables - **Disabled time**: Disabled hours/minutes are dimmed and skipped during scroll snap +- **Hide disabled options**: Set `clock.disabledTime.hideOptions: true` to completely remove disabled values from the list - **setValue / getValue**: `picker.setValue('09:30 AM')` scrolls the wheel to the correct position - **Keyboard navigation**: Arrow Up/Down scrolls one item, Tab moves between columns -- **Events**: All standard events work — `select:hour`, `select:minute`, `update`, `confirm`, `cancel`, `clear`, `select:am`, `select:pm`, `error` +- **Events**: All standard events work - `select:hour`, `select:minute`, `update`, `confirm`, `cancel`, `clear`, `select:am`, `select:pm`, `error` - **Wheel-specific events**: `wheel:scroll:start` (column starts scrolling), `wheel:scroll:end` (column snaps to value with `previousValue`) +- **Auto-commit**: Set `ui.wheel.commitOnScroll: true` to auto-confirm on scroll end without pressing OK -**Limitations (v1):** +### Compact-Wheel Mode -- Range plugin (`range.enabled`) is not supported in wheel mode -- `ui.mobile` is ignored — wheel layout is always the same regardless of viewport +Compact-wheel mode is a headerless variant of wheel mode - it shows only the scroll wheels without the hour/minute input header. Ideal for minimal UIs or popover-style pickers. + +```javascript +const picker = new TimepickerUI(input, { + ui: { mode: "compact-wheel" }, +}); + +picker.create(); +``` + +Combine with `ui.wheel.placement` to open as a popover anchored to the input: + +```javascript +const picker = new TimepickerUI(input, { + ui: { + mode: "compact-wheel", + wheel: { + placement: "auto", // 'auto', 'top', or 'bottom' + }, + }, +}); +``` + +**Limitations:** + +- Range plugin (`range.enabled`) is not supported in wheel or compact-wheel mode +- `ui.mobile` is ignored - wheel layout is always the same regardless of viewport ## API Methods @@ -689,7 +718,9 @@ All modules are now SSR-safe and can be imported in Node.js environments without - **Better TypeScript types** - Fully typed event payloads and options - **Smaller bundle** - Removed unused code, optimized build (63.3 KB ESM) - **Focus improvements** - Auto-focus on modal open, auto-focus on minute switch -- **Clear button** - Reset time selection with a dedicated clear button (v4.2.0) +- **Clear button** - Reset time selection with a dedicated clear button (v4.2.0)- **Compact-wheel mode** - Headerless wheel picker with optional popover placement (v4.2.0) +- **Hide disabled options** - Remove disabled values from the list instead of dimming (v4.2.0) +- **Auto-commit on scroll** - Auto-confirm time at scroll end in wheel modes (v4.2.0) ### Bundle Size Comparison diff --git a/app/docs/examples/api-demo.ts b/app/docs/examples/api-demo.ts new file mode 100644 index 0000000..aa6407f --- /dev/null +++ b/app/docs/examples/api-demo.ts @@ -0,0 +1,161 @@ +import { TimepickerUI } from './setup'; + +// getValue() Without Opening Widget Demo +const getValueDemoPicker = new TimepickerUI('#getvalue-demo-picker', { + clock: { type: '24h' }, +}); +getValueDemoPicker.create(); + +const getValueButton = document.getElementById('getvalue-button'); +const setValueButton = document.getElementById('setvalue-button'); +const openCheckButton = document.getElementById('open-check-button'); +const getValueOutput = document.getElementById('getvalue-output'); + +if (getValueButton && getValueOutput) { + getValueButton.addEventListener('click', () => { + const value = getValueDemoPicker.getValue(); + console.log('getValue() output:', value); + getValueOutput.textContent = JSON.stringify( + { + hour: value.hour, + minutes: value.minutes, + time: value.time, + degreesHours: value.degreesHours, + degreesMinutes: value.degreesMinutes, + }, + null, + 2, + ); + }); +} + +if (setValueButton && getValueOutput) { + setValueButton.addEventListener('click', () => { + getValueDemoPicker.setValue('18:45'); + getValueOutput.textContent = JSON.stringify( + { + message: 'Value set to 18:45', + ...getValueDemoPicker.getValue(), + }, + null, + 2, + ); + }); +} + +if (openCheckButton && getValueOutput) { + openCheckButton.addEventListener('click', () => { + getValueDemoPicker.open(); + setTimeout(() => { + getValueDemoPicker.close(); + const value = getValueDemoPicker.getValue(); + getValueOutput.textContent = JSON.stringify( + { + message: 'Opened and closed, value still matches input', + hour: value.hour, + minutes: value.minutes, + time: value.time, + }, + null, + 2, + ); + }, 1000); + }); +} + +// Range Pickers +const rangePicker = new TimepickerUI('#range-picker', { + clock: { type: '12h' }, + ui: { enableSwitchIcon: true }, + range: { + enabled: true, + minDuration: 30, + maxDuration: 480, + fromLabel: 'Start', + toLabel: 'End', + }, + callbacks: { + onRangeConfirm: (data) => { + console.log('Range confirmed:', data.from, '–', data.to, 'Duration:', data.duration); + const rangeDisplay = document.getElementById('range-display'); + const durationDisplay = document.getElementById('range-duration'); + if (rangeDisplay) { + rangeDisplay.textContent = `${data.from} – ${data.to}`; + } + if (durationDisplay) { + durationDisplay.textContent = String(data.duration); + } + }, + onRangeSwitch: (data) => { + console.log('Range part switched to:', data.active); + }, + onRangeValidation: (data) => { + if (!data.valid) { + console.log('Invalid range duration. Expected:', data.minDuration, '-', data.maxDuration, 'minutes'); + } + }, + }, +}); +rangePicker.create(); + +const range24hPicker = new TimepickerUI('#range-picker-24h', { + clock: { type: '24h' }, + ui: { enableSwitchIcon: true }, + range: { + enabled: true, + minDuration: 60, + maxDuration: 720, + fromLabel: 'Start', + toLabel: 'End', + }, + callbacks: { + onRangeConfirm: (data) => { + console.log('Range 24h confirmed:', data.from, '–', data.to, 'Duration:', data.duration); + const rangeDisplay = document.getElementById('range-display-24h'); + const durationDisplay = document.getElementById('range-duration-24h'); + if (rangeDisplay) { + rangeDisplay.textContent = `${data.from} – ${data.to}`; + } + if (durationDisplay) { + durationDisplay.textContent = String(data.duration); + } + }, + onRangeSwitch: (data) => { + console.log('Range 24h part switched to:', data.active); + }, + onRangeValidation: (data) => { + if (!data.valid) { + console.log('Invalid range duration. Expected:', data.minDuration, '-', data.maxDuration, 'minutes'); + } + }, + }, +}); +range24hPicker.create(); + +const range12hAmPmPicker = new TimepickerUI('#range-picker-12h-ampm', { + clock: { type: '12h' }, + ui: { enableSwitchIcon: true }, + range: { + enabled: true, + fromLabel: 'From', + toLabel: 'To', + }, + callbacks: { + onRangeConfirm: (data) => { + console.log('Range 12h AM/PM confirmed:', data.from, '–', data.to, 'Duration:', data.duration); + const rangeDisplay = document.getElementById('range-display-12h-ampm'); + const durationDisplay = document.getElementById('range-duration-12h-ampm'); + if (rangeDisplay) { + rangeDisplay.textContent = `${data.from} – ${data.to}`; + } + if (durationDisplay) { + durationDisplay.textContent = String(data.duration); + } + }, + onRangeSwitch: (data) => { + console.log('Range 12h AM/PM part switched to:', data.active); + }, + }, +}); +range12hAmPmPicker.create(); + diff --git a/app/docs/examples/basic.ts b/app/docs/examples/basic.ts new file mode 100644 index 0000000..1459da6 --- /dev/null +++ b/app/docs/examples/basic.ts @@ -0,0 +1,21 @@ +import { TimepickerUI } from './setup'; + +const basicTimePicker = new TimepickerUI('#basic-picker', { + clock: { + autoSwitchToMinutes: true, + }, +}); +basicTimePicker.create(); + +const format24hPicker = new TimepickerUI('#format-24h-picker', { + clock: { type: '24h' }, + ui: { enableSwitchIcon: true }, +}); +format24hPicker.create(); + +const mobilePicker = new TimepickerUI('#mobile-picker', { + clock: { type: '24h' }, + ui: { mobile: true, enableSwitchIcon: true }, +}); +mobilePicker.create(); + diff --git a/app/docs/examples/clear-button.ts b/app/docs/examples/clear-button.ts new file mode 100644 index 0000000..1871221 --- /dev/null +++ b/app/docs/examples/clear-button.ts @@ -0,0 +1,90 @@ +import { TimepickerUI } from './setup'; + +const clearButtonPicker = new TimepickerUI('#clear-button-picker', { + ui: { + clearButton: true, + theme: 'basic', + enableSwitchIcon: true, + }, + labels: { + clear: 'Clear', + }, + clock: { + type: '12h', + }, + callbacks: { + onClear: (data) => { + console.log('Time cleared! Previous value:', data.previousValue); + }, + }, +}); +clearButtonPicker.create(); + +const clearNoClearInputPicker = new TimepickerUI('#clear-no-input-picker', { + ui: { + clearButton: true, + theme: 'basic', + enableSwitchIcon: true, + }, + clearBehavior: { + clearInput: false, + }, + callbacks: { + onClear: (data) => { + console.log('Clear clicked (input kept)! Previous value:', data.previousValue); + }, + }, +}); +clearNoClearInputPicker.create(); + +// Clear Button - All Themes +const clearThemeList = [ + 'basic', + 'crane', + 'crane-straight', + 'm3-green', + 'dark', + 'm2', + 'glassmorphic', + 'pastel', + 'ai', + 'cyberpunk', +] as const; + +clearThemeList.forEach((theme) => { + new TimepickerUI(`#clear-theme-${theme}`, { + ui: { clearButton: true, theme, enableSwitchIcon: true }, + labels: { clear: 'Clear' }, + callbacks: { + onClear: (data) => { + console.log(`Clear (${theme}): prev =`, data.previousValue); + }, + }, + }).create(); +}); + +// Range + Clear Button +const rangeClearPicker = new TimepickerUI('#range-clear-picker', { + clock: { type: '12h' }, + ui: { clearButton: true, theme: 'm3-green', enableSwitchIcon: true }, + range: { enabled: true, fromLabel: 'From', toLabel: 'To' }, + labels: { clear: 'Clear' }, + callbacks: { + onRangeConfirm: (data) => { + console.log('Range + Clear confirmed:', data.from, '–', data.to); + const display = document.getElementById('range-clear-display'); + if (display) { + display.textContent = `${data.from} – ${data.to}`; + } + }, + onClear: (data) => { + console.log('Range cleared! Previous value:', data.previousValue); + const display = document.getElementById('range-clear-display'); + if (display) { + display.textContent = '--:-- – --:--'; + } + }, + }, +}); +rangeClearPicker.create(); + diff --git a/app/docs/examples/disabled.ts b/app/docs/examples/disabled.ts new file mode 100644 index 0000000..f59e343 --- /dev/null +++ b/app/docs/examples/disabled.ts @@ -0,0 +1,164 @@ +import { TimepickerUI } from './setup'; + +const disabledHoursPicker = new TimepickerUI('#disabled-hours', { + clock: { type: '24h', disabledTime: { hours: [1, 2, 3, 22, 23] } }, +}); +disabledHoursPicker.create(); + +const disabledMinutesPicker = new TimepickerUI('#disabled-minutes', { + clock: { type: '12h', disabledTime: { minutes: [15, 30, 45] } }, +}); +disabledMinutesPicker.create(); + +const disabledIntervalPicker = new TimepickerUI('#disabled-interval', { + clock: { type: '24h', disabledTime: { interval: '12:00 - 18:00' } }, +}); +disabledIntervalPicker.create(); + +const editablePicker = new TimepickerUI('#editable-picker', { + ui: { editable: true, enableSwitchIcon: true }, + behavior: { focusInputAfterClose: true }, +}); +editablePicker.create(); + +const smoothHourPicker = new TimepickerUI('#smooth-hour-snap-picker', { + clock: { smoothHourSnap: true }, +}); +smoothHourPicker.create(); + +const multipleIntervalsPicker = new TimepickerUI('#disabled-intervals-12h', { + clock: { + type: '12h', + disabledTime: { + interval: ['12:00 AM - 4:00 AM', '5:30 PM - 8:00 PM'], + }, + }, +}); +multipleIntervalsPicker.create(); + +const multipleIntervalsPicker24h = new TimepickerUI('#disabled-intervals-24h', { + clock: { + type: '24h', + disabledTime: { + interval: ['04:33 - 12:12', '16:34 - 20:22', '21:37 - 23:23'], + }, + }, +}); +multipleIntervalsPicker24h.create(); + +const dynamicUpdatePicker = new TimepickerUI('#dynamic-update-picker', { + clock: { + type: '12h', + disabledTime: { hours: [9, 10, 11, 12] }, + }, +}); +dynamicUpdatePicker.create(); + +document.getElementById('update-morning-shift')?.addEventListener('click', () => { + dynamicUpdatePicker.update({ + options: { + clock: { + type: '12h', + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8] }, + }, + }, + create: true, + }); +}); + +document.getElementById('update-evening-shift')?.addEventListener('click', () => { + dynamicUpdatePicker.update({ + options: { + ui: { theme: 'm3-green' }, + clock: { + type: '24h', + disabledTime: { hours: [18, 19, 20, 21, 22, 23] }, + }, + }, + create: true, + }); +}); + +document.getElementById('clear-restrictions')?.addEventListener('click', () => { + dynamicUpdatePicker.update({ + options: { + clock: { + disabledTime: { hours: [] }, + }, + }, + create: true, + }); +}); + +const dynamicIntervalPicker = new TimepickerUI('#dynamic-interval-picker', { + clock: { + type: '24h', + disabledTime: { interval: '09:00 - 12:00' }, + }, +}); +dynamicIntervalPicker.create(); + +document.getElementById('update-single-interval')?.addEventListener('click', () => { + dynamicIntervalPicker.update({ + options: { + clock: { + disabledTime: { interval: '12:00 - 13:00' }, + }, + }, + create: true, + }); +}); + +document.getElementById('update-multiple-intervals')?.addEventListener('click', () => { + dynamicIntervalPicker.update({ + options: { + clock: { + disabledTime: { + interval: ['00:00 - 08:00', '12:00 - 13:00', '18:00 - 23:59'], + }, + }, + }, + create: true, + }); +}); + +document.getElementById('clear-intervals')?.addEventListener('click', () => { + dynamicIntervalPicker.update({ + options: { + clock: { + disabledTime: {}, + }, + }, + create: true, + }); +}); + +// hideDisabledOptions — Clock mode +const hideDisabledClockPicker = new TimepickerUI('#hide-disabled-clock', { + clock: { + type: '24h', + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 18, 19, 20, 21, 22, 23], hideOptions: true }, + }, +}); +hideDisabledClockPicker.create(); + +// hideDisabledOptions — Wheel mode +const hideDisabledWheelPicker = new TimepickerUI('#hide-disabled-wheel', { + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6], minutes: [0, 15, 30, 45], hideOptions: true }, + }, + ui: { mode: 'wheel' }, +}); +hideDisabledWheelPicker.create(); + +// hideDisabledOptions — Compact Wheel + Popover +const hideDisabledPopoverPicker = new TimepickerUI('#hide-disabled-popover', { + clock: { + type: '24h', + incrementMinutes: 5, + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 22, 23], hideOptions: true }, + }, + ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, +}); +hideDisabledPopoverPicker.create(); diff --git a/app/docs/examples/features.ts b/app/docs/examples/features.ts new file mode 100644 index 0000000..3acc788 --- /dev/null +++ b/app/docs/examples/features.ts @@ -0,0 +1,249 @@ +import { TimepickerUI } from './setup'; + +const inlinePicker = new TimepickerUI('#inline-picker', { + clock: { type: '24h' }, + ui: { + inline: { + enabled: true, + containerId: 'inline-container', + showButtons: false, + autoUpdate: true, + }, + }, +}); +inlinePicker.create(); + +const eventPicker = new TimepickerUI('#event-picker'); +eventPicker.create(); +const eventPickerElement = eventPicker.getElement(); + +const eventLog = document.querySelector('#event-log'); + +if (eventPickerElement && eventLog) { + eventPickerElement.addEventListener('accept', (e: any) => { + console.log(e); + const timestamp = new Date().toLocaleTimeString(); + eventLog.innerHTML += `<p class="text-green-600 dark:text-green-400 text-sm">[${timestamp}] Accept: ${e.detail.hour}:${e.detail.minutes} ${e.detail.type || ''}</p>`; + eventLog.scrollTop = eventLog.scrollHeight; + }); + + eventPickerElement.addEventListener('cancel', (e: any) => { + console.log(e); + const timestamp = new Date().toLocaleTimeString(); + eventLog.innerHTML += `<p class="text-red-600 dark:text-red-400 text-sm">[${timestamp}] Cancel event fired</p>`; + eventLog.scrollTop = eventLog.scrollHeight; + }); + + eventPickerElement.addEventListener('show', (e: any) => { + const timestamp = new Date().toLocaleTimeString(); + console.log(e); + eventLog.innerHTML += `<p class="text-blue-600 dark:text-blue-400 text-sm">[${timestamp}] Picker opened</p>`; + eventLog.scrollTop = eventLog.scrollHeight; + }); +} + +const customLabelsPicker = new TimepickerUI('#custom-labels-picker', { + labels: { + time: 'Select time', + ok: 'It is ok', + cancel: 'Nope', + am: 'AM', + pm: 'PM', + mobileTime: 'Enter Time', + mobileHour: 'Hour', + mobileMinute: 'Minute', + }, +}); +customLabelsPicker.create(); + +const multiPicker1 = new TimepickerUI('#multi-picker-1', { + clock: { type: '24h' }, + ui: { theme: 'basic' }, +}); +multiPicker1.create(); + +const multiPicker2 = new TimepickerUI('#multi-picker-2', { + clock: { type: '12h' }, + ui: { theme: 'm3-green' }, +}); +multiPicker2.create(); + +const multiPicker3 = new TimepickerUI('#multi-picker-3', { + clock: { type: '24h' }, + ui: { theme: 'crane' }, +}); +multiPicker3.create(); + +const eventEmitterPicker = new TimepickerUI('#event-emitter-picker', { + ui: { theme: 'm3-green' }, +}); +eventEmitterPicker.create(); + +const emitterEventLog = document.querySelector('#emitter-event-log'); + +if (emitterEventLog) { + const logEvent = (eventName: string, data?: any) => { + const timestamp = new Date().toLocaleTimeString(); + const dataStr = data ? `: ${JSON.stringify(data, null, 2)}` : ''; + emitterEventLog.innerHTML += `<p class="text-cyan-400 text-xs mb-1">[${timestamp}] <span class="text-white font-semibold">${eventName}</span>${dataStr}</p>`; + emitterEventLog.scrollTop = emitterEventLog.scrollHeight; + }; + + eventEmitterPicker.on('confirm', (data) => { + logEvent('confirm', { hour: data.hour, minutes: data.minutes, type: data.type }); + }); + + eventEmitterPicker.on('cancel', () => { + logEvent('cancel'); + }); + + eventEmitterPicker.on('open', () => { + logEvent('open'); + }); + + eventEmitterPicker.on('update', (data) => { + logEvent('update', { hour: data.hour, minutes: data.minutes }); + }); + + eventEmitterPicker.on('select:hour', (data) => { + logEvent('select:hour', { hour: data.hour }); + }); + + eventEmitterPicker.on('select:minute', (data) => { + logEvent('select:minute', { minutes: data.minutes }); + }); + + eventEmitterPicker.on('select:am', () => { + logEvent('select:am'); + }); + + eventEmitterPicker.on('select:pm', () => { + logEvent('select:pm'); + }); + + eventEmitterPicker.once('open', () => { + logEvent('once:open', 'This runs only once!'); + }); +} + +const customThemePicker = new TimepickerUI('#custom-theme-picker', { + ui: { cssClass: 'test' }, +}); +customThemePicker.create(); + +const advancedPicker = new TimepickerUI('#advanced-picker', { + clock: { + type: '12h', + incrementHours: 1, + incrementMinutes: 15, + currentTime: { + time: new Date(), + updateInput: false, + preventClockType: true, + }, + disabledTime: { + interval: '22:00 - 06:00', + }, + }, + ui: { + theme: 'm3-green', + enableSwitchIcon: true, + editable: true, + cssClass: 'my-custom-picker', + }, + behavior: { + focusTrap: true, + focusInputAfterClose: true, + delayHandler: 500, + }, +}); +advancedPicker.create(); + +const newEventsAndCallbacksPicker = new TimepickerUI('#new-events-and-callbacks-picker', { + callbacks: { + onOpen: (data) => { + console.log('Picker opened v4!', data); + }, + onCancel: () => { + console.log('Picker cancelled v4!'); + }, + onConfirm: (data) => { + console.log('Time confirmed v4!', data); + }, + onUpdate: (data) => { + console.log('Time updated v4!', data); + }, + onSelectHour: (data) => { + console.log('Hour mode selected v4!', data); + }, + onSelectMinute: (data) => { + console.log('Minute mode selected v4!', data); + }, + onSelectAM: () => { + console.log('AM selected v4!'); + }, + onSelectPM: () => { + console.log('PM selected v4!'); + }, + onError: (data) => { + console.log('Error occurred v4!', data.error); + }, + }, +}); +newEventsAndCallbacksPicker.create(); + +const pickerElement = newEventsAndCallbacksPicker.getElement(); + +if (pickerElement) { + pickerElement.addEventListener('timepicker:open', (data) => { + console.log({ data }); + console.log('Picker opened with addEvent v3!', data); + }); + pickerElement.addEventListener('timepicker:cancel', (data) => { + console.log('Picker cancelled with addEvent v3!', data); + }); + pickerElement.addEventListener('timepicker:confirm', (data) => { + console.log('Time confirmed with addEvent v3!', data); + }); + pickerElement.addEventListener('timepicker:update', (data) => { + console.log('Time updated with addEvent v3!', data); + }); + pickerElement.addEventListener('timepicker:select-hour', (data) => { + console.log('Hour mode selected with addEvent v3!', data); + }); + pickerElement.addEventListener('timepicker:select-minute', (data) => { + console.log('Minute mode selected with addEvent v3!', data); + }); +} + +const version3Example = new TimepickerUI('#version3-example', { + clock: { type: '24h' }, + ui: { theme: 'm3-green' }, + behavior: { focusTrap: false, delayHandler: 200 }, + callbacks: { + onOpen: (data) => { + console.log('Version 4.0 picker opened!', data); + }, + }, +}); + +const elementExists = document.querySelector('#version3-example'); +if (elementExists) { + version3Example.create(); +} + +const destroyExample = new TimepickerUI('#destroy-example', { + clock: { type: '24h' }, + ui: { theme: 'm3-green' }, + behavior: { focusTrap: false, delayHandler: 200 }, +}); +destroyExample.create(); + +const button = document.querySelector('#destroy-button'); + +if (button) { + button.addEventListener('click', () => { + destroyExample.destroy(); + }); +} + diff --git a/app/docs/examples/hide-footer.ts b/app/docs/examples/hide-footer.ts new file mode 100644 index 0000000..7a77212 --- /dev/null +++ b/app/docs/examples/hide-footer.ts @@ -0,0 +1,21 @@ +import { TimepickerUI } from './setup'; + +const noFooterThemes = [ + 'basic', + 'crane', + 'crane-straight', + 'm3-green', + 'dark', + 'm2', + 'glassmorphic', + 'pastel', + 'ai', + 'cyberpunk', +] as const; + +noFooterThemes.forEach((theme) => { + new TimepickerUI(`#nofooter-${theme}`, { + ui: { mode: 'compact-wheel', theme, wheel: { hideFooter: true, commitOnScroll: true } }, + }).create(); +}); + diff --git a/app/docs/examples/range-themes.ts b/app/docs/examples/range-themes.ts new file mode 100644 index 0000000..9fd30c8 --- /dev/null +++ b/app/docs/examples/range-themes.ts @@ -0,0 +1,62 @@ +import { TimepickerUI } from './setup'; + +const rangeBasic = new TimepickerUI('#range-basic', { + ui: { theme: 'basic', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangeBasic.create(); + +const rangeCrane = new TimepickerUI('#range-crane', { + ui: { theme: 'crane', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangeCrane.create(); + +const rangeCraneStraight = new TimepickerUI('#range-crane-straight', { + ui: { theme: 'crane-straight', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangeCraneStraight.create(); + +const rangeM3 = new TimepickerUI('#range-m3', { + ui: { theme: 'm3-green', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangeM3.create(); + +const rangeDark = new TimepickerUI('#range-dark', { + ui: { theme: 'dark', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangeDark.create(); + +const rangeM2 = new TimepickerUI('#range-m2', { + ui: { theme: 'm2', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangeM2.create(); + +const rangeGlassmorphic = new TimepickerUI('#range-glassmorphic', { + ui: { theme: 'glassmorphic', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangeGlassmorphic.create(); + +const rangePastel = new TimepickerUI('#range-pastel', { + ui: { theme: 'pastel', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangePastel.create(); + +const rangeAI = new TimepickerUI('#range-ai', { + ui: { theme: 'ai', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangeAI.create(); + +const rangeCyberpunk = new TimepickerUI('#range-cyberpunk', { + ui: { theme: 'cyberpunk', enableSwitchIcon: true }, + range: { enabled: true }, +}); +rangeCyberpunk.create(); + diff --git a/app/docs/examples/setup.ts b/app/docs/examples/setup.ts new file mode 100644 index 0000000..9b73304 --- /dev/null +++ b/app/docs/examples/setup.ts @@ -0,0 +1,75 @@ +import { TimepickerUI, PluginRegistry } from '../../src/index'; +import { RangePlugin } from '../../src/plugins/range'; +import { TimezonePlugin } from '../../src/plugins/timezone'; +import { WheelPlugin } from '../../src/plugins/wheel'; +import { codeToHtml } from 'shiki'; + +PluginRegistry.register(RangePlugin); +PluginRegistry.register(TimezonePlugin); +PluginRegistry.register(WheelPlugin); + +export { TimepickerUI }; + +console.log( + `%c +████████╗██╗███╗ ███╗███████╗██████╗ ██╗ ██████╗███████╗██████╗ +╚══██╔══╝██║████╗ ████║██╔════╝██╔══██╗██║██╔════╝██╔════╝██╔══██╗ + ██║ ██║██╔████╔██║█████╗ ██████╔╝██║██║ █████╗ ██████╔╝ + ██║ ██║██║╚██╔╝██║██╔══╝ ██╔═══╝ ██║██║ ██╔══╝ ██╔══██╗ + ██║ ██║██║ ╚═╝ ██║███████╗██║ ██║╚██████╗███████╗██║ ██║ + ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝ ╚═════╝╚══════╝╚═╝ ╚═╝ + T I M E P I C K E R - U I + +✨ Because native <input type="time"> is illegal. +🤫 Shh... it just wraps <input>. But damn it looks good. +👉 github.com/pglejzer/timepicker-ui +`, + 'color: #00BCD4; font-weight: bold; font-family: monospace; font-size: 11px;', +); + +const codeBlocks = document.querySelectorAll<HTMLElement>('pre code[class*="language-"]'); + +codeBlocks.forEach(async (codeElement) => { + const block = codeElement.parentElement as HTMLElement; + if (!block || block.id === 'getvalue-output') return; + + const lang = block.dataset.lang || 'js'; + const rawCode = block.innerText.trim(); + + const html = await codeToHtml(rawCode, { + lang, + theme: 'github-dark', + }); + + const wrapper = document.createElement('div'); + wrapper.innerHTML = html; + const highlightedBlock = wrapper.firstElementChild!; + + highlightedBlock.classList.add( + 'w-full', + 'overflow-x-auto', + 'overflow-y-hidden', + 'px-4', + 'py-3', + 'rounded-md', + 'bg-[#0d1117]', + ); + + const copyBtn = document.createElement('button'); + copyBtn.innerText = 'Copy'; + copyBtn.className = + 'absolute top-2 right-2 text-xs px-2 py-1 bg-gray-800 text-white rounded hover:bg-gray-700 transition'; + copyBtn.addEventListener('click', async () => { + await navigator.clipboard.writeText(rawCode); + copyBtn.innerText = 'Copied!'; + setTimeout(() => (copyBtn.innerText = 'Copy'), 1500); + }); + + const wrapperDiv = document.createElement('div'); + wrapperDiv.className = 'relative mb-6'; + wrapperDiv.appendChild(copyBtn); + wrapperDiv.appendChild(highlightedBlock); + + block.replaceWith(wrapperDiv); +}); + diff --git a/app/docs/examples/themes.ts b/app/docs/examples/themes.ts new file mode 100644 index 0000000..f75bfe3 --- /dev/null +++ b/app/docs/examples/themes.ts @@ -0,0 +1,52 @@ +import { TimepickerUI } from './setup'; + +const themeBasicPicker = new TimepickerUI('#theme-basic', { + ui: { theme: 'basic', enableSwitchIcon: true }, +}); +themeBasicPicker.create(); + +const themeCraneStraightPicker = new TimepickerUI('#theme-crane-straight', { + ui: { theme: 'crane-straight', enableSwitchIcon: true }, +}); +themeCraneStraightPicker.create(); + +const themeCraneRadiusPicker = new TimepickerUI('#theme-crane-radius', { + ui: { theme: 'crane', enableSwitchIcon: true }, +}); +themeCraneRadiusPicker.create(); + +const themeM3Picker = new TimepickerUI('#theme-m3', { + ui: { theme: 'm3-green', enableSwitchIcon: true }, +}); +themeM3Picker.create(); + +const themeDarkPicker = new TimepickerUI('#theme-dark', { + ui: { theme: 'dark', enableSwitchIcon: true }, +}); +themeDarkPicker.create(); + +const themeM2Picker = new TimepickerUI('#theme-m2', { + ui: { theme: 'm2', enableSwitchIcon: true }, +}); +themeM2Picker.create(); + +const themeGlassmorphicPicker = new TimepickerUI('#theme-glassmorphic', { + ui: { theme: 'glassmorphic', enableSwitchIcon: true }, +}); +themeGlassmorphicPicker.create(); + +const themePastelPicker = new TimepickerUI('#theme-pastel', { + ui: { theme: 'pastel', enableSwitchIcon: true }, +}); +themePastelPicker.create(); + +const themeAIPicker = new TimepickerUI('#theme-ai', { + ui: { theme: 'ai', enableSwitchIcon: true }, +}); +themeAIPicker.create(); + +const themeCyberpunkPicker = new TimepickerUI('#theme-cyberpunk', { + ui: { theme: 'cyberpunk', enableSwitchIcon: true }, +}); +themeCyberpunkPicker.create(); + diff --git a/app/docs/examples/timezone-advanced.ts b/app/docs/examples/timezone-advanced.ts new file mode 100644 index 0000000..9e2b41f --- /dev/null +++ b/app/docs/examples/timezone-advanced.ts @@ -0,0 +1,120 @@ +import { TimepickerUI } from './setup'; + +const timezonePicker = new TimepickerUI('#timezone-picker', { + clock: { type: '24h' }, + timezone: { + enabled: true, + label: 'Timezone', + }, + ui: { theme: 'dark', enableSwitchIcon: true }, + callbacks: { + onTimezoneChange: (data) => { + console.log('Timezone changed:', data.timezone); + const tzDisplay = document.getElementById('tz-display'); + if (tzDisplay) { + tzDisplay.textContent = data.timezone; + } + }, + }, +}); +timezonePicker.create(); + +const worldTimezonePicker = new TimepickerUI('#timezone-world-picker', { + clock: { type: '24h' }, + ui: { theme: 'm3-green', enableSwitchIcon: true }, + timezone: { + enabled: true, + label: 'Select City', + whitelist: [ + 'UTC', + 'America/New_York', + 'America/Los_Angeles', + 'America/Chicago', + 'America/Sao_Paulo', + 'Europe/London', + 'Europe/Paris', + 'Europe/Berlin', + 'Europe/Moscow', + 'Asia/Dubai', + 'Asia/Tokyo', + 'Asia/Shanghai', + 'Asia/Singapore', + 'Australia/Sydney', + 'Pacific/Auckland', + ], + }, + callbacks: { + onTimezoneChange: (data) => { + console.log('Timezone changed to:', data.timezone); + + const tzWorldDisplay = document.getElementById('tz-world-display'); + const tzWorldOffset = document.getElementById('tz-world-offset'); + + if (tzWorldDisplay) { + tzWorldDisplay.textContent = data.timezone; + } + + if (tzWorldOffset) { + try { + const formatter = new Intl.DateTimeFormat('en-US', { + timeZone: data.timezone, + timeZoneName: 'shortOffset', + }); + const parts = formatter.formatToParts(new Date()); + const offsetPart = parts.find((p) => p.type === 'timeZoneName'); + const offset = offsetPart?.value || 'UTC'; + tzWorldOffset.textContent = offset; + + console.log(`${data.timezone} -> ${offset}`); + } catch (error) { + console.error('Error getting timezone offset:', error); + tzWorldOffset.textContent = 'N/A'; + } + } + }, + onConfirm: (data) => { + const tzWorldTime = document.getElementById('tz-world-time'); + if (tzWorldTime) { + const time = `${data.hour}:${data.minutes}${data.type ? ' ' + data.type : ''}`; + tzWorldTime.textContent = time; + console.log('Time confirmed:', time); + } + }, + onUpdate: (data) => { + const tzWorldTime = document.getElementById('tz-world-time'); + if (tzWorldTime) { + const time = `${data.hour}:${data.minutes}${data.type ? ' ' + data.type : ''}`; + tzWorldTime.textContent = time; + } + }, + }, +}); +worldTimezonePicker.create(); + +// Timezone - All Themes +const themes = [ + 'basic', + 'crane', + 'crane-straight', + 'm3-green', + 'dark', + 'm2', + 'glassmorphic', + 'pastel', + 'ai', + 'cyberpunk', +] as const; + +themes.forEach((theme) => { + const picker = new TimepickerUI(`#tz-theme-${theme}`, { + clock: { type: '24h' }, + ui: { theme, enableSwitchIcon: true }, + timezone: { + enabled: true, + label: 'Timezone', + whitelist: ['UTC', 'America/New_York', 'Europe/London', 'Europe/Warsaw', 'Asia/Tokyo'], + }, + }); + picker.create(); +}); + diff --git a/app/docs/examples/timezone-themes.ts b/app/docs/examples/timezone-themes.ts new file mode 100644 index 0000000..49b353a --- /dev/null +++ b/app/docs/examples/timezone-themes.ts @@ -0,0 +1,62 @@ +import { TimepickerUI } from './setup'; + +const timezoneBasic = new TimepickerUI('#timezone-basic', { + ui: { theme: 'basic', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'America/New_York' }, +}); +timezoneBasic.create(); + +const timezoneCrane = new TimepickerUI('#timezone-crane', { + ui: { theme: 'crane', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'Europe/London' }, +}); +timezoneCrane.create(); + +const timezoneCraneStraight = new TimepickerUI('#timezone-crane-straight', { + ui: { theme: 'crane-straight', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'Asia/Tokyo' }, +}); +timezoneCraneStraight.create(); + +const timezoneM3 = new TimepickerUI('#timezone-m3', { + ui: { theme: 'm3-green', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'America/Los_Angeles' }, +}); +timezoneM3.create(); + +const timezoneDark = new TimepickerUI('#timezone-dark', { + ui: { theme: 'dark', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'Europe/Paris' }, +}); +timezoneDark.create(); + +const timezoneM2 = new TimepickerUI('#timezone-m2', { + ui: { theme: 'm2', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'Australia/Sydney' }, +}); +timezoneM2.create(); + +const timezoneGlassmorphic = new TimepickerUI('#timezone-glassmorphic', { + ui: { theme: 'glassmorphic', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'America/Chicago' }, +}); +timezoneGlassmorphic.create(); + +const timezonePastel = new TimepickerUI('#timezone-pastel', { + ui: { theme: 'pastel', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'Europe/Berlin' }, +}); +timezonePastel.create(); + +const timezoneAI = new TimepickerUI('#timezone-ai', { + ui: { theme: 'ai', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'Asia/Dubai' }, +}); +timezoneAI.create(); + +const timezoneCyberpunk = new TimepickerUI('#timezone-cyberpunk', { + ui: { theme: 'cyberpunk', enableSwitchIcon: true }, + timezone: { enabled: true, default: 'America/Toronto' }, +}); +timezoneCyberpunk.create(); + diff --git a/app/docs/examples/wheel.ts b/app/docs/examples/wheel.ts new file mode 100644 index 0000000..2a91102 --- /dev/null +++ b/app/docs/examples/wheel.ts @@ -0,0 +1,314 @@ +import { TimepickerUI } from './setup'; + +// Wheel - Basic examples +const wheelBasicPicker = new TimepickerUI('#wheel-basic', { + ui: { mode: 'wheel' }, +}); +wheelBasicPicker.create(); + +const wheel24hPicker = new TimepickerUI('#wheel-24h', { + clock: { type: '24h' }, + ui: { mode: 'wheel' }, +}); +wheel24hPicker.create(); + +const wheelDarkPicker = new TimepickerUI('#wheel-dark', { + ui: { mode: 'wheel', theme: 'dark' }, +}); +wheelDarkPicker.create(); + +const wheelM3Picker = new TimepickerUI('#wheel-m3', { + ui: { mode: 'wheel', theme: 'm3-green' }, +}); +wheelM3Picker.create(); + +const wheelCyberpunkPicker = new TimepickerUI('#wheel-cyberpunk', { + ui: { mode: 'wheel', theme: 'cyberpunk' }, +}); +wheelCyberpunkPicker.create(); + +const wheelStepPicker = new TimepickerUI('#wheel-step', { + clock: { incrementMinutes: 5 }, + ui: { mode: 'wheel' }, +}); +wheelStepPicker.create(); + +// Wheel - All Themes +const wheelThemeList = [ + 'basic', + 'crane', + 'crane-straight', + 'm3-green', + 'dark', + 'm2', + 'glassmorphic', + 'pastel', + 'ai', + 'cyberpunk', +] as const; + +wheelThemeList.forEach((theme) => { + new TimepickerUI(`#wheel-theme-${theme}`, { + ui: { mode: 'wheel', theme, enableSwitchIcon: true }, + }).create(); +}); + +// Compact Wheel - Basic examples +new TimepickerUI('#compact-wheel-12h', { + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-wheel-24h', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-wheel-step', { + clock: { incrementMinutes: 5 }, + ui: { mode: 'compact-wheel' }, +}).create(); + +// Compact Wheel - All Themes +const compactThemeList = [ + 'basic', + 'crane', + 'crane-straight', + 'm3-green', + 'dark', + 'm2', + 'glassmorphic', + 'pastel', + 'ai', + 'cyberpunk', +] as const; + +compactThemeList.forEach((theme) => { + new TimepickerUI(`#compact-theme-${theme}`, { + ui: { mode: 'compact-wheel', theme, enableSwitchIcon: true }, + }).create(); +}); + +// Compact Wheel + Popover — placement auto (default) +new TimepickerUI('#popover-auto', { + ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, +}).create(); + +// Compact Wheel + Popover — placement top +new TimepickerUI('#popover-top', { + ui: { mode: 'compact-wheel', wheel: { placement: 'top' } }, +}).create(); + +// Compact Wheel + Popover — placement bottom +new TimepickerUI('#popover-bottom', { + ui: { mode: 'compact-wheel', wheel: { placement: 'bottom' } }, +}).create(); + +// Compact Wheel + Popover — 24h + placement auto +new TimepickerUI('#popover-24h', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, +}).create(); + +// Compact Wheel + Popover — dark theme + placement auto +new TimepickerUI('#popover-dark', { + ui: { mode: 'compact-wheel', theme: 'dark', wheel: { placement: 'auto' } }, +}).create(); + +// Compact Wheel + Popover — m3-green theme + placement top +new TimepickerUI('#popover-m3', { + ui: { mode: 'compact-wheel', theme: 'm3-green', wheel: { placement: 'top' } }, +}).create(); + +// commitOnScroll — Wheel (auto-commit without OK) +new TimepickerUI('#commit-on-scroll-wheel', { + ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, +}).create(); + +// commitOnScroll — Compact Wheel + Popover +new TimepickerUI('#commit-on-scroll-popover', { + ui: { mode: 'compact-wheel', wheel: { placement: 'auto', commitOnScroll: true } }, +}).create(); + +// commitOnScroll — 24h + Popover +new TimepickerUI('#commit-on-scroll-24h', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel', wheel: { placement: 'auto', commitOnScroll: true } }, +}).create(); + +// Multiple Popover pickers (independent instances) +new TimepickerUI('#multi-popover-1', { + ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, +}).create(); + +new TimepickerUI('#multi-popover-2', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel', theme: 'm3-green', wheel: { placement: 'auto' } }, +}).create(); + +new TimepickerUI('#multi-popover-3', { + ui: { mode: 'compact-wheel', theme: 'dark', wheel: { placement: 'auto' } }, +}).create(); + +// Popover — All Themes +const popoverThemeList = [ + 'basic', + 'crane', + 'crane-straight', + 'm3-green', + 'dark', + 'm2', + 'glassmorphic', + 'pastel', + 'ai', + 'cyberpunk', +] as const; + +popoverThemeList.forEach((theme) => { + new TimepickerUI(`#popover-theme-${theme}`, { + ui: { mode: 'compact-wheel', theme, wheel: { placement: 'auto' } }, + }).create(); +}); + +// Wheel + Disabled Time — all options +new TimepickerUI('#wheel-disabled-hours-12h', { + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8] }, + }, + ui: { mode: 'wheel' }, +}).create(); + +new TimepickerUI('#wheel-disabled-hours-24h', { + clock: { + type: '24h', + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23] }, + }, + ui: { mode: 'wheel' }, +}).create(); + +new TimepickerUI('#wheel-disabled-minutes', { + clock: { + disabledTime: { minutes: [15, 30, 45] }, + }, + ui: { mode: 'wheel' }, +}).create(); + +new TimepickerUI('#wheel-disabled-interval-12h', { + clock: { + type: '12h', + disabledTime: { interval: '10:00 AM - 2:00 PM' }, + }, + ui: { mode: 'wheel' }, +}).create(); + +new TimepickerUI('#wheel-disabled-interval-24h', { + clock: { + type: '24h', + disabledTime: { interval: '12:00 - 18:00' }, + }, + ui: { mode: 'wheel' }, +}).create(); + +new TimepickerUI('#wheel-disabled-intervals-12h', { + clock: { + type: '12h', + disabledTime: { interval: ['9:00 AM - 11:00 AM', '1:00 PM - 3:00 PM'] }, + }, + ui: { mode: 'wheel' }, +}).create(); + +new TimepickerUI('#wheel-disabled-intervals-24h', { + clock: { + type: '24h', + disabledTime: { interval: ['00:00 - 06:00', '12:00 - 13:00', '18:00 - 23:59'] }, + }, + ui: { mode: 'wheel' }, +}).create(); + +new TimepickerUI('#wheel-hide-disabled-hours', { + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8], hideOptions: true }, + }, + ui: { mode: 'wheel' }, +}).create(); + +new TimepickerUI('#wheel-hide-disabled-interval', { + clock: { + type: '24h', + disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'], hideOptions: true }, + }, + ui: { mode: 'wheel' }, +}).create(); + +// Compact Wheel + Disabled Time — all options +new TimepickerUI('#compact-disabled-hours-12h', { + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8] }, + }, + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-disabled-hours-24h', { + clock: { + type: '24h', + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23] }, + }, + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-disabled-minutes', { + clock: { + disabledTime: { minutes: [15, 30, 45] }, + }, + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-disabled-interval-12h', { + clock: { + type: '12h', + disabledTime: { interval: '10:00 AM - 2:00 PM' }, + }, + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-disabled-interval-24h', { + clock: { + type: '24h', + disabledTime: { interval: '12:00 - 18:00' }, + }, + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-disabled-intervals-12h', { + clock: { + type: '12h', + disabledTime: { interval: ['9:00 AM - 11:00 AM', '1:00 PM - 3:00 PM'] }, + }, + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-disabled-intervals-24h', { + clock: { + type: '24h', + disabledTime: { interval: ['00:00 - 06:00', '12:00 - 13:00', '18:00 - 23:59'] }, + }, + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-hide-disabled-hours', { + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8], hideOptions: true }, + }, + ui: { mode: 'compact-wheel' }, +}).create(); + +new TimepickerUI('#compact-hide-disabled-interval', { + clock: { + type: '24h', + disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'], hideOptions: true }, + }, + ui: { mode: 'compact-wheel' }, +}).create(); diff --git a/app/docs/index.html b/app/docs/index.html index 2d558e2..e354181 100644 --- a/app/docs/index.html +++ b/app/docs/index.html @@ -119,2326 +119,29 @@ <h2 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6"> </section> <div class="grid gap-8"> - <section - id="basic-usage" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Basic Usage</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Simple time picker with default settings</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="basic-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:30 PM" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="basic-picker" value="10:30 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const basicTimePicker = new TimepickerUI('#basic-picker'); -basicTimePicker.create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="24h-format" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">24-Hour Format</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Time picker with 24-hour clock format</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="format-24h-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="15:45" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="format-24h-picker" value="15:45" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const format24hPicker = new TimepickerUI('#format-24h-picker', { - clockType: '24h', - enableSwitchIcon: true -}); -format24hPicker.create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="mobile-version" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-purple-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Mobile Version</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Optimized interface for mobile devices</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="mobile-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="11:30 PM" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="mobile-picker" value="14:30" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const mobilePicker = new TimepickerUI('#mobile-picker', { - mobile: true, - clockType: '24h', - enableSwitchIcon: true -}); -mobilePicker.create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="themes" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Different Themes</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Choose from various themes included in the library - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Basic Theme</label - > - <input - id="theme-basic" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="10:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> - <input - id="theme-m2" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="10:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Crane Straight</label - > - <input - id="theme-crane-straight" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:15 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Crane Radius</label - > - <input - id="theme-crane-radius" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Material 3</label - > - <input - id="theme-m3" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:45 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Dark Theme</label - > - <input - id="theme-dark" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Glassmorphic Theme</label - > - <input - id="theme-glassmorphic" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Pastel Theme</label - > - <input - id="theme-pastel" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:00 PM" - /> - </div> - - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >AI Theme</label - > - <input - id="theme-ai" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Cyberpunk Theme</label - > - <input - id="theme-cyberpunk" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:00 PM" - /> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="theme-basic" /> -<input id="theme-crane-straight" /> -<input id="theme-crane-radius" /> -<input id="theme-m3" /> -<input id="theme-dark" /> -<input id="theme-glassmorphic" /> -<input id="theme-pastel" /> -<input id="theme-ai" /> -<input id="theme-cyberpunk" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">new TimepickerUI('#theme-basic', { theme: 'basic' }).create(); -new TimepickerUI('#theme-crane-straight', { theme: 'crane-straight' }).create(); -new TimepickerUI('#theme-crane-radius', { theme: 'crane-radius' }).create(); -new TimepickerUI('#theme-m3', { theme: 'm3' }).create(); -new TimepickerUI('#theme-dark', { theme: 'dark' }).create(); -new TimepickerUI('#theme-glassmorphic', { theme: 'glassmorphic' }).create(); -new TimepickerUI('#theme-pastel', { theme: 'pastel' }).create(); -new TimepickerUI('#theme-ai', { theme: 'ai' }).create(); -new TimepickerUI('#theme-cyberpunk', { theme: 'cyberpunk' }).create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="timezone-themes" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone - All Themes</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Preview timezone selector across all available themes - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> - <input - id="timezone-basic" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> - <input - id="timezone-crane" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Crane Straight</label - > - <input - id="timezone-crane-straight" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >M3 Green</label - > - <input - id="timezone-m3" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> - <input - id="timezone-dark" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> - <input - id="timezone-m2" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Glassmorphic</label - > - <input - id="timezone-glassmorphic" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Pastel</label - > - <input - id="timezone-pastel" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> - <input - id="timezone-ai" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Cyberpunk</label - > - <input - id="timezone-cyberpunk" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:00 PM" - /> - </div> - </div> - </div> - </div> - </section> - - <section - id="range-themes" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range - All Themes</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Preview range selector across all available themes - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> - <input - id="range-basic" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> - <input - id="range-crane" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Crane Straight</label - > - <input - id="range-crane-straight" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >M3 Green</label - > - <input - id="range-m3" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> - <input - id="range-dark" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> - <input - id="range-m2" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Glassmorphic</label - > - <input - id="range-glassmorphic" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Pastel</label - > - <input - id="range-pastel" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> - <input - id="range-ai" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Cyberpunk</label - > - <input - id="range-cyberpunk" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00 AM - 05:00 PM" - /> - </div> - </div> - </div> - </div> - </section> - - <section - id="disabled-times" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Disabled Times</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Block specific hours, minutes, or time intervals - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Disabled Hours</label - > - <input - id="disabled-hours" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="08:00" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Disabled Minutes</label - > - <input - id="disabled-minutes" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Disabled Interval</label - > - <input - id="disabled-interval" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:00 PM" - /> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="disabled-hours" /> -<input id="disabled-minutes" /> -<input id="disabled-interval" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">new TimepickerUI('#disabled-hours', { - disabledTime: { hours: [1, 2, 3, 22, 23] } -}).create(); - -new TimepickerUI('#disabled-minutes', { - disabledTime: { minutes: [15, 30, 45] } -}).create(); - -new TimepickerUI('#disabled-interval', { - disabledTime: { interval: '12:00 - 18:00' } -}).create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="multiple-intervals" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Multiple Intervals</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Block specific hours, minutes, or time intervals - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Disabled Intervals 12h</label - > - <input - id="disabled-intervals-12h" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Disabled Intervals 24h</label - > - <input - id="disabled-intervals-24h" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="11:00" - /> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="disabled-intervals-12h" value="11:00 PM" /> -<input id="disabled-intervals-24h" value="11:00" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">new TimepickerUI('#disabled-intervals-12h', { -disabledTime: { interval: ['12:00 AM - 4:00 AM', '5:30 PM - 8:00 PM'] } -}).create(); - - -new TimepickerUI('#disabled-intervals-24h', { -clockType: '24h', -disabledTime: { interval: ['04:33 - 12:12', '16:34 - 20:22'] } -}).create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="dynamic-updates" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-amber-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Dynamic Updates</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Update disabledTime and other options dynamically - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex flex-col items-center gap-4"> - <input - id="dynamic-update-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:00 AM" - /> - <div class="flex gap-2"> - <button - id="update-morning-shift" - class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors" - > - Morning Shift - </button> - <button - id="update-evening-shift" - class="px-6 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg font-medium transition-colors" - > - Evening Shift - </button> - <button - id="clear-restrictions" - class="px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors" - > - Clear All - </button> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="dynamic-update-picker" value="10:00 AM" /> -<button id="update-morning-shift">Morning Shift</button> -<button id="update-evening-shift">Evening Shift</button> -<button id="clear-restrictions">Clear All</button></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const picker = new TimepickerUI('#dynamic-update-picker', { - clock: { disabledTime: { hours: [9, 10, 11, 12] } } -}); -picker.create(); - -// Update to morning shift (disable 0-8) -document.getElementById('update-morning-shift') - .addEventListener('click', () => { - picker.update({ - clock: { disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8] } } - }, true); - }); - -// Update to evening shift (disable 18-23) -document.getElementById('update-evening-shift') - .addEventListener('click', () => { - picker.update({ - clock: { disabledTime: { hours: [18, 19, 20, 21, 22, 23] } } - }, true); - }); - -// Clear all restrictions -document.getElementById('clear-restrictions') - .addEventListener('click', () => { - picker.update({ clock: { disabledTime: { hours: [] } } }, true); - });</code></pre> - </div> - </div> - </div> - </section> - - <section - id="dynamic-interval-updates" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-rose-50 to-red-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Dynamic Interval Updates</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Update disabled intervals dynamically for shift scheduling - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex flex-col items-center gap-4"> - <input - id="dynamic-interval-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:00" - /> - <div class="flex gap-2 flex-wrap justify-center"> - <button - id="update-single-interval" - class="px-4 py-2 bg-rose-500 hover:bg-rose-600 text-white rounded-lg font-medium transition-colors" - > - Single Interval - </button> - <button - id="update-multiple-intervals" - class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg font-medium transition-colors" - > - Multiple Intervals - </button> - <button - id="clear-intervals" - class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-medium transition-colors" - > - Clear - </button> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="dynamic-interval-picker" value="10:00" /> -<button id="update-single-interval">Single Interval</button> -<button id="update-multiple-intervals">Multiple Intervals</button> -<button id="clear-intervals">Clear</button></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const intervalPicker = new TimepickerUI('#dynamic-interval-picker', { - clock: { type: '24h', disabledTime: { interval: '09:00 - 12:00' } } -}); -intervalPicker.create(); - -// Update to single interval (lunch break) -document.getElementById('update-single-interval') - .addEventListener('click', () => { - intervalPicker.update({ - clock: { disabledTime: { interval: '12:00 - 13:00' } } - }, true); - }); - -// Update to multiple intervals (shift schedule) -document.getElementById('update-multiple-intervals') - .addEventListener('click', () => { - intervalPicker.update({ - clock: { - disabledTime: { - interval: ['00:00 - 08:00', '12:00 - 13:00', '18:00 - 23:59'] - } - } - }, true); - }); - -// Clear all intervals -document.getElementById('clear-intervals') - .addEventListener('click', () => { - intervalPicker.update({ clock: { disabledTime: {} } }, true); - });</code></pre> - </div> - </div> - </div> - </section> - - <section - id="editable-mode" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Editable Mode</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Allow direct editing of time values in picker</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="editable-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="09:15 PM" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="editable-picker" value="09:15 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const editablePicker = new TimepickerUI('#editable-picker', { - editable: true, - focusInputAfterCloseModal: true, - enableSwitchIcon: true -}); -editablePicker.create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="smooth-hour-snap" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-violet-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Smooth Hour Snap</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Fluid hour dragging with smooth snapping animation - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="smooth-hour-snap-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:30 PM" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="smooth-hour-snap-picker" value="10:30 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const smoothHourPicker = new TimepickerUI('#smooth-hour-snap-picker', { - clock: { - smoothHourSnap: true - } -}); -smoothHourPicker.create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="wheel-mode" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-sky-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Wheel Mode</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Scroll-spinner interface — replaces the analog clock face with touch-friendly wheels - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >12h Wheel</label - > - <input - id="wheel-basic" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >24h Wheel</label - > - <input - id="wheel-24h" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" - value="14:45" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Wheel + Dark Theme</label - > - <input - id="wheel-dark" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" - value="08:00 AM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Wheel + M3 Theme</label - > - <input - id="wheel-m3" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" - value="09:15 AM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Wheel + Cyberpunk</label - > - <input - id="wheel-cyberpunk" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" - value="11:00 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Wheel + 5 min step</label - > - <input - id="wheel-step" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" - value="07:30 AM" - /> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="wheel-basic" value="10:30 PM" /> -<input id="wheel-24h" value="14:45" /> -<input id="wheel-dark" value="08:00 AM" /> -<input id="wheel-m3" value="09:15 AM" /> -<input id="wheel-cyberpunk" value="11:00 PM" /> -<input id="wheel-step" value="07:30 AM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">// Basic 12h wheel -new TimepickerUI('#wheel-basic', { - ui: { mode: 'wheel' } -}).create(); - -// 24h wheel -new TimepickerUI('#wheel-24h', { - clock: { type: '24h' }, - ui: { mode: 'wheel' } -}).create(); - -// Wheel with dark theme -new TimepickerUI('#wheel-dark', { - ui: { mode: 'wheel', theme: 'dark' } -}).create(); - -// Wheel with M3 theme -new TimepickerUI('#wheel-m3', { - ui: { mode: 'wheel', theme: 'm3-green' } -}).create(); - -// Wheel with Cyberpunk theme -new TimepickerUI('#wheel-cyberpunk', { - ui: { mode: 'wheel', theme: 'cyberpunk' } -}).create(); - -// Wheel with 5-minute step -new TimepickerUI('#wheel-step', { - clock: { incrementMinutes: 5 }, - ui: { mode: 'wheel' } -}).create();</code></pre> - </div> - </div> - <div - class="mt-6 p-4 bg-sky-50 dark:bg-sky-900/20 rounded-lg border border-sky-200 dark:border-sky-800" - > - <h4 class="text-sm font-semibold text-sky-900 dark:text-sky-200 mb-2">Wheel Mode Notes</h4> - <ul class="text-sm text-sky-800 dark:text-sky-300 space-y-1 list-disc list-inside"> - <li> - Set <code class="bg-sky-100 dark:bg-sky-800 px-1 rounded">ui.mode: 'wheel'</code> to replace - the analog clock with scroll wheels - </li> - <li>Works with all themes via CSS variables</li> - <li>AM/PM column appears automatically in 12h mode</li> - <li> - <code class="bg-sky-100 dark:bg-sky-800 px-1 rounded">clock.incrementMinutes</code> controls - the minute step between wheel items - </li> - <li>Keyboard: Arrow Up/Down scrolls one item, Tab moves between columns</li> - <li>Range plugin is not supported in wheel mode</li> - </ul> - </div> - </div> - </section> - - <section - id="inline-mode" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Inline Mode</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Always-visible timepicker embedded in the page - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid md:grid-cols-2 gap-8 items-start"> - <div> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Selected Time:</label - > - <input - id="inline-picker" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="14:30" - /> - </div> - <div> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Timepicker:</label - > - <div - id="inline-container" - class="border border-gray-200 dark:border-gray-600 rounded-lg p-4" - ></div> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="inline-picker" value="14:30" /> -<div id="inline-container"></div></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const inlinePicker = new TimepickerUI('#inline-picker', { - inline: { - enabled: true, - containerId: 'inline-container', - showButtons: false, - autoUpdate: true - }, - clockType: '24h' -}); -inlinePicker.create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="event-handling" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Event Handling</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Listen to value changes and user interactions</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex flex-col items-center space-y-4"> - <input - id="event-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="12:00 PM" - /> - <div class="text-center"> - <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Event Log:</p> - <div - id="event-log" - class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-4 min-h-[100px] max-h-[200px] overflow-y-auto" - > - <p class="text-gray-500 dark:text-gray-400 text-sm">Events will appear here...</p> - </div> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="event-picker" value="12:00 PM" /> -<div id="event-log"></div></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const eventPicker = new TimepickerUI('#event-picker'); -eventPicker.create(); - -const eventLog = document.querySelector('#event-log'); -const picker = document.querySelector('#event-picker'); - -picker.addEventListener('accept', (e) => { - eventLog.innerHTML += `<p>Accept: ${e.detail.hour}:${e.detail.minutes}</p>`; -}); - -picker.addEventListener('cancel', (e) => { - eventLog.innerHTML += `<p>Cancel event fired</p>`; -});</code></pre> - </div> - </div> - </div> - </section> - - <section - id="custom-labels" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-pink-50 to-rose-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Custom Labels</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Customize all labels and text in different languages - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="custom-labels-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:30 PM" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="custom-labels-picker" value="10:30 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const customLabelsPicker = new TimepickerUI('#custom-labels-picker', { -timeLabel: 'Select time', -okLabel: 'It is ok', -cancelLabel: 'Nope', -amLabel: 'AM', -pmLabel: 'PM', -mobileTimeLabel: 'Enter Time', -hourMobileLabel: 'Hour', -minuteMobileLabel: 'Minute', -}); -customLabelsPicker.create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="multiple-pickers" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Multiple Pickers</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Multiple isolated time pickers on the same page - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Start Time</label - > - <input - id="multi-picker-1" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="09:00" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Break Time</label - > - <input - id="multi-picker-2" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="12:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >End Time</label - > - <input - id="multi-picker-3" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" - value="17:00" - /> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="multi-picker-1" value="09:00" /> -<input id="multi-picker-2" value="12:30 PM" /> -<input id="multi-picker-3" value="17:00" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">new TimepickerUI('#multi-picker-1', { - clockType: '24h', - theme: 'basic' -}).create(); - -new TimepickerUI('#multi-picker-2', { - clockType: '12h', - theme: 'm3' -}).create(); - -new TimepickerUI('#multi-picker-3', { - clockType: '24h', - theme: 'crane-radius' -}).create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="event-emitter-api" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">EventEmitter API (v3.1+)</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Modern event handling with on(), once(), and off() methods - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex flex-col items-center space-y-4"> - <input - id="event-emitter-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" - value="02:30 PM" - /> - <div class="text-center"> - <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Event Log:</h4> - <div - id="emitter-event-log" - class="w-full max-w-md h-48 overflow-y-auto bg-gray-800 dark:bg-gray-900 rounded-lg p-4 text-left font-mono text-xs" - ></div> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="event-emitter-picker" value="02:30 PM" /> -<div id="emitter-event-log"></div></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const picker = new TimepickerUI('#event-emitter-picker'); -picker.create(); - -// Subscribe to events -picker.on('confirm', (data) => { - console.log('Confirmed:', data.hour, data.minutes); -}); - -picker.on('cancel', (data) => { - console.log('Cancelled'); -}); - -picker.on('update', (data) => { - console.log('Updated:', data); -}); - -picker.on('select:hour', (data) => { - console.log('Hour selected:', data.hour); -}); - -picker.on('select:minute', (data) => { - console.log('Minute selected:', data.minutes); -}); - -// One-time event -picker.once('open', () => { - console.log('Opened for the first time!'); -}); - -// Unsubscribe -const handler = (data) => console.log(data); -picker.on('confirm', handler); -picker.off('confirm', handler);</code></pre> - </div> - </div> - </div> - </section> - - <section - id="custom-theme" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-fuchsia-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Custom Theme</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Override default styles with your custom theme - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="custom-theme-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-colors" - value="03:45 PM" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="custom-theme-picker" value="03:45 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const customThemePicker = new TimepickerUI('#custom-theme-picker'); -customThemePicker.create(); - -// Override theme with custom styles -customThemePicker.setTheme({ - primaryColor: '#9333ea', - backgroundColor: '#1f2937', - surfaceColor: '#374151', - surfaceHoverColor: '#4b5563', - textColor: '#f3f4f6', - borderRadius: '12px' -});</code></pre> - </div> - </div> - </div> - </section> - - <section - id="new-events-and-callbacks" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Callback Options</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Alternative way to handle events using callback options - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="new-events-and-callbacks-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:00 PM" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="new-events-and-callbacks-picker" value="10:00 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const newEventsAndCallbacksPicker = new TimepickerUI('#new-events-and-callbacks-picker', { - callbacks: { - onOpen: (data) => { - console.log('Picker opened!', data); - }, - onCancel: (data) => { - console.log('Picker cancelled', data); - }, - onConfirm: (data) => { - console.log('Time confirmed', data); - }, - onUpdate: (data) => { - console.log('Time updated', data); - }, - onSelectHour: (data) => { - console.log('Hour mode selected', data); - }, - onSelectMinute: (data) => { - console.log('Minute mode selected', data); - }, - onSelectAM: (data) => { - console.log('AM selected', data); - }, - onSelectPM: (data) => { - console.log('PM selected', data); - }, - onError: (data) => { - console.log('Error occurred', data.error); - } - } -}); -newEventsAndCallbacksPicker.create(); - -const pickerElement = newEventsAndCallbacksPicker.getElement(); -if (pickerElement) { - pickerElement.addEventListener('timepicker:open', (data) => { - console.log('Picker opened!', data); - }); - pickerElement.addEventListener('timepicker:cancel', (data) => { - console.log('Picker cancelled', data); - }); -} -</code></pre> - </div> - </div> - </div> - </section> - - <section - id="advanced-config" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Advanced Configuration</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Complex setup with multiple advanced options</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="advanced-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:00" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="advanced-picker" value="10:00" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const advancedPicker = new TimepickerUI('#advanced-picker', { - clockType: '12h', - theme: 'm3', - enableSwitchIcon: true, - focusTrap: true, - editable: true, - focusInputAfterCloseModal: true, - delayHandler: 500, - incrementHours: 1, - incrementMinutes: 15, - currentTime: { - time: new Date(), - updateInput: false, - preventClockType: true - }, - disabledTime: { - interval: '22:00 - 06:00' - }, - cssClass: 'my-custom-picker' -}); -advancedPicker.create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="custom-template" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Version 3 events</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Examples of the new version 3.0 events</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="version3-example" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:00" - /> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="version3-example" value="10:00" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const version3Example = new TimepickerUI('#version3-example', { - theme: 'm3', - clockType: '24h', - focusTrap: false, - delayHandler: 200, - onOpen: (data) => { - console.log('Version 3.0 picker opened!', data); - }, -}); -version3Example.create(); - -const pickerElement = version3Example.getElement(); -if (pickerElement) { - pickerElement.addEventListener('timepicker:open', (data) => { - console.log('Picker opened!', data); - }); -} -</code></pre> - </div> - </div> - </div> - </div> - </section> - - <section - id="destroy-example" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-purple-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Destroy example</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Example of how to destroy the timepicker</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="destroy-example" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="14:30" - /> - - <button id="destroy-button" class="ml-4 bg-red-500 text-white px-4 py-2 rounded-md"> - Destroy - </button> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="destroy-example" value="14:30" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const destroyExample = new TimepickerUI('#destroy-example', { -mobile: true, -clockType: '24h', -enableSwitchIcon: true -}); -destroyExample.create(); - -const pickerElement = destroyExample.getElement(); -if (pickerElement) { - pickerElement.addEventListener('timepicker:open', (data) => { - console.log('Picker opened!', data); - }); -} -</code></pre> - </div> - </div> - </div> - </section> - <section - id="clear-button" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Clear Button</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Allow users to clear selected time with a dedicated button - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="clear-button-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="2:30 PM" - /> - </div> - <div class="mt-4 text-center"> - <p class="text-sm text-gray-600 dark:text-gray-400"> - <strong>Try it:</strong> Open the timepicker and click the "Clear" button on the left side - to reset the time. - </p> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="clear-button-picker" value="2:30 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const clearButtonPicker = new TimepickerUI('#clear-button-picker', { - ui: { - clearButton: true, - theme: 'basic' - }, - labels: { - clear: 'Clear' - }, - callbacks: { - onClear: (data) => { - console.log('Time cleared! Previous value:', data.previousValue); - } - } -}); -clearButtonPicker.create();</code></pre> - </div> - </div> - <div - class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800" - > - <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-200 mb-2"> - Clear Button Behavior - </h4> - <ul class="text-sm text-blue-800 dark:text-blue-300 space-y-1 list-disc list-inside"> - <li>Removes the selected time value completely</li> - <li>Resets clock hands to neutral position (12:00 for 12h, 12:00 for 24h)</li> - <li>Disables the confirm button until a new time is selected</li> - <li> - Triggers the <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">onClear</code> callback - with previous value - </li> - <li>The button is disabled when no time is selected</li> - <li> - Use - <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded" - >clearBehavior: { clearInput: false }</code - > - to keep the input value when clearing - </li> - </ul> - </div> - <div class="mt-8"> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"> - Clear without clearing input - </h4> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-4"> - <div class="flex justify-center"> - <input - id="clear-no-input-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="9:15 AM" - /> - </div> - <div class="mt-4 text-center"> - <p class="text-sm text-gray-600 dark:text-gray-400"> - <strong>Try it:</strong> Click "Clear" — the clock resets but the input keeps its value. - </p> - </div> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const picker = new TimepickerUI('#clear-no-input-picker', { - ui: { clearButton: true }, - clearBehavior: { - clearInput: false - }, - callbacks: { - onClear: (data) => { - console.log('Clear clicked (input kept)!', data.previousValue); - } - } -}); -picker.create();</code></pre> - </div> - </div> - </div> - </section> - - <section - id="timezone-selector" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-cyan-50 to-sky-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone Selector (Optional)</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Opt-in timezone selector for B2B/global use cases (UI-only, no conversions) - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="timezone-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="14:30" - /> - </div> - <div class="mt-4 text-center"> - <p class="text-sm text-gray-600 dark:text-gray-400"> - Selected timezone: - <span id="tz-display" class="font-semibold text-blue-600 dark:text-blue-400">-</span> - </p> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="timezone-picker" value="14:30" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const timezonePicker = new TimepickerUI('#timezone-picker', { - clock: { - type: '24h' - }, - timezone: { - enabled: true, - label: 'Timezone', - whitelist: ['UTC', 'America/New_York', 'Europe/London', 'Europe/Warsaw', 'Asia/Tokyo'] - }, - callbacks: { - onTimezoneChange: (data) => { - console.log('Timezone changed:', data.timezone); - document.getElementById('tz-display').textContent = data.timezone; - } - } -}); -timezonePicker.create();</code></pre> - </div> - </div> - <div - class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg" - > - <p class="text-sm text-blue-800 dark:text-blue-300"> - <strong>Note:</strong> The timezone feature is opt-in and presentation-only. It does not - perform automatic time conversions. Use it for collecting timezone metadata alongside time - input. - </p> - </div> - </div> - </section> - - <section - id="timezone-world-cities" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone Selector - World Cities</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Comprehensive timezone example with major cities around the world - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="space-y-6"> - <div class="flex justify-center"> - <input - id="timezone-world-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors" - value="09:00" - /> - </div> - <div - class="mt-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600" - > - <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> - <div> - <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - 📍 Selected Timezone: - </p> - <p id="tz-world-display" class="text-lg font-bold text-indigo-600 dark:text-indigo-400"> - - - </p> - </div> - <div> - <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - 🕐 Selected Time: - </p> - <p id="tz-world-time" class="text-lg font-bold text-indigo-600 dark:text-indigo-400"> - - - </p> - </div> - </div> - <div class="mt-4"> - <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">🌍 UTC Offset:</p> - <p id="tz-world-offset" class="text-base font-semibold text-gray-900 dark:text-gray-100"> - - - </p> - </div> - </div> - <div - class="mt-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg border border-blue-200 dark:border-blue-800" - > - <p class="text-sm text-blue-900 dark:text-blue-200 font-medium mb-2"> - 🌏 Try switching between these cities: - </p> - <div class="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs text-blue-800 dark:text-blue-300"> - <div>🗽 New York (EST/EDT)</div> - <div>🌉 San Francisco</div> - <div>🗼 Tokyo</div> - <div>🏛️ London</div> - <div>🥐 Paris</div> - <div>🕌 Dubai</div> - <div>🏖️ Sydney</div> - <div>🇧🇷 São Paulo</div> - <div>🌐 UTC</div> - </div> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="timezone-world-picker" value="09:00" /> -<p id="tz-world-display"></p> -<p id="tz-world-time"></p> -<p id="tz-world-offset"></p></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const worldTimezonePicker = new TimepickerUI('#timezone-world-picker', { - clock: { type: '24h' }, - ui: { theme: 'm3-green', enableSwitchIcon: true }, - timezone: { - enabled: true, - label: 'Select City', - // No default - user must select a timezone - whitelist: [ - 'UTC', - 'America/New_York', - 'America/Los_Angeles', - 'America/Chicago', - 'America/Sao_Paulo', - 'Europe/London', - 'Europe/Paris', - 'Europe/Berlin', - 'Europe/Moscow', - 'Asia/Dubai', - 'Asia/Tokyo', - 'Asia/Shanghai', - 'Asia/Singapore', - 'Australia/Sydney', - 'Pacific/Auckland' - ] - }, - callbacks: { - onTimezoneChange: (data) => { - document.getElementById('tz-world-display').textContent = data.timezone; - - // Get UTC offset for the selected timezone - const formatter = new Intl.DateTimeFormat('en-US', { - timeZone: data.timezone, - timeZoneName: 'shortOffset' - }); - const parts = formatter.formatToParts(new Date()); - const offset = parts.find(p => p.type === 'timeZoneName')?.value || 'UTC'; - document.getElementById('tz-world-offset').textContent = offset; - }, - onConfirm: (data) => { - const time = data.hour + ':' + data.minutes + (data.type ? ' ' + data.type : ''); - document.getElementById('tz-world-time').textContent = time; - } - } -}); -worldTimezonePicker.create();</code></pre> - </div> - </div> - <div - class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg" - > - <p class="text-sm text-amber-800 dark:text-amber-300"> - <strong>💡 Tip:</strong> The timezone selector automatically displays UTC offsets for each - city. This is a UI-only feature - no automatic time conversions happen. Perfect for scheduling - apps, booking systems, or any global application where users need to specify their timezone. - </p> - </div> - </div> - </section> - - <!-- Timezone All Themes Section --> - <section class="mb-12"> - <div - id="timezone-themes" - class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone - All Themes</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Preview timezone selector across all available themes - </p> - - <div class="mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Basic</label> - <input - id="tz-theme-basic" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Crane</label> - <input - id="tz-theme-crane" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Crane Straight</label> - <input - id="tz-theme-crane-straight" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">M3 Green</label> - <input - id="tz-theme-m3-green" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Dark</label> - <input - id="tz-theme-dark" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">M2</label> - <input - id="tz-theme-m2" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Glassmorphic</label> - <input - id="tz-theme-glassmorphic" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Pastel</label> - <input - id="tz-theme-pastel" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">AI</label> - <input - id="tz-theme-ai" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - <div class="space-y-2"> - <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Cyberpunk</label> - <input - id="tz-theme-cyberpunk" - type="text" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - placeholder="Select time" - /> - </div> - </div> - </div> - </section> - - <!-- getValue Without Opening Section --> - <section - id="get-value-demo" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden mb-12" - > - <div - class="bg-gradient-to-r from-lime-50 to-green-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white"> - getValue() Without Opening Widget - </h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Read time values programmatically without opening the modal (Bug Fix Demo) - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex flex-col items-center gap-6"> - <div class="w-full max-w-md"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> - Time Input (pre-filled with 14:30) - </label> - <input - id="getvalue-demo-picker" - class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="14:30" - /> - </div> - - <div class="flex gap-3 flex-wrap justify-center"> - <button - id="getvalue-button" - class="px-5 py-2.5 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors shadow-sm hover:shadow-md" - > - Get Value (without opening) - </button> - <button - id="setvalue-button" - class="px-5 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-medium transition-colors shadow-sm hover:shadow-md" - > - Set to 18:45 - </button> - <button - id="open-check-button" - class="px-5 py-2.5 bg-purple-500 hover:bg-purple-600 text-white rounded-lg font-medium transition-colors shadow-sm hover:shadow-md" - > - Open & Check - </button> - </div> - - <div - id="getvalue-result" - class="w-full max-w-md p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 rounded-lg border border-blue-200 dark:border-gray-500" - > - <div class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Result:</div> - <pre - id="getvalue-output" - class="text-sm text-gray-900 dark:text-white font-mono whitespace-pre-wrap" - > -Click "Get Value" to see result</pre - > - </div> - - <div - class="w-full max-w-md bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded-lg p-4" - > - <div class="flex items-start"> - <svg - class="w-5 h-5 text-green-600 dark:text-green-400 mt-0.5 mr-2" - fill="currentColor" - viewBox="0 0 20 20" - > - <path - fill-rule="evenodd" - d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" - clip-rule="evenodd" - /> - </svg> - <div class="text-sm text-green-800 dark:text-green-300"> - <strong>Fixed in v4.1.0:</strong> getValue() now correctly reads from input value when - modal hasn't been opened yet. Degrees are also calculated correctly! - </div> - </div> - </div> - </div> - </div> + <!-- Partials: basic & themes --> + <%= require("./partials/basic-themes.html") %> - <div class="space-y-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"> - The Bug That Was Fixed - </h4> - <div - class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4" - > - <p class="text-sm text-red-800 dark:text-red-300"> - <strong>Before Fix:</strong> Calling getValue() without opening the modal returned default - values (12:00) instead of reading from the input field. - </p> - </div> - <div - class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4" - > - <p class="text-sm text-green-800 dark:text-green-300"> - <strong>After Fix:</strong> getValue() now checks if modal exists. If not, it reads - directly from the input value using getInputValue() utility. - </p> - </div> - </div> - - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="getvalue-demo-picker" value="14:30" /> -<button id="getvalue-button">Get Value</button> -<button id="setvalue-button">Set to 18:45</button></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const picker = new TimepickerUI('#getvalue-demo-picker', { - clock: { type: '24h' } -}); -picker.create(); + <!-- Partials: disabled & input options --> + <%= require("./partials/disabled.html") %> -// Get value without opening modal - now works correctly! -document.getElementById('getvalue-button') - .addEventListener('click', () => { - const value = picker.getValue(); - console.log(value); - // Returns: { hour: '14', minutes: '30', time: '14:30', ... } - }); + <!-- Partials: wheel mode --> + <%= require("./partials/wheel.html") %> -// Set value programmatically -document.getElementById('setvalue-button') - .addEventListener('click', () => { - picker.setValue('18:45'); - console.log(picker.getValue()); // Works immediately! - });</code></pre> - </div> - </div> - </div> - </div> - </section> + <!-- Partials: compact-wheel hide footer --> + <%= require("./partials/hide-footer.html") %> - <!-- Range Mode Section --> - <section class="mb-12"> - <div - id="range-mode" - class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (From–To)</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Select a time range for booking, scheduling, or reservation use cases. - </p> + <!-- Partials: popover & features --> + <%= require("./partials/popover-features.html") %> - <div class="mt-6 grid md:grid-cols-2 gap-6"> - <div class="space-y-4"> - <input - id="range-picker" - type="text" - class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - value="" - placeholder="Select time range" - /> - <div - id="range-result" - class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" - > - Selected range: <span id="range-display">--:-- – --:--</span> - <br /> - Duration: <span id="range-duration">0</span> minutes - </div> - </div> + <!-- Partials: advanced & clear button --> + <%= require("./partials/advanced-clear.html") %> - <div class="space-y-3"> - <pre><code class="language-html"><input id="range-picker" value="09:00" /></code></pre> - <pre><code class="language-javascript">const rangePicker = new TimepickerUI('#range-picker', { - clock: { type: '12h' }, - range: { - enabled: true, - minDuration: 30, - maxDuration: 480, - fromLabel: 'Start', - toLabel: 'End', - }, - callbacks: { - onRangeConfirm: (data) => { - console.log('Range confirmed:', data.from, '–', data.to); - document.getElementById('range-display').textContent = - data.from + ' – ' + data.to; - document.getElementById('range-duration').textContent = data.duration; - }, - onRangeValidation: (data) => { - if (!data.valid) { - console.log('Invalid range: duration must be', - data.minDuration, '-', data.maxDuration, 'min'); - } - }, - }, -}); -rangePicker.create();</code></pre> - </div> - </div> - <div - class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg" - > - <p class="text-sm text-amber-800 dark:text-amber-300"> - <strong>Tip:</strong> Range mode uses a single clock face. After selecting the "From" time, it - automatically switches to "To" selection. Use minDuration/maxDuration for validation (e.g., - minimum booking 30 minutes, max 8 hours). - </p> - </div> - </div> - </section> - - <!-- Range Mode 24h Section --> - <section class="mb-12"> - <div - id="range-mode-24h" - class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (24h Format)</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Time range selection with 24-hour clock format. - </p> + <!-- Partials: timezone & API --> + <%= require("./partials/timezone-api.html") %> - <div class="mt-6 grid md:grid-cols-2 gap-6"> - <div class="space-y-4"> - <input - id="range-picker-24h" - type="text" - class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - value="" - placeholder="Select time range" - /> - <div - id="range-result-24h" - class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" - > - Selected range: <span id="range-display-24h">--:-- – --:--</span> - <br /> - Duration: <span id="range-duration-24h">0</span> minutes - </div> - </div> - - <div class="space-y-3"> - <pre><code class="language-html"><input id="range-picker-24h" /></code></pre> - <pre><code class="language-javascript">const range24hPicker = new TimepickerUI('#range-picker-24h', { - clock: { type: '24h' }, - range: { - enabled: true, - minDuration: 60, - maxDuration: 720, - fromLabel: 'Start', - toLabel: 'End', - }, - callbacks: { - onRangeConfirm: (data) => { - console.log(data.from, '–', data.to); - document.getElementById('range-display-24h').textContent = - data.from + ' – ' + data.to; - document.getElementById('range-duration-24h').textContent = data.duration; - }, - }, -}); -range24hPicker.create();</code></pre> - </div> - </div> - </div> - </section> - - <!-- Range Mode 12h AM/PM Section --> - <section class="mb-12"> - <div - id="range-mode-12h-ampm" - class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (12h AM/PM)</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Time range selection spanning AM to PM periods. Try selecting 09:00 AM to 06:00 PM. - </p> - - <div class="mt-6 grid md:grid-cols-2 gap-6"> - <div class="space-y-4"> - <input - id="range-picker-12h-ampm" - type="text" - class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white" - value="09:00 AM - 05:00 PM" - placeholder="Select time range" - /> - <div - id="range-result-12h-ampm" - class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" - > - Selected range: <span id="range-display-12h-ampm">09:00 AM – 05:00 PM</span> - <br /> - Duration: <span id="range-duration-12h-ampm">480</span> minutes - </div> - </div> - - <div class="space-y-3"> - <pre><code class="language-html"><input id="range-picker-12h-ampm" value="09:00 AM - 05:00 PM" /></code></pre> - <pre><code class="language-javascript">const range12hAmPmPicker = new TimepickerUI('#range-picker-12h-ampm', { - clock: { type: '12h' }, - range: { - enabled: true, - fromLabel: 'From', - toLabel: 'To', - }, - callbacks: { - onRangeConfirm: (data) => { - console.log(data.from, '–', data.to); - document.getElementById('range-display-12h-ampm').textContent = - data.from + ' – ' + data.to; - document.getElementById('range-duration-12h-ampm').textContent = data.duration; - }, - }, -}); -range12hAmPmPicker.create();</code></pre> - </div> - </div> - <div - class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg" - > - <p class="text-sm text-green-800 dark:text-green-300"> - <strong>AM/PM Sync:</strong> When switching between From (AM) and To (PM) tabs, the clock - correctly synchronizes the AM/PM state. Try clicking on the "To" tab and selecting any hour - (1-12) - all hours are selectable in PM mode. - </p> - </div> - </div> - </section> + <!-- Partials: range mode --> + <%= require("./partials/range.html") %> </div> </main> diff --git a/app/docs/index.ts b/app/docs/index.ts index 3fe050b..fcd37f5 100644 --- a/app/docs/index.ts +++ b/app/docs/index.ts @@ -1,987 +1,12 @@ -import { TimepickerUI, PluginRegistry } from '../src/index'; -import { RangePlugin } from '../src/plugins/range'; -import { TimezonePlugin } from '../src/plugins/timezone'; -import { WheelPlugin } from '../src/plugins/wheel'; -import { codeToHtml } from 'shiki'; - -PluginRegistry.register(RangePlugin); -PluginRegistry.register(TimezonePlugin); -PluginRegistry.register(WheelPlugin); - -console.log( - `%c -████████╗██╗███╗ ███╗███████╗██████╗ ██╗ ██████╗███████╗██████╗ -╚══██╔══╝██║████╗ ████║██╔════╝██╔══██╗██║██╔════╝██╔════╝██╔══██╗ - ██║ ██║██╔████╔██║█████╗ ██████╔╝██║██║ █████╗ ██████╔╝ - ██║ ██║██║╚██╔╝██║██╔══╝ ██╔═══╝ ██║██║ ██╔══╝ ██╔══██╗ - ██║ ██║██║ ╚═╝ ██║███████╗██║ ██║╚██████╗███████╗██║ ██║ - ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝ ╚═════╝╚══════╝╚═╝ ╚═╝ - T I M E P I C K E R - U I - -✨ Because native <input type="time"> is illegal. -🤫 Shh... it just wraps <input>. But damn it looks good. -👉 github.com/pglejzer/timepicker-ui -`, - 'color: #00BCD4; font-weight: bold; font-family: monospace; font-size: 11px;', -); - -const codeBlocks = document.querySelectorAll<HTMLElement>('pre code[class*="language-"]'); - -codeBlocks.forEach(async (codeElement) => { - const block = codeElement.parentElement as HTMLElement; - if (!block || block.id === 'getvalue-output') return; - - const lang = block.dataset.lang || 'js'; - const rawCode = block.innerText.trim(); - - const html = await codeToHtml(rawCode, { - lang, - theme: 'github-dark', - }); - - const wrapper = document.createElement('div'); - wrapper.innerHTML = html; - const highlightedBlock = wrapper.firstElementChild!; - - highlightedBlock.classList.add( - 'w-full', - 'overflow-x-auto', - 'overflow-y-hidden', - 'px-4', - 'py-3', - 'rounded-md', - 'bg-[#0d1117]', - ); - - const copyBtn = document.createElement('button'); - copyBtn.innerText = 'Copy'; - copyBtn.className = - 'absolute top-2 right-2 text-xs px-2 py-1 bg-gray-800 text-white rounded hover:bg-gray-700 transition'; - copyBtn.addEventListener('click', async () => { - await navigator.clipboard.writeText(rawCode); - copyBtn.innerText = 'Copied!'; - setTimeout(() => (copyBtn.innerText = 'Copy'), 1500); - }); - - const wrapperDiv = document.createElement('div'); - wrapperDiv.className = 'relative mb-6'; - wrapperDiv.appendChild(copyBtn); - wrapperDiv.appendChild(highlightedBlock); - - block.replaceWith(wrapperDiv); -}); - -const basicTimePicker = new TimepickerUI('#basic-picker', { - clock: { - autoSwitchToMinutes: true, - }, -}); -basicTimePicker.create(); - -const format24hPicker = new TimepickerUI('#format-24h-picker', { - clock: { type: '24h' }, - ui: { enableSwitchIcon: true }, -}); -format24hPicker.create(); - -const mobilePicker = new TimepickerUI('#mobile-picker', { - clock: { type: '24h' }, - ui: { mobile: true, enableSwitchIcon: true }, -}); -mobilePicker.create(); - -const themeBasicPicker = new TimepickerUI('#theme-basic', { - ui: { theme: 'basic', enableSwitchIcon: true }, -}); -themeBasicPicker.create(); - -const themeCraneStraightPicker = new TimepickerUI('#theme-crane-straight', { - ui: { theme: 'crane-straight', enableSwitchIcon: true }, -}); -themeCraneStraightPicker.create(); - -const themeCraneRadiusPicker = new TimepickerUI('#theme-crane-radius', { - ui: { theme: 'crane', enableSwitchIcon: true }, -}); -themeCraneRadiusPicker.create(); - -const themeM3Picker = new TimepickerUI('#theme-m3', { - ui: { theme: 'm3-green', enableSwitchIcon: true }, -}); -themeM3Picker.create(); - -const themeDarkPicker = new TimepickerUI('#theme-dark', { - ui: { theme: 'dark', enableSwitchIcon: true }, -}); -themeDarkPicker.create(); - -const themeM2Picker = new TimepickerUI('#theme-m2', { - ui: { theme: 'm2', enableSwitchIcon: true }, -}); -themeM2Picker.create(); - -const themeGlassmorphicPicker = new TimepickerUI('#theme-glassmorphic', { - ui: { theme: 'glassmorphic', enableSwitchIcon: true }, -}); -themeGlassmorphicPicker.create(); - -const themePastelPicker = new TimepickerUI('#theme-pastel', { - ui: { theme: 'pastel', enableSwitchIcon: true }, -}); -themePastelPicker.create(); - -const themeAIPicker = new TimepickerUI('#theme-ai', { - ui: { theme: 'ai', enableSwitchIcon: true }, -}); - -themeAIPicker.create(); - -const themeCyberpunkPicker = new TimepickerUI('#theme-cyberpunk', { - ui: { theme: 'cyberpunk', enableSwitchIcon: true }, -}); -themeCyberpunkPicker.create(); - -const timezoneBasic = new TimepickerUI('#timezone-basic', { - ui: { theme: 'basic', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'America/New_York' }, -}); -timezoneBasic.create(); - -const timezoneCrane = new TimepickerUI('#timezone-crane', { - ui: { theme: 'crane', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'Europe/London' }, -}); -timezoneCrane.create(); - -const timezoneCraneStraight = new TimepickerUI('#timezone-crane-straight', { - ui: { theme: 'crane-straight', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'Asia/Tokyo' }, -}); -timezoneCraneStraight.create(); - -const timezoneM3 = new TimepickerUI('#timezone-m3', { - ui: { theme: 'm3-green', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'America/Los_Angeles' }, -}); -timezoneM3.create(); - -const timezoneDark = new TimepickerUI('#timezone-dark', { - ui: { theme: 'dark', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'Europe/Paris' }, -}); -timezoneDark.create(); - -const timezoneM2 = new TimepickerUI('#timezone-m2', { - ui: { theme: 'm2', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'Australia/Sydney' }, -}); -timezoneM2.create(); - -const timezoneGlassmorphic = new TimepickerUI('#timezone-glassmorphic', { - ui: { theme: 'glassmorphic', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'America/Chicago' }, -}); -timezoneGlassmorphic.create(); - -const timezonePastel = new TimepickerUI('#timezone-pastel', { - ui: { theme: 'pastel', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'Europe/Berlin' }, -}); -timezonePastel.create(); - -const timezoneAI = new TimepickerUI('#timezone-ai', { - ui: { theme: 'ai', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'Asia/Dubai' }, -}); -timezoneAI.create(); - -const timezoneCyberpunk = new TimepickerUI('#timezone-cyberpunk', { - ui: { theme: 'cyberpunk', enableSwitchIcon: true }, - timezone: { enabled: true, default: 'America/Toronto' }, -}); -timezoneCyberpunk.create(); - -const rangeBasic = new TimepickerUI('#range-basic', { - ui: { theme: 'basic', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangeBasic.create(); - -const rangeCrane = new TimepickerUI('#range-crane', { - ui: { theme: 'crane', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangeCrane.create(); - -const rangeCraneStraight = new TimepickerUI('#range-crane-straight', { - ui: { theme: 'crane-straight', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangeCraneStraight.create(); - -const rangeM3 = new TimepickerUI('#range-m3', { - ui: { theme: 'm3-green', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangeM3.create(); - -const rangeDark = new TimepickerUI('#range-dark', { - ui: { theme: 'dark', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangeDark.create(); - -const rangeM2 = new TimepickerUI('#range-m2', { - ui: { theme: 'm2', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangeM2.create(); - -const rangeGlassmorphic = new TimepickerUI('#range-glassmorphic', { - ui: { theme: 'glassmorphic', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangeGlassmorphic.create(); - -const rangePastel = new TimepickerUI('#range-pastel', { - ui: { theme: 'pastel', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangePastel.create(); - -const rangeAI = new TimepickerUI('#range-ai', { - ui: { theme: 'ai', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangeAI.create(); - -const rangeCyberpunk = new TimepickerUI('#range-cyberpunk', { - ui: { theme: 'cyberpunk', enableSwitchIcon: true }, - range: { enabled: true }, -}); -rangeCyberpunk.create(); - -const disabledHoursPicker = new TimepickerUI('#disabled-hours', { - clock: { type: '24h', disabledTime: { hours: [1, 2, 3, 22, 23] } }, -}); -disabledHoursPicker.create(); - -const disabledMinutesPicker = new TimepickerUI('#disabled-minutes', { - clock: { type: '12h', disabledTime: { minutes: [15, 30, 45] } }, -}); -disabledMinutesPicker.create(); - -const disabledIntervalPicker = new TimepickerUI('#disabled-interval', { - clock: { type: '24h', disabledTime: { interval: '12:00 - 18:00' } }, -}); -disabledIntervalPicker.create(); - -const editablePicker = new TimepickerUI('#editable-picker', { - ui: { editable: true, enableSwitchIcon: true }, - behavior: { focusInputAfterClose: true }, -}); -editablePicker.create(); - -const smoothHourPicker = new TimepickerUI('#smooth-hour-snap-picker', { - clock: { smoothHourSnap: true }, -}); -smoothHourPicker.create(); - -const wheelBasicPicker = new TimepickerUI('#wheel-basic', { - ui: { mode: 'wheel' }, -}); -wheelBasicPicker.create(); - -const wheel24hPicker = new TimepickerUI('#wheel-24h', { - clock: { type: '24h' }, - ui: { mode: 'wheel' }, -}); -wheel24hPicker.create(); - -const wheelDarkPicker = new TimepickerUI('#wheel-dark', { - ui: { mode: 'wheel', theme: 'dark' }, -}); -wheelDarkPicker.create(); - -const wheelM3Picker = new TimepickerUI('#wheel-m3', { - ui: { mode: 'wheel', theme: 'm3-green' }, -}); -wheelM3Picker.create(); - -const wheelCyberpunkPicker = new TimepickerUI('#wheel-cyberpunk', { - ui: { mode: 'wheel', theme: 'cyberpunk' }, -}); -wheelCyberpunkPicker.create(); - -const wheelStepPicker = new TimepickerUI('#wheel-step', { - clock: { incrementMinutes: 5 }, - ui: { mode: 'wheel' }, -}); -wheelStepPicker.create(); - -const inlinePicker = new TimepickerUI('#inline-picker', { - clock: { type: '24h' }, - ui: { - inline: { - enabled: true, - containerId: 'inline-container', - showButtons: false, - autoUpdate: true, - }, - }, -}); -inlinePicker.create(); - -const eventPicker = new TimepickerUI('#event-picker'); -eventPicker.create(); -const eventPickerElement = eventPicker.getElement(); - -const eventLog = document.querySelector('#event-log'); - -if (eventPickerElement && eventLog) { - eventPickerElement.addEventListener('accept', (e: any) => { - console.log(e); - const timestamp = new Date().toLocaleTimeString(); - eventLog.innerHTML += `<p class="text-green-600 dark:text-green-400 text-sm">[${timestamp}] Accept: ${e.detail.hour}:${e.detail.minutes} ${e.detail.type || ''}</p>`; - eventLog.scrollTop = eventLog.scrollHeight; - }); - - eventPickerElement.addEventListener('cancel', (e: any) => { - console.log(e); - - const timestamp = new Date().toLocaleTimeString(); - eventLog.innerHTML += `<p class="text-red-600 dark:text-red-400 text-sm">[${timestamp}] Cancel event fired</p>`; - eventLog.scrollTop = eventLog.scrollHeight; - }); - - eventPickerElement.addEventListener('show', (e: any) => { - const timestamp = new Date().toLocaleTimeString(); - console.log(e); - - eventLog.innerHTML += `<p class="text-blue-600 dark:text-blue-400 text-sm">[${timestamp}] Picker opened</p>`; - eventLog.scrollTop = eventLog.scrollHeight; - }); -} -const customLabelsPicker = new TimepickerUI('#custom-labels-picker', { - labels: { - time: 'Select time', - ok: 'It is ok', - cancel: 'Nope', - am: 'AM', - pm: 'PM', - mobileTime: 'Enter Time', - mobileHour: 'Hour', - mobileMinute: 'Minute', - }, -}); -customLabelsPicker.create(); - -const multiPicker1 = new TimepickerUI('#multi-picker-1', { - clock: { type: '24h' }, - ui: { theme: 'basic' }, -}); -multiPicker1.create(); - -const multiPicker2 = new TimepickerUI('#multi-picker-2', { - clock: { type: '12h' }, - ui: { theme: 'm3-green' }, -}); -multiPicker2.create(); - -const multiPicker3 = new TimepickerUI('#multi-picker-3', { - clock: { type: '24h' }, - ui: { theme: 'crane' }, -}); -multiPicker3.create(); - -const eventEmitterPicker = new TimepickerUI('#event-emitter-picker', { - ui: { theme: 'm3-green' }, -}); -eventEmitterPicker.create(); - -const emitterEventLog = document.querySelector('#emitter-event-log'); - -if (emitterEventLog) { - const logEvent = (eventName: string, data?: any) => { - const timestamp = new Date().toLocaleTimeString(); - const dataStr = data ? `: ${JSON.stringify(data, null, 2)}` : ''; - emitterEventLog.innerHTML += `<p class="text-cyan-400 text-xs mb-1">[${timestamp}] <span class="text-white font-semibold">${eventName}</span>${dataStr}</p>`; - emitterEventLog.scrollTop = emitterEventLog.scrollHeight; - }; - - eventEmitterPicker.on('confirm', (data) => { - logEvent('confirm', { hour: data.hour, minutes: data.minutes, type: data.type }); - }); - - eventEmitterPicker.on('cancel', () => { - logEvent('cancel'); - }); - - eventEmitterPicker.on('open', () => { - logEvent('open'); - }); - - eventEmitterPicker.on('update', (data) => { - logEvent('update', { hour: data.hour, minutes: data.minutes }); - }); - - eventEmitterPicker.on('select:hour', (data) => { - logEvent('select:hour', { hour: data.hour }); - }); - - eventEmitterPicker.on('select:minute', (data) => { - logEvent('select:minute', { minutes: data.minutes }); - }); - - eventEmitterPicker.on('select:am', () => { - logEvent('select:am'); - }); - - eventEmitterPicker.on('select:pm', () => { - logEvent('select:pm'); - }); - - eventEmitterPicker.once('open', () => { - logEvent('once:open', 'This runs only once!'); - }); -} - -const customThemePicker = new TimepickerUI('#custom-theme-picker', { - ui: { cssClass: 'test' }, -}); -customThemePicker.create(); - -const advancedPicker = new TimepickerUI('#advanced-picker', { - clock: { - type: '12h', - incrementHours: 1, - incrementMinutes: 15, - currentTime: { - time: new Date(), - updateInput: false, - preventClockType: true, - }, - disabledTime: { - interval: '22:00 - 06:00', - }, - }, - ui: { - theme: 'm3-green', - enableSwitchIcon: true, - editable: true, - cssClass: 'my-custom-picker', - }, - behavior: { - focusTrap: true, - focusInputAfterClose: true, - delayHandler: 500, - }, -}); -advancedPicker.create(); - -const newEventsAndCallbacksPicker = new TimepickerUI('#new-events-and-callbacks-picker', { - callbacks: { - onOpen: (data) => { - console.log('Picker opened v4!', data); - }, - onCancel: () => { - console.log('Picker cancelled v4!'); - }, - onConfirm: (data) => { - console.log('Time confirmed v4!', data); - }, - onUpdate: (data) => { - console.log('Time updated v4!', data); - }, - onSelectHour: (data) => { - console.log('Hour mode selected v4!', data); - }, - onSelectMinute: (data) => { - console.log('Minute mode selected v4!', data); - }, - onSelectAM: () => { - console.log('AM selected v4!'); - }, - onSelectPM: () => { - console.log('PM selected v4!'); - }, - onError: (data) => { - console.log('Error occurred v4!', data.error); - }, - }, -}); -newEventsAndCallbacksPicker.create(); - -const pickerElement = newEventsAndCallbacksPicker.getElement(); - -if (pickerElement) { - pickerElement.addEventListener('timepicker:open', (data) => { - console.log({ data }); - console.log('Picker opened with addEvent v3!', data); - }); - pickerElement.addEventListener('timepicker:cancel', (data) => { - console.log('Picker cancelled with addEvent v3!', data); - }); - pickerElement.addEventListener('timepicker:confirm', (data) => { - console.log('Time confirmed with addEvent v3!', data); - }); - pickerElement.addEventListener('timepicker:update', (data) => { - console.log('Time updated with addEvent v3!', data); - }); - pickerElement.addEventListener('timepicker:select-hour', (data) => { - console.log('Hour mode selected with addEvent v3!', data); - }); - pickerElement.addEventListener('timepicker:select-minute', (data) => { - console.log('Minute mode selected with addEvent v3!', data); - }); -} - -const version3Example = new TimepickerUI('#version3-example', { - clock: { type: '24h' }, - ui: { theme: 'm3-green' }, - behavior: { focusTrap: false, delayHandler: 200 }, - callbacks: { - onOpen: (data) => { - console.log('Version 4.0 picker opened!', data); - }, - }, -}); - -const elementExists = document.querySelector('#version3-example'); -if (elementExists) { - version3Example.create(); -} - -const destroyExample = new TimepickerUI('#destroy-example', { - clock: { type: '24h' }, - ui: { theme: 'm3-green' }, - behavior: { focusTrap: false, delayHandler: 200 }, -}); -destroyExample.create(); - -const button = document.querySelector('#destroy-button'); - -if (button) { - button.addEventListener('click', () => { - destroyExample.destroy(); - }); -} - -const multipleIntervalsPicker = new TimepickerUI('#disabled-intervals-12h', { - clock: { - type: '12h', - disabledTime: { - interval: ['12:00 AM - 4:00 AM', '5:30 PM - 8:00 PM'], - }, - }, -}); -multipleIntervalsPicker.create(); - -const multipleIntervalsPicker24h = new TimepickerUI('#disabled-intervals-24h', { - clock: { - type: '24h', - disabledTime: { - interval: ['04:33 - 12:12', '16:34 - 20:22', '21:37 - 23:23'], - }, - }, -}); -multipleIntervalsPicker24h.create(); - -const dynamicUpdatePicker = new TimepickerUI('#dynamic-update-picker', { - clock: { - type: '12h', - disabledTime: { hours: [9, 10, 11, 12] }, - }, -}); -dynamicUpdatePicker.create(); - -document.getElementById('update-morning-shift')?.addEventListener('click', () => { - dynamicUpdatePicker.update({ - options: { - clock: { - type: '12h', - disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8] }, - }, - }, - create: true, - }); -}); - -document.getElementById('update-evening-shift')?.addEventListener('click', () => { - dynamicUpdatePicker.update({ - options: { - ui: { theme: 'm3-green' }, - clock: { - type: '24h', - disabledTime: { hours: [18, 19, 20, 21, 22, 23] }, - }, - }, - create: true, - }); -}); - -document.getElementById('clear-restrictions')?.addEventListener('click', () => { - dynamicUpdatePicker.update({ - options: { - clock: { - disabledTime: { hours: [] }, - }, - }, - create: true, - }); -}); - -const dynamicIntervalPicker = new TimepickerUI('#dynamic-interval-picker', { - clock: { - type: '24h', - disabledTime: { interval: '09:00 - 12:00' }, - }, -}); -dynamicIntervalPicker.create(); - -document.getElementById('update-single-interval')?.addEventListener('click', () => { - dynamicIntervalPicker.update({ - options: { - clock: { - disabledTime: { interval: '12:00 - 13:00' }, - }, - }, - create: true, - }); -}); - -document.getElementById('update-multiple-intervals')?.addEventListener('click', () => { - dynamicIntervalPicker.update({ - options: { - clock: { - disabledTime: { - interval: ['00:00 - 08:00', '12:00 - 13:00', '18:00 - 23:59'], - }, - }, - }, - create: true, - }); -}); - -document.getElementById('clear-intervals')?.addEventListener('click', () => { - dynamicIntervalPicker.update({ - options: { - clock: { - disabledTime: {}, - }, - }, - create: true, - }); -}); - -const timezonePicker = new TimepickerUI('#timezone-picker', { - clock: { type: '24h' }, - timezone: { - enabled: true, - label: 'Timezone', - }, - ui: { theme: 'dark', enableSwitchIcon: true }, - callbacks: { - onTimezoneChange: (data) => { - console.log('Timezone changed:', data.timezone); - const tzDisplay = document.getElementById('tz-display'); - if (tzDisplay) { - tzDisplay.textContent = data.timezone; - } - }, - }, -}); -timezonePicker.create(); - -const worldTimezonePicker = new TimepickerUI('#timezone-world-picker', { - clock: { type: '24h' }, - ui: { theme: 'm3-green', enableSwitchIcon: true }, - timezone: { - enabled: true, - label: 'Select City', - whitelist: [ - 'UTC', - 'America/New_York', - 'America/Los_Angeles', - 'America/Chicago', - 'America/Sao_Paulo', - 'Europe/London', - 'Europe/Paris', - 'Europe/Berlin', - 'Europe/Moscow', - 'Asia/Dubai', - 'Asia/Tokyo', - 'Asia/Shanghai', - 'Asia/Singapore', - 'Australia/Sydney', - 'Pacific/Auckland', - ], - }, - callbacks: { - onTimezoneChange: (data) => { - console.log('🌍 Timezone changed to:', data.timezone); - - const tzWorldDisplay = document.getElementById('tz-world-display'); - const tzWorldOffset = document.getElementById('tz-world-offset'); - - if (tzWorldDisplay) { - tzWorldDisplay.textContent = data.timezone; - } - - if (tzWorldOffset) { - try { - const formatter = new Intl.DateTimeFormat('en-US', { - timeZone: data.timezone, - timeZoneName: 'shortOffset', - }); - const parts = formatter.formatToParts(new Date()); - const offsetPart = parts.find((p) => p.type === 'timeZoneName'); - const offset = offsetPart?.value || 'UTC'; - tzWorldOffset.textContent = offset; - - console.log(`📍 ${data.timezone} → ${offset}`); - } catch (error) { - console.error('Error getting timezone offset:', error); - tzWorldOffset.textContent = 'N/A'; - } - } - }, - onConfirm: (data) => { - const tzWorldTime = document.getElementById('tz-world-time'); - if (tzWorldTime) { - const time = `${data.hour}:${data.minutes}${data.type ? ' ' + data.type : ''}`; - tzWorldTime.textContent = time; - console.log('✅ Time confirmed:', time); - } - }, - onUpdate: (data) => { - const tzWorldTime = document.getElementById('tz-world-time'); - if (tzWorldTime) { - const time = `${data.hour}:${data.minutes}${data.type ? ' ' + data.type : ''}`; - tzWorldTime.textContent = time; - } - }, - }, -}); -worldTimezonePicker.create(); - -const rangePicker = new TimepickerUI('#range-picker', { - clock: { type: '12h' }, - ui: { enableSwitchIcon: true }, - range: { - enabled: true, - minDuration: 30, - maxDuration: 480, - fromLabel: 'Start', - toLabel: 'End', - }, - callbacks: { - onRangeConfirm: (data) => { - console.log('Range confirmed:', data.from, '–', data.to, 'Duration:', data.duration); - const rangeDisplay = document.getElementById('range-display'); - const durationDisplay = document.getElementById('range-duration'); - if (rangeDisplay) { - rangeDisplay.textContent = `${data.from} – ${data.to}`; - } - if (durationDisplay) { - durationDisplay.textContent = String(data.duration); - } - }, - onRangeSwitch: (data) => { - console.log('Range part switched to:', data.active); - }, - onRangeValidation: (data) => { - if (!data.valid) { - console.log('Invalid range duration. Expected:', data.minDuration, '-', data.maxDuration, 'minutes'); - } - }, - }, -}); -rangePicker.create(); - -const range24hPicker = new TimepickerUI('#range-picker-24h', { - clock: { type: '24h' }, - ui: { enableSwitchIcon: true }, - range: { - enabled: true, - minDuration: 60, - maxDuration: 720, - fromLabel: 'Start', - toLabel: 'End', - }, - callbacks: { - onRangeConfirm: (data) => { - console.log('Range 24h confirmed:', data.from, '–', data.to, 'Duration:', data.duration); - const rangeDisplay = document.getElementById('range-display-24h'); - const durationDisplay = document.getElementById('range-duration-24h'); - if (rangeDisplay) { - rangeDisplay.textContent = `${data.from} – ${data.to}`; - } - if (durationDisplay) { - durationDisplay.textContent = String(data.duration); - } - }, - onRangeSwitch: (data) => { - console.log('Range 24h part switched to:', data.active); - }, - onRangeValidation: (data) => { - if (!data.valid) { - console.log('Invalid range duration. Expected:', data.minDuration, '-', data.maxDuration, 'minutes'); - } - }, - }, -}); -range24hPicker.create(); - -const range12hAmPmPicker = new TimepickerUI('#range-picker-12h-ampm', { - clock: { type: '12h' }, - ui: { enableSwitchIcon: true }, - range: { - enabled: true, - fromLabel: 'From', - toLabel: 'To', - }, - callbacks: { - onRangeConfirm: (data) => { - console.log('Range 12h AM/PM confirmed:', data.from, '–', data.to, 'Duration:', data.duration); - const rangeDisplay = document.getElementById('range-display-12h-ampm'); - const durationDisplay = document.getElementById('range-duration-12h-ampm'); - if (rangeDisplay) { - rangeDisplay.textContent = `${data.from} – ${data.to}`; - } - if (durationDisplay) { - durationDisplay.textContent = String(data.duration); - } - }, - onRangeSwitch: (data) => { - console.log('Range 12h AM/PM part switched to:', data.active); - }, - }, -}); -range12hAmPmPicker.create(); - -// getValue() Without Opening Widget Demo (Bug Fix Demo) -const getValueDemoPicker = new TimepickerUI('#getvalue-demo-picker', { - clock: { type: '24h' }, -}); -getValueDemoPicker.create(); - -const getValueButton = document.getElementById('getvalue-button'); -const setValueButton = document.getElementById('setvalue-button'); -const openCheckButton = document.getElementById('open-check-button'); -const getValueOutput = document.getElementById('getvalue-output'); - -if (getValueButton && getValueOutput) { - getValueButton.addEventListener('click', () => { - const value = getValueDemoPicker.getValue(); - console.log('getValue() output:', value); - getValueOutput.textContent = JSON.stringify( - { - hour: value.hour, - minutes: value.minutes, - time: value.time, - degreesHours: value.degreesHours, - degreesMinutes: value.degreesMinutes, - }, - null, - 2, - ); - }); -} - -if (setValueButton && getValueOutput) { - setValueButton.addEventListener('click', () => { - getValueDemoPicker.setValue('18:45'); - getValueOutput.textContent = JSON.stringify( - { - message: 'Value set to 18:45', - ...getValueDemoPicker.getValue(), - }, - null, - 2, - ); - }); -} - -if (openCheckButton && getValueOutput) { - openCheckButton.addEventListener('click', () => { - getValueDemoPicker.open(); - setTimeout(() => { - getValueDemoPicker.close(); - const value = getValueDemoPicker.getValue(); - getValueOutput.textContent = JSON.stringify( - { - message: 'Opened and closed, value still matches input', - hour: value.hour, - minutes: value.minutes, - time: value.time, - }, - null, - 2, - ); - }, 1000); - }); -} - -const themes = [ - 'basic', - 'crane', - 'crane-straight', - 'm3-green', - 'dark', - 'm2', - 'glassmorphic', - 'pastel', - 'ai', - 'cyberpunk', -] as const; - -themes.forEach((theme) => { - const picker = new TimepickerUI(`#tz-theme-${theme}`, { - clock: { type: '24h' }, - ui: { theme, enableSwitchIcon: true }, - timezone: { - enabled: true, - label: 'Timezone', - whitelist: ['UTC', 'America/New_York', 'Europe/London', 'Europe/Warsaw', 'Asia/Tokyo'], - }, - }); - picker.create(); -}); - -const clearButtonPicker = new TimepickerUI('#clear-button-picker', { - ui: { - clearButton: true, - theme: 'basic', - enableSwitchIcon: true, - }, - labels: { - clear: 'Clear', - }, - clock: { - type: '12h', - }, - callbacks: { - onClear: (data) => { - console.log('Time cleared! Previous value:', data.previousValue); - }, - }, -}); -clearButtonPicker.create(); - -const clearNoClearInputPicker = new TimepickerUI('#clear-no-input-picker', { - ui: { - clearButton: true, - theme: 'basic', - enableSwitchIcon: true, - }, - clearBehavior: { - clearInput: false, - }, - callbacks: { - onClear: (data) => { - console.log('Clear clicked (input kept)! Previous value:', data.previousValue); - }, - }, -}); -clearNoClearInputPicker.create(); +import './examples/setup'; +import './examples/basic'; +import './examples/themes'; +import './examples/timezone-themes'; +import './examples/range-themes'; +import './examples/disabled'; +import './examples/wheel'; +import './examples/hide-footer'; +import './examples/features'; +import './examples/timezone-advanced'; +import './examples/api-demo'; +import './examples/clear-button'; diff --git a/app/docs/partials/advanced-clear.html b/app/docs/partials/advanced-clear.html new file mode 100644 index 0000000..6c23de1 --- /dev/null +++ b/app/docs/partials/advanced-clear.html @@ -0,0 +1,483 @@ + <section + id="new-events-and-callbacks" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Callback Options</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Alternative way to handle events using callback options + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="new-events-and-callbacks-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:00 PM" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="new-events-and-callbacks-picker" value="10:00 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const newEventsAndCallbacksPicker = new TimepickerUI('#new-events-and-callbacks-picker', { + callbacks: { + onOpen: (data) => { + console.log('Picker opened!', data); + }, + onCancel: (data) => { + console.log('Picker cancelled', data); + }, + onConfirm: (data) => { + console.log('Time confirmed', data); + }, + onUpdate: (data) => { + console.log('Time updated', data); + }, + onSelectHour: (data) => { + console.log('Hour mode selected', data); + }, + onSelectMinute: (data) => { + console.log('Minute mode selected', data); + }, + onSelectAM: (data) => { + console.log('AM selected', data); + }, + onSelectPM: (data) => { + console.log('PM selected', data); + }, + onError: (data) => { + console.log('Error occurred', data.error); + } + } +}); +newEventsAndCallbacksPicker.create(); + +const pickerElement = newEventsAndCallbacksPicker.getElement(); +if (pickerElement) { + pickerElement.addEventListener('timepicker:open', (data) => { + console.log('Picker opened!', data); + }); + pickerElement.addEventListener('timepicker:cancel', (data) => { + console.log('Picker cancelled', data); + }); +} +</code></pre> + </div> + </div> + </div> + </section> + + <section + id="advanced-config" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Advanced Configuration</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Complex setup with multiple advanced options</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="advanced-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:00" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="advanced-picker" value="10:00" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const advancedPicker = new TimepickerUI('#advanced-picker', { + clockType: '12h', + theme: 'm3', + enableSwitchIcon: true, + focusTrap: true, + editable: true, + focusInputAfterCloseModal: true, + delayHandler: 500, + incrementHours: 1, + incrementMinutes: 15, + currentTime: { + time: new Date(), + updateInput: false, + preventClockType: true + }, + disabledTime: { + interval: '22:00 - 06:00' + }, + cssClass: 'my-custom-picker' +}); +advancedPicker.create();</code></pre> + </div> + </div> + </div> + </section> + + <section + id="custom-template" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Version 3 events</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Examples of the new version 3.0 events</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="version3-example" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:00" + /> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="version3-example" value="10:00" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const version3Example = new TimepickerUI('#version3-example', { + theme: 'm3', + clockType: '24h', + focusTrap: false, + delayHandler: 200, + onOpen: (data) => { + console.log('Version 3.0 picker opened!', data); + }, +}); +version3Example.create(); + +const pickerElement = version3Example.getElement(); +if (pickerElement) { + pickerElement.addEventListener('timepicker:open', (data) => { + console.log('Picker opened!', data); + }); +} +</code></pre> + </div> + </div> + </div> + </div> + </section> + + <section + id="destroy-example" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-purple-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Destroy example</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Example of how to destroy the timepicker</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="destroy-example" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="14:30" + /> + + <button id="destroy-button" class="ml-4 bg-red-500 text-white px-4 py-2 rounded-md"> + Destroy + </button> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="destroy-example" value="14:30" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const destroyExample = new TimepickerUI('#destroy-example', { +mobile: true, +clockType: '24h', +enableSwitchIcon: true +}); +destroyExample.create(); + +const pickerElement = destroyExample.getElement(); +if (pickerElement) { + pickerElement.addEventListener('timepicker:open', (data) => { + console.log('Picker opened!', data); + }); +} +</code></pre> + </div> + </div> + </div> + </section> + <section + id="clear-button" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Clear Button</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Allow users to clear selected time with a dedicated button + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="clear-button-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="2:30 PM" + /> + </div> + <div class="mt-4 text-center"> + <p class="text-sm text-gray-600 dark:text-gray-400"> + <strong>Try it:</strong> Open the timepicker and click the "Clear" button on the left side + to reset the time. + </p> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="clear-button-picker" value="2:30 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const clearButtonPicker = new TimepickerUI('#clear-button-picker', { + ui: { + clearButton: true, + theme: 'basic' + }, + labels: { + clear: 'Clear' + }, + callbacks: { + onClear: (data) => { + console.log('Time cleared! Previous value:', data.previousValue); + } + } +}); +clearButtonPicker.create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800" + > + <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-200 mb-2"> + Clear Button Behavior + </h4> + <ul class="text-sm text-blue-800 dark:text-blue-300 space-y-1 list-disc list-inside"> + <li>Removes the selected time value completely</li> + <li>Resets clock hands to neutral position (12:00 for 12h, 12:00 for 24h)</li> + <li>Disables the confirm button until a new time is selected</li> + <li> + Triggers the <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">onClear</code> callback + with previous value + </li> + <li>The button is disabled when no time is selected</li> + <li> + Use + <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded" + >clearBehavior: { clearInput: false }</code + > + to keep the input value when clearing + </li> + </ul> + </div> + <div class="mt-8"> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"> + Clear without clearing input + </h4> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-4"> + <div class="flex justify-center"> + <input + id="clear-no-input-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="9:15 AM" + /> + </div> + <div class="mt-4 text-center"> + <p class="text-sm text-gray-600 dark:text-gray-400"> + <strong>Try it:</strong> Click "Clear" — the clock resets but the input keeps its value. + </p> + </div> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const picker = new TimepickerUI('#clear-no-input-picker', { + ui: { clearButton: true }, + clearBehavior: { + clearInput: false + }, + callbacks: { + onClear: (data) => { + console.log('Clear clicked (input kept)!', data.previousValue); + } + } +}); +picker.create();</code></pre> + </div> + </div> + </div> + </section> + + <section + id="clear-button-themes" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Clear Button - All Themes</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Clear button preview across all available themes + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> + <input + id="clear-theme-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> + <input + id="clear-theme-crane" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Straight</label + > + <input + id="clear-theme-crane-straight" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >M3 Green</label + > + <input + id="clear-theme-m3-green" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> + <input + id="clear-theme-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> + <input + id="clear-theme-m2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Glassmorphic</label + > + <input + id="clear-theme-glassmorphic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Pastel</label + > + <input + id="clear-theme-pastel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> + <input + id="clear-theme-ai" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Cyberpunk</label + > + <input + id="clear-theme-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="clear-theme-basic" value="10:30 PM" /> +<input id="clear-theme-crane" value="10:30 PM" /> +<input id="clear-theme-crane-straight" value="10:30 PM" /> +<input id="clear-theme-m3-green" value="10:30 PM" /> +<input id="clear-theme-dark" value="10:30 PM" /> +<input id="clear-theme-m2" value="10:30 PM" /> +<input id="clear-theme-glassmorphic" value="10:30 PM" /> +<input id="clear-theme-pastel" value="10:30 PM" /> +<input id="clear-theme-ai" value="10:30 PM" /> +<input id="clear-theme-cyberpunk" value="10:30 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const clearThemeList = [ + 'basic', 'crane', 'crane-straight', + 'm3-green', 'dark', 'm2', + 'glassmorphic', 'pastel', 'ai', 'cyberpunk' +]; + +clearThemeList.forEach((theme) => { + new TimepickerUI(`#clear-theme-${theme}`, { + ui: { clearButton: true, theme, enableSwitchIcon: true }, + labels: { clear: 'Clear' }, + callbacks: { + onClear: (data) => { + console.log(`Clear (${theme}):`, data.previousValue); + }, + }, + }).create(); +});</code></pre> + </div> + </div> + </div> + </section> + diff --git a/app/docs/partials/basic-themes.html b/app/docs/partials/basic-themes.html new file mode 100644 index 0000000..e17b974 --- /dev/null +++ b/app/docs/partials/basic-themes.html @@ -0,0 +1,474 @@ + <section + id="basic-usage" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Basic Usage</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Simple time picker with default settings</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="basic-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:30 PM" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="basic-picker" value="10:30 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const basicTimePicker = new TimepickerUI('#basic-picker'); +basicTimePicker.create();</code></pre> + </div> + </div> + </div> + </section> + + <section + id="24h-format" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">24-Hour Format</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Time picker with 24-hour clock format</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="format-24h-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="15:45" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="format-24h-picker" value="15:45" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const format24hPicker = new TimepickerUI('#format-24h-picker', { + clockType: '24h', + enableSwitchIcon: true +}); +format24hPicker.create();</code></pre> + </div> + </div> + </div> + </section> + + <section + id="mobile-version" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-purple-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Mobile Version</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Optimized interface for mobile devices</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="mobile-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="11:30 PM" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="mobile-picker" value="14:30" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const mobilePicker = new TimepickerUI('#mobile-picker', { + mobile: true, + clockType: '24h', + enableSwitchIcon: true +}); +mobilePicker.create();</code></pre> + </div> + </div> + </div> + </section> + + <section + id="themes" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Different Themes</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Choose from various themes included in the library + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Basic Theme</label + > + <input + id="theme-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="10:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> + <input + id="theme-m2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="10:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Straight</label + > + <input + id="theme-crane-straight" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:15 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Radius</label + > + <input + id="theme-crane-radius" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Material 3</label + > + <input + id="theme-m3" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:45 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Dark Theme</label + > + <input + id="theme-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Glassmorphic Theme</label + > + <input + id="theme-glassmorphic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Pastel Theme</label + > + <input + id="theme-pastel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:00 PM" + /> + </div> + + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >AI Theme</label + > + <input + id="theme-ai" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Cyberpunk Theme</label + > + <input + id="theme-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:00 PM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="theme-basic" /> +<input id="theme-crane-straight" /> +<input id="theme-crane-radius" /> +<input id="theme-m3" /> +<input id="theme-dark" /> +<input id="theme-glassmorphic" /> +<input id="theme-pastel" /> +<input id="theme-ai" /> +<input id="theme-cyberpunk" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">new TimepickerUI('#theme-basic', { theme: 'basic' }).create(); +new TimepickerUI('#theme-crane-straight', { theme: 'crane-straight' }).create(); +new TimepickerUI('#theme-crane-radius', { theme: 'crane-radius' }).create(); +new TimepickerUI('#theme-m3', { theme: 'm3' }).create(); +new TimepickerUI('#theme-dark', { theme: 'dark' }).create(); +new TimepickerUI('#theme-glassmorphic', { theme: 'glassmorphic' }).create(); +new TimepickerUI('#theme-pastel', { theme: 'pastel' }).create(); +new TimepickerUI('#theme-ai', { theme: 'ai' }).create(); +new TimepickerUI('#theme-cyberpunk', { theme: 'cyberpunk' }).create();</code></pre> + </div> + </div> + </div> + </section> + + <section + id="timezone-themes" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone - All Themes</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Preview timezone selector across all available themes + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> + <input + id="timezone-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> + <input + id="timezone-crane" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Straight</label + > + <input + id="timezone-crane-straight" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >M3 Green</label + > + <input + id="timezone-m3" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> + <input + id="timezone-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> + <input + id="timezone-m2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Glassmorphic</label + > + <input + id="timezone-glassmorphic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Pastel</label + > + <input + id="timezone-pastel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> + <input + id="timezone-ai" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Cyberpunk</label + > + <input + id="timezone-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:00 PM" + /> + </div> + </div> + </div> + </div> + </section> + + <section + id="range-themes" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range - All Themes</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Preview range selector across all available themes + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> + <input + id="range-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> + <input + id="range-crane" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Straight</label + > + <input + id="range-crane-straight" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >M3 Green</label + > + <input + id="range-m3" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> + <input + id="range-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> + <input + id="range-m2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Glassmorphic</label + > + <input + id="range-glassmorphic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Pastel</label + > + <input + id="range-pastel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> + <input + id="range-ai" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Cyberpunk</label + > + <input + id="range-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00 AM - 05:00 PM" + /> + </div> + </div> + </div> + </div> + </section> + diff --git a/app/docs/partials/disabled.html b/app/docs/partials/disabled.html new file mode 100644 index 0000000..38a272c --- /dev/null +++ b/app/docs/partials/disabled.html @@ -0,0 +1,464 @@ +<section + id="disabled-times" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Disabled Times</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Block specific hours, minutes, or time intervals</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Hours</label + > + <input + id="disabled-hours" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="08:00" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Minutes</label + > + <input + id="disabled-minutes" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Interval</label + > + <input + id="disabled-interval" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:00 PM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="disabled-hours" /> +<input id="disabled-minutes" /> +<input id="disabled-interval" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">new TimepickerUI('#disabled-hours', { + disabledTime: { hours: [1, 2, 3, 22, 23] } +}).create(); + +new TimepickerUI('#disabled-minutes', { + disabledTime: { minutes: [15, 30, 45] } +}).create(); + +new TimepickerUI('#disabled-interval', { + disabledTime: { interval: '12:00 - 18:00' } +}).create();</code></pre> + </div> + </div> + </div> +</section> + +<section + id="multiple-intervals" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Multiple Intervals</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Block specific hours, minutes, or time intervals</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Intervals 12h</label + > + <input + id="disabled-intervals-12h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Intervals 24h</label + > + <input + id="disabled-intervals-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="11:00" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="disabled-intervals-12h" value="11:00 PM" /> +<input id="disabled-intervals-24h" value="11:00" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">new TimepickerUI('#disabled-intervals-12h', { +disabledTime: { interval: ['12:00 AM - 4:00 AM', '5:30 PM - 8:00 PM'] } +}).create(); + + +new TimepickerUI('#disabled-intervals-24h', { +clockType: '24h', +disabledTime: { interval: ['04:33 - 12:12', '16:34 - 20:22'] } +}).create();</code></pre> + </div> + </div> + </div> +</section> + +<section + id="dynamic-updates" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-amber-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Dynamic Updates</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Update disabledTime and other options dynamically</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex flex-col items-center gap-4"> + <input + id="dynamic-update-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:00 AM" + /> + <div class="flex gap-2"> + <button + id="update-morning-shift" + class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors" + > + Morning Shift + </button> + <button + id="update-evening-shift" + class="px-6 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg font-medium transition-colors" + > + Evening Shift + </button> + <button + id="clear-restrictions" + class="px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors" + > + Clear All + </button> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="dynamic-update-picker" value="10:00 AM" /> +<button id="update-morning-shift">Morning Shift</button> +<button id="update-evening-shift">Evening Shift</button> +<button id="clear-restrictions">Clear All</button></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const picker = new TimepickerUI('#dynamic-update-picker', { + clock: { disabledTime: { hours: [9, 10, 11, 12] } } +}); +picker.create(); + +// Update to morning shift (disable 0-8) +document.getElementById('update-morning-shift') + .addEventListener('click', () => { + picker.update({ + clock: { disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8] } } + }, true); + }); + +// Update to evening shift (disable 18-23) +document.getElementById('update-evening-shift') + .addEventListener('click', () => { + picker.update({ + clock: { disabledTime: { hours: [18, 19, 20, 21, 22, 23] } } + }, true); + }); + +// Clear all restrictions +document.getElementById('clear-restrictions') + .addEventListener('click', () => { + picker.update({ clock: { disabledTime: { hours: [] } } }, true); + });</code></pre> + </div> + </div> + </div> +</section> + +<section + id="dynamic-interval-updates" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-rose-50 to-red-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Dynamic Interval Updates</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Update disabled intervals dynamically for shift scheduling + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex flex-col items-center gap-4"> + <input + id="dynamic-interval-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:00" + /> + <div class="flex gap-2 flex-wrap justify-center"> + <button + id="update-single-interval" + class="px-4 py-2 bg-rose-500 hover:bg-rose-600 text-white rounded-lg font-medium transition-colors" + > + Single Interval + </button> + <button + id="update-multiple-intervals" + class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg font-medium transition-colors" + > + Multiple Intervals + </button> + <button + id="clear-intervals" + class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-medium transition-colors" + > + Clear + </button> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="dynamic-interval-picker" value="10:00" /> +<button id="update-single-interval">Single Interval</button> +<button id="update-multiple-intervals">Multiple Intervals</button> +<button id="clear-intervals">Clear</button></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const intervalPicker = new TimepickerUI('#dynamic-interval-picker', { + clock: { type: '24h', disabledTime: { interval: '09:00 - 12:00' } } +}); +intervalPicker.create(); + +// Update to single interval (lunch break) +document.getElementById('update-single-interval') + .addEventListener('click', () => { + intervalPicker.update({ + clock: { disabledTime: { interval: '12:00 - 13:00' } } + }, true); + }); + +// Update to multiple intervals (shift schedule) +document.getElementById('update-multiple-intervals') + .addEventListener('click', () => { + intervalPicker.update({ + clock: { + disabledTime: { + interval: ['00:00 - 08:00', '12:00 - 13:00', '18:00 - 23:59'] + } + } + }, true); + }); + +// Clear all intervals +document.getElementById('clear-intervals') + .addEventListener('click', () => { + intervalPicker.update({ clock: { disabledTime: {} } }, true); + });</code></pre> + </div> + </div> + </div> +</section> + +<section + id="editable-mode" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Editable Mode</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Allow direct editing of time values in picker</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="editable-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="09:15 PM" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="editable-picker" value="09:15 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const editablePicker = new TimepickerUI('#editable-picker', { + editable: true, + focusInputAfterCloseModal: true, + enableSwitchIcon: true +}); +editablePicker.create();</code></pre> + </div> + </div> + </div> +</section> + +<section + id="hide-disabled-options" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Hide Disabled Options</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Completely remove disabled hours/minutes from the list instead of dimming them. Useful for + business-hours-only scenarios. + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Clock — Business Hours Only</label + > + <input + id="hide-disabled-clock" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="09:00" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel — Hidden Hours & Minutes</label + > + <input + id="hide-disabled-wheel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="08:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Popover — Hidden + 5min Step</label + > + <input + id="hide-disabled-popover" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:00" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="hide-disabled-clock" value="09:00" /> +<input id="hide-disabled-wheel" value="08:00 AM" /> +<input id="hide-disabled-popover" value="10:00" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// Clock — only show business hours (8-17) +new TimepickerUI('#hide-disabled-clock', { + clock: { + type: '24h', + disabledTime: { hours: [0,1,2,3,4,5,6,7,18,19,20,21,22,23], hideOptions: true }, + }, +}).create(); + +// Wheel — hide specific hours & minutes +new TimepickerUI('#hide-disabled-wheel', { + clock: { + type: '12h', + disabledTime: { hours: [1,2,3,4,5,6], minutes: [0,15,30,45], hideOptions: true }, + }, + ui: { mode: 'wheel' }, +}).create(); + +// Popover — hidden + 5min step +new TimepickerUI('#hide-disabled-popover', { + clock: { + type: '24h', + incrementMinutes: 5, + disabledTime: { hours: [0,1,2,3,4,5,22,23], hideOptions: true }, + }, + ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, +}).create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-rose-50 dark:bg-rose-900/20 rounded-lg border border-rose-200 dark:border-rose-800" + > + <h4 class="text-sm font-semibold text-rose-900 dark:text-rose-200 mb-2"> + disabledTime.hideOptions Notes + </h4> + <ul class="text-sm text-rose-800 dark:text-rose-300 space-y-1 list-disc list-inside"> + <li> + Set + <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">clock.disabledTime.hideOptions: true</code> + to remove disabled values entirely + </li> + <li>Works in all modes: clock, wheel, and compact-wheel</li> + <li> + Combines with <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">disabledTime.hours</code>, + <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">disabledTime.minutes</code>, and intervals + </li> + <li>Useful for business-hours or appointment-slot pickers where irrelevant times distract users</li> + </ul> + </div> + </div> +</section> + +<section + id="smooth-hour-snap" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-violet-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Smooth Hour Snap</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Fluid hour dragging with smooth snapping animation</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="smooth-hour-snap-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:30 PM" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="smooth-hour-snap-picker" value="10:30 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const smoothHourPicker = new TimepickerUI('#smooth-hour-snap-picker', { + clock: { + smoothHourSnap: true + } +}); +smoothHourPicker.create();</code></pre> + </div> + </div> + </div> +</section> diff --git a/app/docs/partials/hide-footer.html b/app/docs/partials/hide-footer.html new file mode 100644 index 0000000..72ebfcf --- /dev/null +++ b/app/docs/partials/hide-footer.html @@ -0,0 +1,150 @@ +<section + id="hide-footer" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel — Hide Footer</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Footer completely removed from DOM — no OK/Cancel buttons rendered. Combine with + <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">commitOnScroll</code> for a minimal UI. + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> + <input + id="nofooter-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> + <input + id="nofooter-crane" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Straight</label + > + <input + id="nofooter-crane-straight" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M3 Green</label> + <input + id="nofooter-m3-green" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> + <input + id="nofooter-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> + <input + id="nofooter-m2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Glassmorphic</label> + <input + id="nofooter-glassmorphic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pastel</label> + <input + id="nofooter-pastel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> + <input + id="nofooter-ai" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Cyberpunk</label> + <input + id="nofooter-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="02:30 PM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="nofooter-basic" value="02:30 PM" /> +<input id="nofooter-crane" value="02:30 PM" /> +<input id="nofooter-crane-straight" value="02:30 PM" /> +<input id="nofooter-m3-green" value="02:30 PM" /> +<input id="nofooter-dark" value="02:30 PM" /> +<input id="nofooter-m2" value="02:30 PM" /> +<input id="nofooter-glassmorphic" value="02:30 PM" /> +<input id="nofooter-pastel" value="02:30 PM" /> +<input id="nofooter-ai" value="02:30 PM" /> +<input id="nofooter-cyberpunk" value="02:30 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const themes = [ + 'basic', 'crane', 'crane-straight', + 'm3-green', 'dark', 'm2', + 'glassmorphic', 'pastel', 'ai', 'cyberpunk' +]; + +themes.forEach((theme) => { + new TimepickerUI(`#nofooter-${theme}`, { + ui: { mode: 'compact-wheel', theme, wheel: { hideFooter: true, commitOnScroll: true } }, + }).create(); +});</code></pre> + </div> + </div> + <div + class="mt-6 bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 rounded-lg p-4" + > + <h4 class="text-sm font-semibold text-rose-800 dark:text-rose-300 mb-2">How it works</h4> + <ul class="text-sm text-rose-700 dark:text-rose-400 space-y-1"> + <li> + <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">ui.wheel.hideFooter: true</code> + — footer is not rendered in the DOM (not display:none — completely absent for accessibility) + </li> + <li> + Only works with <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">compact-wheel</code> mode + </li> + <li> + Combine with + <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">ui.wheel.commitOnScroll: true</code> + so the selected time auto-commits without buttons + </li> + <li>Click outside or press Escape to close the picker</li> + </ul> + </div> + </div> +</section> + diff --git a/app/docs/partials/popover-features.html b/app/docs/partials/popover-features.html new file mode 100644 index 0000000..f8cfcfb --- /dev/null +++ b/app/docs/partials/popover-features.html @@ -0,0 +1,636 @@ +<section + id="popover-placement" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-violet-50 to-fuchsia-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel + Popover</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Popover mode opens the compact wheel as a dropdown attached to the input. Supports auto, top, and bottom + placement. + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid md:grid-cols-3 gap-8"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Popover Auto</label> + <input + id="popover-auto" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="09:30 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Popover Top</label> + <input + id="popover-top" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="10:15 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Popover Bottom</label + > + <input + id="popover-bottom" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="02:45 PM" + /> + </div> + </div> + </div> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Popover Variants</h4> + <div class="grid md:grid-cols-3 gap-8"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">24h + Auto</label> + <input + id="popover-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="14:30" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark + Auto</label> + <input + id="popover-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="08:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >M3 Green + Top</label + > + <input + id="popover-m3" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="11:00 AM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="popover-auto" value="09:30 AM" /> +<input id="popover-top" value="10:15 AM" /> +<input id="popover-bottom" value="02:45 PM" /> +<input id="popover-24h" value="14:30" /> +<input id="popover-dark" value="08:00 PM" /> +<input id="popover-m3" value="11:00 AM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// Auto placement (default) +new TimepickerUI('#popover-auto', { + ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, +}).create(); + +// Top placement +new TimepickerUI('#popover-top', { + ui: { mode: 'compact-wheel', wheel: { placement: 'top' } }, +}).create(); + +// Bottom placement +new TimepickerUI('#popover-bottom', { + ui: { mode: 'compact-wheel', wheel: { placement: 'bottom' } }, +}).create(); + +// 24h + auto placement +new TimepickerUI('#popover-24h', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, +}).create(); + +// Dark theme + auto placement +new TimepickerUI('#popover-dark', { + ui: { mode: 'compact-wheel', theme: 'dark', wheel: { placement: 'auto' } }, +}).create(); + +// M3 Green + top placement +new TimepickerUI('#popover-m3', { + ui: { mode: 'compact-wheel', theme: 'm3-green', wheel: { placement: 'top' } }, +}).create();</code></pre> + </div> + </div> + </div> +</section> + +<section + id="multi-popover" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-rose-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Multiple Popover Pickers</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Multiple independent popover pickers on the same page — opening one closes any other + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid md:grid-cols-3 gap-6"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Time</label> + <input + id="multi-popover-1" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="09:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Break Time (24h, M3)</label + > + <input + id="multi-popover-2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="12:30" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >End Time (Dark)</label + > + <input + id="multi-popover-3" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="05:00 PM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="multi-popover-1" value="09:00 AM" /> +<input id="multi-popover-2" value="12:30" /> +<input id="multi-popover-3" value="05:00 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// Each picker is fully independent +new TimepickerUI('#multi-popover-1', { + ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, +}).create(); + +new TimepickerUI('#multi-popover-2', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel', theme: 'm3-green', wheel: { placement: 'auto' } }, +}).create(); + +new TimepickerUI('#multi-popover-3', { + ui: { mode: 'compact-wheel', theme: 'dark', wheel: { placement: 'auto' } }, +}).create();</code></pre> + </div> + </div> + </div> +</section> + +<section + id="popover-themes" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-fuchsia-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Popover — All Themes</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Compact wheel popover mode across all available themes + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> + <input + id="popover-theme-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> + <input + id="popover-theme-crane" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Straight</label + > + <input + id="popover-theme-crane-straight" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M3 Green</label> + <input + id="popover-theme-m3-green" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> + <input + id="popover-theme-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> + <input + id="popover-theme-m2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Glassmorphic</label> + <input + id="popover-theme-glassmorphic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pastel</label> + <input + id="popover-theme-pastel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> + <input + id="popover-theme-ai" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Cyberpunk</label> + <input + id="popover-theme-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="popover-theme-basic" value="10:00 AM" /> +<input id="popover-theme-crane" value="10:00 AM" /> +<!-- ... one input per theme --> +<input id="popover-theme-cyberpunk" value="10:00 AM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const popoverThemeList = [ + 'basic', 'crane', 'crane-straight', + 'm3-green', 'dark', 'm2', + 'glassmorphic', 'pastel', 'ai', 'cyberpunk' +]; + +popoverThemeList.forEach((theme) => { + new TimepickerUI(`#popover-theme-${theme}`, { + ui: { mode: 'compact-wheel', theme, wheel: { placement: 'auto' } }, + }).create(); +});</code></pre> + </div> + </div> + </div> +</section> + +<section + id="inline-mode" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Inline Mode</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Always-visible timepicker embedded in the page</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid md:grid-cols-2 gap-8 items-start"> + <div> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Selected Time:</label + > + <input + id="inline-picker" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="14:30" + /> + </div> + <div> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Timepicker:</label> + <div id="inline-container" class="border border-gray-200 dark:border-gray-600 rounded-lg p-4"></div> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="inline-picker" value="14:30" /> +<div id="inline-container"></div></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const inlinePicker = new TimepickerUI('#inline-picker', { + inline: { + enabled: true, + containerId: 'inline-container', + showButtons: false, + autoUpdate: true + }, + clockType: '24h' +}); +inlinePicker.create();</code></pre> + </div> + </div> + </div> +</section> + +<section + id="event-handling" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Event Handling</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Listen to value changes and user interactions</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex flex-col items-center space-y-4"> + <input + id="event-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="12:00 PM" + /> + <div class="text-center"> + <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Event Log:</p> + <div + id="event-log" + class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-4 min-h-[100px] max-h-[200px] overflow-y-auto" + > + <p class="text-gray-500 dark:text-gray-400 text-sm">Events will appear here...</p> + </div> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="event-picker" value="12:00 PM" /> +<div id="event-log"></div></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const eventPicker = new TimepickerUI('#event-picker'); +eventPicker.create(); + +const eventLog = document.querySelector('#event-log'); +const picker = document.querySelector('#event-picker'); + +picker.addEventListener('accept', (e) => { + eventLog.innerHTML += `<p>Accept: ${e.detail.hour}:${e.detail.minutes}</p>`; +}); + +picker.addEventListener('cancel', (e) => { + eventLog.innerHTML += `<p>Cancel event fired</p>`; +});</code></pre> + </div> + </div> + </div> +</section> + +<section + id="custom-labels" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-pink-50 to-rose-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Custom Labels</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Customize all labels and text in different languages</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="custom-labels-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:30 PM" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="custom-labels-picker" value="10:30 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const customLabelsPicker = new TimepickerUI('#custom-labels-picker', { +timeLabel: 'Select time', +okLabel: 'It is ok', +cancelLabel: 'Nope', +amLabel: 'AM', +pmLabel: 'PM', +mobileTimeLabel: 'Enter Time', +hourMobileLabel: 'Hour', +minuteMobileLabel: 'Minute', +}); +customLabelsPicker.create();</code></pre> + </div> + </div> + </div> +</section> + +<section + id="multiple-pickers" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Multiple Pickers</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Multiple isolated time pickers on the same page</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Time</label> + <input + id="multi-picker-1" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="09:00" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Break Time</label> + <input + id="multi-picker-2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="12:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Time</label> + <input + id="multi-picker-3" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 transition-colors" + value="17:00" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="multi-picker-1" value="09:00" /> +<input id="multi-picker-2" value="12:30 PM" /> +<input id="multi-picker-3" value="17:00" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">new TimepickerUI('#multi-picker-1', { + clockType: '24h', + theme: 'basic' +}).create(); + +new TimepickerUI('#multi-picker-2', { + clockType: '12h', + theme: 'm3' +}).create(); + +new TimepickerUI('#multi-picker-3', { + clockType: '24h', + theme: 'crane-radius' +}).create();</code></pre> + </div> + </div> + </div> +</section> + +<section + id="event-emitter-api" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">EventEmitter API (v3.1+)</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Modern event handling with on(), once(), and off() methods + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex flex-col items-center space-y-4"> + <input + id="event-emitter-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" + value="02:30 PM" + /> + <div class="text-center"> + <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Event Log:</h4> + <div + id="emitter-event-log" + class="w-full max-w-md h-48 overflow-y-auto bg-gray-800 dark:bg-gray-900 rounded-lg p-4 text-left font-mono text-xs" + ></div> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="event-emitter-picker" value="02:30 PM" /> +<div id="emitter-event-log"></div></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const picker = new TimepickerUI('#event-emitter-picker'); +picker.create(); + +// Subscribe to events +picker.on('confirm', (data) => { + console.log('Confirmed:', data.hour, data.minutes); +}); + +picker.on('cancel', (data) => { + console.log('Cancelled'); +}); + +picker.on('update', (data) => { + console.log('Updated:', data); +}); + +picker.on('select:hour', (data) => { + console.log('Hour selected:', data.hour); +}); + +picker.on('select:minute', (data) => { + console.log('Minute selected:', data.minutes); +}); + +// One-time event +picker.once('open', () => { + console.log('Opened for the first time!'); +}); + +// Unsubscribe +const handler = (data) => console.log(data); +picker.on('confirm', handler); +picker.off('confirm', handler);</code></pre> + </div> + </div> + </div> +</section> + +<section + id="custom-theme" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-fuchsia-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Custom Theme</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Override default styles with your custom theme</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="custom-theme-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-colors" + value="03:45 PM" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="custom-theme-picker" value="03:45 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const customThemePicker = new TimepickerUI('#custom-theme-picker'); +customThemePicker.create(); + +// Override theme with custom styles +customThemePicker.setTheme({ + primaryColor: '#9333ea', + backgroundColor: '#1f2937', + surfaceColor: '#374151', + surfaceHoverColor: '#4b5563', + textColor: '#f3f4f6', + borderRadius: '12px' +});</code></pre> + </div> + </div> + </div> +</section> diff --git a/app/docs/partials/range.html b/app/docs/partials/range.html new file mode 100644 index 0000000..3adaa50 --- /dev/null +++ b/app/docs/partials/range.html @@ -0,0 +1,255 @@ + <section class="mb-12"> + <div + id="range-mode" + class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (From–To)</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Select a time range for booking, scheduling, or reservation use cases. + </p> + + <div class="mt-6 grid md:grid-cols-2 gap-6"> + <div class="space-y-4"> + <input + id="range-picker" + type="text" + class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + value="" + placeholder="Select time range" + /> + <div + id="range-result" + class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" + > + Selected range: <span id="range-display">--:-- – --:--</span> + <br /> + Duration: <span id="range-duration">0</span> minutes + </div> + </div> + + <div class="space-y-3"> + <pre><code class="language-html"><input id="range-picker" value="09:00" /></code></pre> + <pre><code class="language-javascript">const rangePicker = new TimepickerUI('#range-picker', { + clock: { type: '12h' }, + range: { + enabled: true, + minDuration: 30, + maxDuration: 480, + fromLabel: 'Start', + toLabel: 'End', + }, + callbacks: { + onRangeConfirm: (data) => { + console.log('Range confirmed:', data.from, '–', data.to); + document.getElementById('range-display').textContent = + data.from + ' – ' + data.to; + document.getElementById('range-duration').textContent = data.duration; + }, + onRangeValidation: (data) => { + if (!data.valid) { + console.log('Invalid range: duration must be', + data.minDuration, '-', data.maxDuration, 'min'); + } + }, + }, +}); +rangePicker.create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg" + > + <p class="text-sm text-amber-800 dark:text-amber-300"> + <strong>Tip:</strong> Range mode uses a single clock face. After selecting the "From" time, it + automatically switches to "To" selection. Use minDuration/maxDuration for validation (e.g., + minimum booking 30 minutes, max 8 hours). + </p> + </div> + </div> + </section> + + <!-- Range Mode 24h Section --> + <section class="mb-12"> + <div + id="range-mode-24h" + class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (24h Format)</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Time range selection with 24-hour clock format. + </p> + + <div class="mt-6 grid md:grid-cols-2 gap-6"> + <div class="space-y-4"> + <input + id="range-picker-24h" + type="text" + class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + value="" + placeholder="Select time range" + /> + <div + id="range-result-24h" + class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" + > + Selected range: <span id="range-display-24h">--:-- – --:--</span> + <br /> + Duration: <span id="range-duration-24h">0</span> minutes + </div> + </div> + + <div class="space-y-3"> + <pre><code class="language-html"><input id="range-picker-24h" /></code></pre> + <pre><code class="language-javascript">const range24hPicker = new TimepickerUI('#range-picker-24h', { + clock: { type: '24h' }, + range: { + enabled: true, + minDuration: 60, + maxDuration: 720, + fromLabel: 'Start', + toLabel: 'End', + }, + callbacks: { + onRangeConfirm: (data) => { + console.log(data.from, '–', data.to); + document.getElementById('range-display-24h').textContent = + data.from + ' – ' + data.to; + document.getElementById('range-duration-24h').textContent = data.duration; + }, + }, +}); +range24hPicker.create();</code></pre> + </div> + </div> + </div> + </section> + + <!-- Range Mode 12h AM/PM Section --> + <section class="mb-12"> + <div + id="range-mode-12h-ampm" + class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (12h AM/PM)</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Time range selection spanning AM to PM periods. Try selecting 09:00 AM to 06:00 PM. + </p> + + <div class="mt-6 grid md:grid-cols-2 gap-6"> + <div class="space-y-4"> + <input + id="range-picker-12h-ampm" + type="text" + class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + value="09:00 AM - 05:00 PM" + placeholder="Select time range" + /> + <div + id="range-result-12h-ampm" + class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" + > + Selected range: <span id="range-display-12h-ampm">09:00 AM – 05:00 PM</span> + <br /> + Duration: <span id="range-duration-12h-ampm">480</span> minutes + </div> + </div> + + <div class="space-y-3"> + <pre><code class="language-html"><input id="range-picker-12h-ampm" value="09:00 AM - 05:00 PM" /></code></pre> + <pre><code class="language-javascript">const range12hAmPmPicker = new TimepickerUI('#range-picker-12h-ampm', { + clock: { type: '12h' }, + range: { + enabled: true, + fromLabel: 'From', + toLabel: 'To', + }, + callbacks: { + onRangeConfirm: (data) => { + console.log(data.from, '–', data.to); + document.getElementById('range-display-12h-ampm').textContent = + data.from + ' – ' + data.to; + document.getElementById('range-duration-12h-ampm').textContent = data.duration; + }, + }, +}); +range12hAmPmPicker.create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg" + > + <p class="text-sm text-green-800 dark:text-green-300"> + <strong>AM/PM Sync:</strong> When switching between From (AM) and To (PM) tabs, the clock + correctly synchronizes the AM/PM state. Try clicking on the "To" tab and selecting any hour + (1-12) - all hours are selectable in PM mode. + </p> + </div> + </div> + </section> + + <!-- Range + Clear Button Section --> + <section class="mb-12"> + <div + id="range-clear-button" + class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range + Clear Button</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Combine range mode with the clear button — select a time range with a reset option. + </p> + + <div class="mt-6 grid md:grid-cols-2 gap-6"> + <div class="space-y-4"> + <input + id="range-clear-picker" + type="text" + class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + value="" + placeholder="Select time range" + /> + <div + id="range-clear-result" + class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-300" + > + Selected range: <span id="range-clear-display">--:-- – --:--</span> + </div> + </div> + + <div class="space-y-3"> + <pre><code class="language-html"><input id="range-clear-picker" /></code></pre> + <pre><code class="language-javascript">const rangeClearPicker = new TimepickerUI('#range-clear-picker', { + clock: { type: '12h' }, + ui: { + clearButton: true, + theme: 'm3-green', + enableSwitchIcon: true, + }, + range: { + enabled: true, + fromLabel: 'From', + toLabel: 'To', + }, + labels: { clear: 'Clear' }, + callbacks: { + onRangeConfirm: (data) => { + console.log('Range confirmed:', data.from, '–', data.to); + }, + onClear: (data) => { + console.log('Cleared! Previous:', data.previousValue); + }, + }, +}); +rangeClearPicker.create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg" + > + <p class="text-sm text-blue-800 dark:text-blue-300"> + <strong>Tip:</strong> The Clear button resets both the From and To values. The + <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">onClear</code> callback provides the + previous range value so you can restore it if needed. + </p> + </div> + </div> + </section> diff --git a/app/docs/partials/timezone-api.html b/app/docs/partials/timezone-api.html new file mode 100644 index 0000000..19417fe --- /dev/null +++ b/app/docs/partials/timezone-api.html @@ -0,0 +1,454 @@ + <section + id="timezone-selector" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div class="bg-gradient-to-r from-cyan-50 to-sky-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone Selector (Optional)</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Opt-in timezone selector for B2B/global use cases (UI-only, no conversions) + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex justify-center"> + <input + id="timezone-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="14:30" + /> + </div> + <div class="mt-4 text-center"> + <p class="text-sm text-gray-600 dark:text-gray-400"> + Selected timezone: + <span id="tz-display" class="font-semibold text-blue-600 dark:text-blue-400">-</span> + </p> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="timezone-picker" value="14:30" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const timezonePicker = new TimepickerUI('#timezone-picker', { + clock: { + type: '24h' + }, + timezone: { + enabled: true, + label: 'Timezone', + whitelist: ['UTC', 'America/New_York', 'Europe/London', 'Europe/Warsaw', 'Asia/Tokyo'] + }, + callbacks: { + onTimezoneChange: (data) => { + console.log('Timezone changed:', data.timezone); + document.getElementById('tz-display').textContent = data.timezone; + } + } +}); +timezonePicker.create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg" + > + <p class="text-sm text-blue-800 dark:text-blue-300"> + <strong>Note:</strong> The timezone feature is opt-in and presentation-only. It does not + perform automatic time conversions. Use it for collecting timezone metadata alongside time + input. + </p> + </div> + </div> + </section> + + <section + id="timezone-world-cities" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + > + <div + class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone Selector - World Cities</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Comprehensive timezone example with major cities around the world + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="space-y-6"> + <div class="flex justify-center"> + <input + id="timezone-world-picker" + class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors" + value="09:00" + /> + </div> + <div + class="mt-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600" + > + <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div> + <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + 📍 Selected Timezone: + </p> + <p id="tz-world-display" class="text-lg font-bold text-indigo-600 dark:text-indigo-400"> + - + </p> + </div> + <div> + <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + 🕐 Selected Time: + </p> + <p id="tz-world-time" class="text-lg font-bold text-indigo-600 dark:text-indigo-400"> + - + </p> + </div> + </div> + <div class="mt-4"> + <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">🌍 UTC Offset:</p> + <p id="tz-world-offset" class="text-base font-semibold text-gray-900 dark:text-gray-100"> + - + </p> + </div> + </div> + <div + class="mt-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg border border-blue-200 dark:border-blue-800" + > + <p class="text-sm text-blue-900 dark:text-blue-200 font-medium mb-2"> + 🌏 Try switching between these cities: + </p> + <div class="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs text-blue-800 dark:text-blue-300"> + <div>🗽 New York (EST/EDT)</div> + <div>🌉 San Francisco</div> + <div>🗼 Tokyo</div> + <div>🏛️ London</div> + <div>🥐 Paris</div> + <div>🕌 Dubai</div> + <div>🏖️ Sydney</div> + <div>🇧🇷 São Paulo</div> + <div>🌐 UTC</div> + </div> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="timezone-world-picker" value="09:00" /> +<p id="tz-world-display"></p> +<p id="tz-world-time"></p> +<p id="tz-world-offset"></p></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const worldTimezonePicker = new TimepickerUI('#timezone-world-picker', { + clock: { type: '24h' }, + ui: { theme: 'm3-green', enableSwitchIcon: true }, + timezone: { + enabled: true, + label: 'Select City', + // No default - user must select a timezone + whitelist: [ + 'UTC', + 'America/New_York', + 'America/Los_Angeles', + 'America/Chicago', + 'America/Sao_Paulo', + 'Europe/London', + 'Europe/Paris', + 'Europe/Berlin', + 'Europe/Moscow', + 'Asia/Dubai', + 'Asia/Tokyo', + 'Asia/Shanghai', + 'Asia/Singapore', + 'Australia/Sydney', + 'Pacific/Auckland' + ] + }, + callbacks: { + onTimezoneChange: (data) => { + document.getElementById('tz-world-display').textContent = data.timezone; + + // Get UTC offset for the selected timezone + const formatter = new Intl.DateTimeFormat('en-US', { + timeZone: data.timezone, + timeZoneName: 'shortOffset' + }); + const parts = formatter.formatToParts(new Date()); + const offset = parts.find(p => p.type === 'timeZoneName')?.value || 'UTC'; + document.getElementById('tz-world-offset').textContent = offset; + }, + onConfirm: (data) => { + const time = data.hour + ':' + data.minutes + (data.type ? ' ' + data.type : ''); + document.getElementById('tz-world-time').textContent = time; + } + } +}); +worldTimezonePicker.create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg" + > + <p class="text-sm text-amber-800 dark:text-amber-300"> + <strong>💡 Tip:</strong> The timezone selector automatically displays UTC offsets for each + city. This is a UI-only feature - no automatic time conversions happen. Perfect for scheduling + apps, booking systems, or any global application where users need to specify their timezone. + </p> + </div> + </div> + </section> + + <!-- Timezone All Themes Section --> + <section class="mb-12"> + <div + id="timezone-themes" + class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone - All Themes</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Preview timezone selector across all available themes + </p> + + <div class="mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Basic</label> + <input + id="tz-theme-basic" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Crane</label> + <input + id="tz-theme-crane" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Crane Straight</label> + <input + id="tz-theme-crane-straight" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">M3 Green</label> + <input + id="tz-theme-m3-green" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Dark</label> + <input + id="tz-theme-dark" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">M2</label> + <input + id="tz-theme-m2" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Glassmorphic</label> + <input + id="tz-theme-glassmorphic" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Pastel</label> + <input + id="tz-theme-pastel" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">AI</label> + <input + id="tz-theme-ai" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + <div class="space-y-2"> + <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Cyberpunk</label> + <input + id="tz-theme-cyberpunk" + type="text" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white" + placeholder="Select time" + /> + </div> + </div> + </div> + </section> + + <!-- getValue Without Opening Section --> + <section + id="get-value-demo" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden mb-12" + > + <div + class="bg-gradient-to-r from-lime-50 to-green-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white"> + getValue() Without Opening Widget + </h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Read time values programmatically without opening the modal (Bug Fix Demo) + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="flex flex-col items-center gap-6"> + <div class="w-full max-w-md"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> + Time Input (pre-filled with 14:30) + </label> + <input + id="getvalue-demo-picker" + class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="14:30" + /> + </div> + + <div class="flex gap-3 flex-wrap justify-center"> + <button + id="getvalue-button" + class="px-5 py-2.5 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors shadow-sm hover:shadow-md" + > + Get Value (without opening) + </button> + <button + id="setvalue-button" + class="px-5 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-medium transition-colors shadow-sm hover:shadow-md" + > + Set to 18:45 + </button> + <button + id="open-check-button" + class="px-5 py-2.5 bg-purple-500 hover:bg-purple-600 text-white rounded-lg font-medium transition-colors shadow-sm hover:shadow-md" + > + Open & Check + </button> + </div> + + <div + id="getvalue-result" + class="w-full max-w-md p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 rounded-lg border border-blue-200 dark:border-gray-500" + > + <div class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Result:</div> + <pre + id="getvalue-output" + class="text-sm text-gray-900 dark:text-white font-mono whitespace-pre-wrap" + > +Click "Get Value" to see result</pre + > + </div> + + <div + class="w-full max-w-md bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded-lg p-4" + > + <div class="flex items-start"> + <svg + class="w-5 h-5 text-green-600 dark:text-green-400 mt-0.5 mr-2" + fill="currentColor" + viewBox="0 0 20 20" + > + <path + fill-rule="evenodd" + d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" + clip-rule="evenodd" + /> + </svg> + <div class="text-sm text-green-800 dark:text-green-300"> + <strong>Fixed in v4.1.0:</strong> getValue() now correctly reads from input value when + modal hasn't been opened yet. Degrees are also calculated correctly! + </div> + </div> + </div> + </div> + </div> + + <div class="space-y-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"> + The Bug That Was Fixed + </h4> + <div + class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4" + > + <p class="text-sm text-red-800 dark:text-red-300"> + <strong>Before Fix:</strong> Calling getValue() without opening the modal returned default + values (12:00) instead of reading from the input field. + </p> + </div> + <div + class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4" + > + <p class="text-sm text-green-800 dark:text-green-300"> + <strong>After Fix:</strong> getValue() now checks if modal exists. If not, it reads + directly from the input value using getInputValue() utility. + </p> + </div> + </div> + + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="getvalue-demo-picker" value="14:30" /> +<button id="getvalue-button">Get Value</button> +<button id="setvalue-button">Set to 18:45</button></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const picker = new TimepickerUI('#getvalue-demo-picker', { + clock: { type: '24h' } +}); +picker.create(); + +// Get value without opening modal - now works correctly! +document.getElementById('getvalue-button') + .addEventListener('click', () => { + const value = picker.getValue(); + console.log(value); + // Returns: { hour: '14', minutes: '30', time: '14:30', ... } + }); + +// Set value programmatically +document.getElementById('setvalue-button') + .addEventListener('click', () => { + picker.setValue('18:45'); + console.log(picker.getValue()); // Works immediately! + });</code></pre> + </div> + </div> + </div> + </div> + </section> + + <!-- Range Mode Section --> diff --git a/app/docs/partials/wheel.html b/app/docs/partials/wheel.html new file mode 100644 index 0000000..6f1542f --- /dev/null +++ b/app/docs/partials/wheel.html @@ -0,0 +1,1030 @@ +<section + id="wheel-mode" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-sky-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Wheel Mode</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Scroll-spinner interface — replaces the analog clock face with touch-friendly wheels + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">12h Wheel</label> + <input + id="wheel-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">24h Wheel</label> + <input + id="wheel-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="14:45" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + Dark Theme</label + > + <input + id="wheel-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="08:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + M3 Theme</label + > + <input + id="wheel-m3" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="09:15 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + Cyberpunk</label + > + <input + id="wheel-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="11:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + 5 min step</label + > + <input + id="wheel-step" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="07:30 AM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="wheel-basic" value="10:30 PM" /> +<input id="wheel-24h" value="14:45" /> +<input id="wheel-dark" value="08:00 AM" /> +<input id="wheel-m3" value="09:15 AM" /> +<input id="wheel-cyberpunk" value="11:00 PM" /> +<input id="wheel-step" value="07:30 AM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// Basic 12h wheel +new TimepickerUI('#wheel-basic', { + ui: { mode: 'wheel' } +}).create(); + +// 24h wheel +new TimepickerUI('#wheel-24h', { + clock: { type: '24h' }, + ui: { mode: 'wheel' } +}).create(); + +// Wheel with dark theme +new TimepickerUI('#wheel-dark', { + ui: { mode: 'wheel', theme: 'dark' } +}).create(); + +// Wheel with M3 theme +new TimepickerUI('#wheel-m3', { + ui: { mode: 'wheel', theme: 'm3-green' } +}).create(); + +// Wheel with Cyberpunk theme +new TimepickerUI('#wheel-cyberpunk', { + ui: { mode: 'wheel', theme: 'cyberpunk' } +}).create(); + +// Wheel with 5-minute step +new TimepickerUI('#wheel-step', { + clock: { incrementMinutes: 5 }, + ui: { mode: 'wheel' } +}).create();</code></pre> + </div> + </div> + <div class="mt-6 p-4 bg-sky-50 dark:bg-sky-900/20 rounded-lg border border-sky-200 dark:border-sky-800"> + <h4 class="text-sm font-semibold text-sky-900 dark:text-sky-200 mb-2">Wheel Mode Notes</h4> + <ul class="text-sm text-sky-800 dark:text-sky-300 space-y-1 list-disc list-inside"> + <li> + Set <code class="bg-sky-100 dark:bg-sky-800 px-1 rounded">ui.mode: 'wheel'</code> to replace the + analog clock with scroll wheels + </li> + <li>Works with all themes via CSS variables</li> + <li>AM/PM column appears automatically in 12h mode</li> + <li> + <code class="bg-sky-100 dark:bg-sky-800 px-1 rounded">clock.incrementMinutes</code> controls the + minute step between wheel items + </li> + <li>Keyboard: Arrow Up/Down scrolls one item, Tab moves between columns</li> + <li>Range plugin is not supported in wheel mode</li> + </ul> + </div> + </div> +</section> + +<section + id="wheel-themes" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-sky-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Wheel - All Themes</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Wheel mode preview across all available themes</p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> + <input + id="wheel-theme-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> + <input + id="wheel-theme-crane" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Straight</label + > + <input + id="wheel-theme-crane-straight" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M3 Green</label> + <input + id="wheel-theme-m3-green" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> + <input + id="wheel-theme-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> + <input + id="wheel-theme-m2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Glassmorphic</label> + <input + id="wheel-theme-glassmorphic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pastel</label> + <input + id="wheel-theme-pastel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> + <input + id="wheel-theme-ai" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Cyberpunk</label> + <input + id="wheel-theme-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-sky-500 transition-colors" + value="10:00 AM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="wheel-theme-basic" value="10:00 AM" /> +<input id="wheel-theme-crane" value="10:00 AM" /> +<input id="wheel-theme-crane-straight" value="10:00 AM" /> +<input id="wheel-theme-m3-green" value="10:00 AM" /> +<input id="wheel-theme-dark" value="10:00 AM" /> +<input id="wheel-theme-m2" value="10:00 AM" /> +<input id="wheel-theme-glassmorphic" value="10:00 AM" /> +<input id="wheel-theme-pastel" value="10:00 AM" /> +<input id="wheel-theme-ai" value="10:00 AM" /> +<input id="wheel-theme-cyberpunk" value="10:00 AM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const wheelThemeList = [ + 'basic', 'crane', 'crane-straight', + 'm3-green', 'dark', 'm2', + 'glassmorphic', 'pastel', 'ai', 'cyberpunk' +]; + +wheelThemeList.forEach((theme) => { + new TimepickerUI(`#wheel-theme-${theme}`, { + ui: { mode: 'wheel', theme, enableSwitchIcon: true }, + }).create(); +});</code></pre> + </div> + </div> + </div> +</section> + +<section + id="compact-wheel" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-violet-50 to-fuchsia-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel Mode</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Minimal wheel-only picker — no header, no clock face. AM/PM appears as a third scrollable column in 12h + mode. Perfect for mobile and embedded UIs. + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">12h Compact</label> + <input + id="compact-wheel-12h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">24h Compact</label> + <input + id="compact-wheel-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="17:15" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Compact + 5 min step</label + > + <input + id="compact-wheel-step" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="09:00 AM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="compact-wheel-12h" value="02:30 PM" /> +<input id="compact-wheel-24h" value="17:15" /> +<input id="compact-wheel-step" value="09:00 AM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// 12h compact — AM/PM as third wheel column +new TimepickerUI('#compact-wheel-12h', { + ui: { mode: 'compact-wheel' } +}).create(); + +// 24h compact — two columns only +new TimepickerUI('#compact-wheel-24h', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel' } +}).create(); + +// Compact with 5-minute step +new TimepickerUI('#compact-wheel-step', { + clock: { incrementMinutes: 5 }, + ui: { mode: 'compact-wheel' } +}).create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-violet-50 dark:bg-violet-900/20 rounded-lg border border-violet-200 dark:border-violet-800" + > + <h4 class="text-sm font-semibold text-violet-900 dark:text-violet-200 mb-2">Compact Wheel Notes</h4> + <ul class="text-sm text-violet-800 dark:text-violet-300 space-y-1 list-disc list-inside"> + <li> + Set + <code class="bg-violet-100 dark:bg-violet-800 px-1 rounded">ui.mode: 'compact-wheel'</code> + — no header, wheel is the sole UI + </li> + <li>In 12h mode, AM/PM is a third scrollable column next to minutes</li> + <li>In 24h mode, only hours + minutes columns are shown</li> + <li>Center item = selected value with high-contrast styling</li> + <li>Works with all themes via CSS variables</li> + </ul> + </div> + </div> +</section> + +<section + id="compact-wheel-themes" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-violet-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel - All Themes</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Compact wheel mode preview across all available themes + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> + <input + id="compact-theme-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> + <input + id="compact-theme-crane" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Straight</label + > + <input + id="compact-theme-crane-straight" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M3 Green</label> + <input + id="compact-theme-m3-green" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> + <input + id="compact-theme-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> + <input + id="compact-theme-m2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Glassmorphic</label> + <input + id="compact-theme-glassmorphic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pastel</label> + <input + id="compact-theme-pastel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> + <input + id="compact-theme-ai" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Cyberpunk</label> + <input + id="compact-theme-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-violet-500 transition-colors" + value="03:00 PM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="compact-theme-basic" value="03:00 PM" /> +<input id="compact-theme-crane" value="03:00 PM" /> +<input id="compact-theme-crane-straight" value="03:00 PM" /> +<input id="compact-theme-m3-green" value="03:00 PM" /> +<input id="compact-theme-dark" value="03:00 PM" /> +<input id="compact-theme-m2" value="03:00 PM" /> +<input id="compact-theme-glassmorphic" value="03:00 PM" /> +<input id="compact-theme-pastel" value="03:00 PM" /> +<input id="compact-theme-ai" value="03:00 PM" /> +<input id="compact-theme-cyberpunk" value="03:00 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const compactThemeList = [ + 'basic', 'crane', 'crane-straight', + 'm3-green', 'dark', 'm2', + 'glassmorphic', 'pastel', 'ai', 'cyberpunk' +]; + +compactThemeList.forEach((theme) => { + new TimepickerUI(`#compact-theme-${theme}`, { + ui: { mode: 'compact-wheel', theme, enableSwitchIcon: true }, + }).create(); +});</code></pre> + </div> + </div> + </div> +</section> + +<section + id="commit-on-scroll" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Commit on Scroll</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Auto-commit the selected time when the wheel stops scrolling — no OK button needed + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + Auto Commit</label + > + <input + id="commit-on-scroll-wheel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-amber-500 transition-colors" + value="10:30 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Popover + Auto Commit</label + > + <input + id="commit-on-scroll-popover" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-amber-500 transition-colors" + value="02:00 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >24h Popover + Auto Commit</label + > + <input + id="commit-on-scroll-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-amber-500 transition-colors" + value="14:30" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="commit-on-scroll-wheel" value="10:30 AM" /> +<input id="commit-on-scroll-popover" value="02:00 PM" /> +<input id="commit-on-scroll-24h" value="14:30" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// Wheel with auto-commit +new TimepickerUI('#commit-on-scroll-wheel', { + ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, +}).create(); + +// Popover with auto-commit +new TimepickerUI('#commit-on-scroll-popover', { + ui: { mode: 'compact-wheel', wheel: { placement: 'auto', commitOnScroll: true } }, +}).create(); + +// 24h popover with auto-commit +new TimepickerUI('#commit-on-scroll-24h', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel', wheel: { placement: 'auto', commitOnScroll: true } }, +}).create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800" + > + <h4 class="text-sm font-semibold text-amber-900 dark:text-amber-200 mb-2">commitOnScroll Notes</h4> + <ul class="text-sm text-amber-800 dark:text-amber-300 space-y-1 list-disc list-inside"> + <li> + Set + <code class="bg-amber-100 dark:bg-amber-800 px-1 rounded">ui.wheel.commitOnScroll: true</code> for + instant commit on scroll end + </li> + <li> + Applies to <code class="bg-amber-100 dark:bg-amber-800 px-1 rounded">wheel</code> and + <code class="bg-amber-100 dark:bg-amber-800 px-1 rounded">compact-wheel</code> modes only + </li> + <li>Input value updates immediately when scrolling stops</li> + <li>OK/Cancel buttons still work normally when this option is disabled</li> + </ul> + </div> + </div> +</section> + +<!-- Compact Wheel + Popover Placement Section --> + +<section + id="wheel-disabled" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-red-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Wheel + Disabled Time</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + All disabledTime options in wheel mode — hours, minutes, single interval, multiple intervals, 24h, + hideDisabledOptions + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Hours (12h)</label + > + <input + id="wheel-disabled-hours-12h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 transition-colors" + value="09:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Hours (24h)</label + > + <input + id="wheel-disabled-hours-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 transition-colors" + value="09:00" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Minutes</label + > + <input + id="wheel-disabled-minutes" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Single Interval (12h)</label + > + <input + id="wheel-disabled-interval-12h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 transition-colors" + value="08:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Single Interval (24h)</label + > + <input + id="wheel-disabled-interval-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 transition-colors" + value="07:00" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Multiple Intervals (12h)</label + > + <input + id="wheel-disabled-intervals-12h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 transition-colors" + value="07:30 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Multiple Intervals (24h)</label + > + <input + id="wheel-disabled-intervals-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 transition-colors" + value="06:00" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Hide Disabled Hours</label + > + <input + id="wheel-hide-disabled-hours" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 transition-colors" + value="09:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Hide Disabled Interval</label + > + <input + id="wheel-hide-disabled-interval" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500 transition-colors" + value="09:00" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="wheel-disabled-hours-12h" value="09:00 AM" /> +<input id="wheel-disabled-hours-24h" value="09:00" /> +<input id="wheel-disabled-minutes" value="10:00 AM" /> +<input id="wheel-disabled-interval-12h" value="08:00 AM" /> +<input id="wheel-disabled-interval-24h" value="07:00" /> +<input id="wheel-disabled-intervals-12h" value="07:30 AM" /> +<input id="wheel-disabled-intervals-24h" value="06:00" /> +<input id="wheel-hide-disabled-hours" value="09:00 AM" /> +<input id="wheel-hide-disabled-interval" value="09:00" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// Disabled specific hours — 12h +new TimepickerUI('#wheel-disabled-hours-12h', { + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8] } + }, + ui: { mode: 'wheel' } +}).create(); + +// Disabled specific hours — 24h +new TimepickerUI('#wheel-disabled-hours-24h', { + clock: { + type: '24h', + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23] } + }, + ui: { mode: 'wheel' } +}).create(); + +// Disabled specific minutes +new TimepickerUI('#wheel-disabled-minutes', { + clock: { + disabledTime: { minutes: [15, 30, 45] } + }, + ui: { mode: 'wheel' } +}).create(); + +// Single interval — 12h +new TimepickerUI('#wheel-disabled-interval-12h', { + clock: { + type: '12h', + disabledTime: { interval: '10:00 AM - 2:00 PM' } + }, + ui: { mode: 'wheel' } +}).create(); + +// Single interval — 24h +new TimepickerUI('#wheel-disabled-interval-24h', { + clock: { + type: '24h', + disabledTime: { interval: '12:00 - 18:00' } + }, + ui: { mode: 'wheel' } +}).create(); + +// Multiple intervals — 12h +new TimepickerUI('#wheel-disabled-intervals-12h', { + clock: { + type: '12h', + disabledTime: { + interval: ['9:00 AM - 11:00 AM', '1:00 PM - 3:00 PM'] + } + }, + ui: { mode: 'wheel' } +}).create(); + +// Multiple intervals — 24h +new TimepickerUI('#wheel-disabled-intervals-24h', { + clock: { + type: '24h', + disabledTime: { + interval: ['00:00 - 06:00', '12:00 - 13:00', '18:00 - 23:59'] + } + }, + ui: { mode: 'wheel' } +}).create(); + +// hideDisabledOptions — hours +new TimepickerUI('#wheel-hide-disabled-hours', { + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8], hideOptions: true } + }, + ui: { mode: 'wheel' } +}).create(); + +// hideDisabledOptions — interval 24h +new TimepickerUI('#wheel-hide-disabled-interval', { + clock: { + type: '24h', + disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'], hideOptions: true } + }, + ui: { mode: 'wheel' } +}).create();</code></pre> + </div> + </div> + <div class="mt-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800"> + <h4 class="text-sm font-semibold text-red-900 dark:text-red-200 mb-2">Wheel + disabledTime Notes</h4> + <ul class="text-sm text-red-800 dark:text-red-300 space-y-1 list-disc list-inside"> + <li>Disabled items are dimmed and skipped during keyboard navigation</li> + <li> + Set <code class="bg-red-100 dark:bg-red-800 px-1 rounded">disabledTime.hideOptions: true</code> to + completely remove them from the wheel + </li> + <li> + When using <code class="bg-red-100 dark:bg-red-800 px-1 rounded">interval</code>, the + <code class="bg-red-100 dark:bg-red-800 px-1 rounded">hours</code> and + <code class="bg-red-100 dark:bg-red-800 px-1 rounded">minutes</code> keys are ignored + </li> + <li>Multiple intervals accepted as an array of strings</li> + </ul> + </div> + </div> +</section> + +<section + id="compact-wheel-disabled" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-fuchsia-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel + Disabled Time</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + All disabledTime options in compact-wheel mode — hours, minutes, single interval, multiple intervals, + 24h, hideDisabledOptions + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Hours (12h)</label + > + <input + id="compact-disabled-hours-12h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="09:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Hours (24h)</label + > + <input + id="compact-disabled-hours-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="09:00" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Disabled Minutes</label + > + <input + id="compact-disabled-minutes" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="10:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Single Interval (12h)</label + > + <input + id="compact-disabled-interval-12h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="08:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Single Interval (24h)</label + > + <input + id="compact-disabled-interval-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="07:00" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Multiple Intervals (12h)</label + > + <input + id="compact-disabled-intervals-12h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="07:30 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Multiple Intervals (24h)</label + > + <input + id="compact-disabled-intervals-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="06:00" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Hide Disabled Hours</label + > + <input + id="compact-hide-disabled-hours" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="09:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Hide Disabled Interval</label + > + <input + id="compact-hide-disabled-interval" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-fuchsia-500 transition-colors" + value="09:00" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="compact-disabled-hours-12h" value="09:00 AM" /> +<input id="compact-disabled-hours-24h" value="09:00" /> +<input id="compact-disabled-minutes" value="10:00 AM" /> +<input id="compact-disabled-interval-12h" value="08:00 AM" /> +<input id="compact-disabled-interval-24h" value="07:00" /> +<input id="compact-disabled-intervals-12h" value="07:30 AM" /> +<input id="compact-disabled-intervals-24h" value="06:00" /> +<input id="compact-hide-disabled-hours" value="09:00 AM" /> +<input id="compact-hide-disabled-interval" value="09:00" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// Disabled specific hours — 12h +new TimepickerUI('#compact-disabled-hours-12h', { + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8] } + }, + ui: { mode: 'compact-wheel' } +}).create(); + +// Disabled specific hours — 24h +new TimepickerUI('#compact-disabled-hours-24h', { + clock: { + type: '24h', + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 18, 19, 20, 21, 22, 23] } + }, + ui: { mode: 'compact-wheel' } +}).create(); + +// Disabled specific minutes +new TimepickerUI('#compact-disabled-minutes', { + clock: { + disabledTime: { minutes: [15, 30, 45] } + }, + ui: { mode: 'compact-wheel' } +}).create(); + +// Single interval — 12h +new TimepickerUI('#compact-disabled-interval-12h', { + clock: { + type: '12h', + disabledTime: { interval: '10:00 AM - 2:00 PM' } + }, + ui: { mode: 'compact-wheel' } +}).create(); + +// Single interval — 24h +new TimepickerUI('#compact-disabled-interval-24h', { + clock: { + type: '24h', + disabledTime: { interval: '12:00 - 18:00' } + }, + ui: { mode: 'compact-wheel' } +}).create(); + +// Multiple intervals — 12h +new TimepickerUI('#compact-disabled-intervals-12h', { + clock: { + type: '12h', + disabledTime: { + interval: ['9:00 AM - 11:00 AM', '1:00 PM - 3:00 PM'] + } + }, + ui: { mode: 'compact-wheel' } +}).create(); + +// Multiple intervals — 24h +new TimepickerUI('#compact-disabled-intervals-24h', { + clock: { + type: '24h', + disabledTime: { + interval: ['00:00 - 06:00', '12:00 - 13:00', '18:00 - 23:59'] + } + }, + ui: { mode: 'compact-wheel' } +}).create(); + +// hideDisabledOptions — hours +new TimepickerUI('#compact-hide-disabled-hours', { + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8], hideOptions: true } + }, + ui: { mode: 'compact-wheel' } +}).create(); + +// hideDisabledOptions — interval 24h +new TimepickerUI('#compact-hide-disabled-interval', { + clock: { + type: '24h', + disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'], hideOptions: true } + }, + ui: { mode: 'compact-wheel' } +}).create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-fuchsia-50 dark:bg-fuchsia-900/20 rounded-lg border border-fuchsia-200 dark:border-fuchsia-800" + > + <h4 class="text-sm font-semibold text-fuchsia-900 dark:text-fuchsia-200 mb-2"> + Compact Wheel + disabledTime Notes + </h4> + <ul class="text-sm text-fuchsia-800 dark:text-fuchsia-300 space-y-1 list-disc list-inside"> + <li>All disabledTime options work identically in compact-wheel and wheel modes</li> + <li> + In compact-wheel 12h mode, AM/PM column is always shown as the third wheel — it is never disabled + </li> + <li> + Set + <code class="bg-fuchsia-100 dark:bg-fuchsia-800 px-1 rounded">disabledTime.hideOptions: true</code> + to remove disabled items entirely + </li> + <li> + Combine with + <code class="bg-fuchsia-100 dark:bg-fuchsia-800 px-1 rounded">ui.wheel.placement</code> for a + popover variant + </li> + </ul> + </div> + </div> +</section> diff --git a/app/package.json b/app/package.json index 9825a7a..908199d 100644 --- a/app/package.json +++ b/app/package.json @@ -33,7 +33,8 @@ "**/plugins/wheel.ts", "**/plugins/range.js", "**/plugins/timezone.js", - "**/plugins/wheel.js" + "**/plugins/wheel.js", + "docs/**" ], "files": [ "dist/*" @@ -100,6 +101,7 @@ "eslint-plugin-prettier": "^5.5.3", "eslint-plugin-tree-shaking": "^1.12.2", "file-loader": "^6.2.0", + "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.3", "husky": "^9.1.7", "jest": "^30.0.4", diff --git a/app/src/managers/ModalManager.ts b/app/src/managers/ModalManager.ts index db9c1c8..2c4c110 100644 --- a/app/src/managers/ModalManager.ts +++ b/app/src/managers/ModalManager.ts @@ -32,7 +32,7 @@ export default class ModalManager { return; } - const existing = document.querySelector('.tp-ui-modal'); + const existing = this.core.getModalElement(); if (existing) existing.remove(); } @@ -81,6 +81,7 @@ export default class ModalManager { } if (this.core.options.ui.inline?.enabled) return; + if (this.core.options.ui.mode === 'compact-wheel' && !!this.core.options.ui.wheel?.placement) return; if (!this.core.options.ui.enableScrollbar) { this.originalOverflow = document.body.style.overflowY; @@ -128,6 +129,12 @@ export default class ModalManager { return; } + if (this.core.options.ui.mode === 'compact-wheel' && !!this.core.options.ui.wheel?.placement) { + this.core.getModalElement()?.classList.add('show'); + this.setInitialFocus(); + return; + } + if (this.core.options.ui.backdrop) { this.runWithTimeout(() => { this.core.getModalElement()?.classList.add('show'); @@ -165,4 +172,3 @@ export default class ModalManager { this.clearExistingModal(); } } - diff --git a/app/src/managers/clock/ClockSystem.ts b/app/src/managers/clock/ClockSystem.ts index 0fc3ecf..b7abc5c 100644 --- a/app/src/managers/clock/ClockSystem.ts +++ b/app/src/managers/clock/ClockSystem.ts @@ -19,6 +19,7 @@ export interface ClockSystemConfig { incrementHours?: number; incrementMinutes?: number; smoothHourSnap?: boolean; + hideOptions?: boolean; onHourChange?: (hour: string) => void; onMinuteChange?: (minute: string) => void; timepicker: unknown; @@ -47,6 +48,7 @@ export class ClockSystem { clockHand: config.clockHand, circle: config.circle, theme: config.theme, + hideOptions: config.hideOptions, }; this.renderer = new ClockRenderer(renderConfig); diff --git a/app/src/managers/clock/handlers/ClockSystemInitializer.ts b/app/src/managers/clock/handlers/ClockSystemInitializer.ts index fc8c5bf..4f33d56 100644 --- a/app/src/managers/clock/handlers/ClockSystemInitializer.ts +++ b/app/src/managers/clock/handlers/ClockSystemInitializer.ts @@ -52,6 +52,7 @@ export class ClockSystemInitializer { incrementHours: this.core.options.clock.incrementHours || 1, incrementMinutes: this.core.options.clock.incrementMinutes || 1, smoothHourSnap: this.core.options.clock.smoothHourSnap ?? true, + hideOptions: this.core.options.clock.disabledTime?.hideOptions ?? false, timepicker: null, dragConfig: { autoSwitchToMinutes: this.core.options.clock.autoSwitchToMinutes, @@ -154,4 +155,3 @@ export class ClockSystemInitializer { } } } - diff --git a/app/src/managers/clock/renderer/ClockRenderer.ts b/app/src/managers/clock/renderer/ClockRenderer.ts index d38a46d..15aa29f 100644 --- a/app/src/managers/clock/renderer/ClockRenderer.ts +++ b/app/src/managers/clock/renderer/ClockRenderer.ts @@ -175,6 +175,12 @@ export class ClockRenderer { spanTip.classList.add('tp-ui-tips-disabled'); spanTip.setAttribute('aria-disabled', 'true'); spanTip.tabIndex = -1; + + if (this.config.hideOptions === true) { + span.classList.add('tp-ui-tips-hidden'); + } + } else { + span.classList.remove('tp-ui-tips-hidden'); } } diff --git a/app/src/managers/clock/types.ts b/app/src/managers/clock/types.ts index e7f48d1..fad305f 100644 --- a/app/src/managers/clock/types.ts +++ b/app/src/managers/clock/types.ts @@ -56,4 +56,5 @@ export interface RenderConfig { clockHand: HTMLElement; circle: HTMLElement; theme?: string; + hideOptions?: boolean; } diff --git a/app/src/managers/config/InputValueHandler.ts b/app/src/managers/config/InputValueHandler.ts index 4a2dbc9..d17cc72 100644 --- a/app/src/managers/config/InputValueHandler.ts +++ b/app/src/managers/config/InputValueHandler.ts @@ -85,6 +85,10 @@ export class InputValueHandler { typeValue = value.type as string; } + if (this.core.options.clock.type !== '24h' && !typeValue) { + typeValue = value.type || 'AM'; + } + if (hour) hour.value = hourValue.padStart(2, '0'); if (minutes) minutes.value = minutesValue.padStart(2, '0'); @@ -114,4 +118,3 @@ export class InputValueHandler { destroy(): void {} } - diff --git a/app/src/managers/plugins/range/RangeManager.ts b/app/src/managers/plugins/range/RangeManager.ts index 353d571..2f65a71 100644 --- a/app/src/managers/plugins/range/RangeManager.ts +++ b/app/src/managers/plugins/range/RangeManager.ts @@ -18,6 +18,7 @@ export default class RangeManager { private boundHandleConfirm: (data: ConfirmEventData) => void; private boundHandleUpdate: () => void; private boundHandleAmPm: () => void; + private boundHandleClear: () => void; constructor(core: CoreState, emitter: EventEmitter<TimepickerEventMap>) { this.core = core; @@ -31,6 +32,7 @@ export default class RangeManager { this.boundHandleConfirm = this.handleConfirm.bind(this); this.boundHandleUpdate = this.handleUpdate.bind(this); this.boundHandleAmPm = this.handleAmPm.bind(this); + this.boundHandleClear = this.handleClear.bind(this); } private get isEnabled(): boolean { @@ -148,6 +150,18 @@ export default class RangeManager { this.emitter.on('select:pm', this.boundHandleAmPm); this.cleanupHandlers.push(() => this.emitter.off('select:pm', this.boundHandleAmPm)); + + this.emitter.on('clear', this.boundHandleClear); + this.cleanupHandlers.push(() => this.emitter.off('clear', this.boundHandleClear)); + } + + private handleClear(): void { + if (!this.isEnabled) return; + + this.state.setFromValue(null); + this.state.setToValue(null); + this.state.setPreviewValue(null); + this.state.resetActivePart(); } private handleUpdate(): void { diff --git a/app/src/managers/plugins/range/RangeState.ts b/app/src/managers/plugins/range/RangeState.ts index f249981..1eb081d 100644 --- a/app/src/managers/plugins/range/RangeState.ts +++ b/app/src/managers/plugins/range/RangeState.ts @@ -87,6 +87,11 @@ export class RangeState { return changed; } + resetActivePart(): void { + this.activePart = 'from'; + this.previewValue = null; + } + getCurrentValue(): RangeValue | null { if (this.previewValue) { return this.previewValue; diff --git a/app/src/managers/plugins/wheel/PopoverManager.ts b/app/src/managers/plugins/wheel/PopoverManager.ts new file mode 100644 index 0000000..76e6469 --- /dev/null +++ b/app/src/managers/plugins/wheel/PopoverManager.ts @@ -0,0 +1,179 @@ +import type { CoreState } from '../../../timepicker/CoreState'; +import type { EventEmitter, TimepickerEventMap } from '../../../utils/EventEmitter'; +import { isDocument } from '../../../utils/node'; + +const TP_POPOVER_GAP_PX = 4; +const TP_POPOVER_MIN_WIDTH_PX = 260; +const TP_POPOVER_MAX_WIDTH_PX = 328; +const TP_POPOVER_EDGE_MARGIN_PX = 4; + +type PopoverPlacement = 'top' | 'bottom'; + +export default class PopoverManager { + private readonly core: CoreState; + private readonly emitter: EventEmitter<TimepickerEventMap>; + private resizeHandler: (() => void) | null = null; + private scrollHandler: (() => void) | null = null; + private clickOutsideHandler: ((e: MouseEvent) => void) | null = null; + private rafId: number | null = null; + private isAttached: boolean = false; + + constructor(core: CoreState, emitter: EventEmitter<TimepickerEventMap>) { + this.core = core; + this.emitter = emitter; + } + + isPopoverMode(): boolean { + return this.core.options.ui.mode === 'compact-wheel' && !!this.core.options.ui.wheel?.placement; + } + + attach(): void { + if (!this.isPopoverMode()) return; + if (!isDocument()) return; + + const modal = this.core.getModalElement(); + if (!modal) return; + + modal.classList.add('tp-ui-popover'); + this.positionPopover(); + this.addListeners(); + this.isAttached = true; + } + + detach(): void { + if (!this.isAttached) return; + this.removeListeners(); + this.isAttached = false; + } + + destroy(): void { + this.detach(); + } + + private positionPopover(): void { + const input = this.core.getInput(); + const modal = this.core.getModalElement(); + if (!input || !modal) return; + + const inputRect = input.getBoundingClientRect(); + const placement = this.core.options.ui.wheel?.placement ?? 'auto'; + + const width = Math.min(Math.max(inputRect.width, TP_POPOVER_MIN_WIDTH_PX), TP_POPOVER_MAX_WIDTH_PX); + modal.style.width = `${width}px`; + + const pickerHeight = modal.offsetHeight; + + const resolved = this.resolvePlacement(placement, inputRect, pickerHeight); + const top = this.computeTop(resolved, inputRect, pickerHeight); + const left = this.clampHorizontal(inputRect.left, width); + + modal.style.top = `${top}px`; + modal.style.left = `${left}px`; + modal.setAttribute('data-popover-placement', resolved); + } + + private resolvePlacement( + placement: 'auto' | 'top' | 'bottom', + inputRect: DOMRect, + pickerHeight: number, + ): PopoverPlacement { + if (placement === 'top') return 'top'; + if (placement === 'bottom') return 'bottom'; + + const spaceBelow = window.innerHeight - inputRect.bottom; + const spaceAbove = inputRect.top; + + if (spaceBelow >= pickerHeight + TP_POPOVER_GAP_PX) return 'bottom'; + if (spaceAbove >= pickerHeight + TP_POPOVER_GAP_PX) return 'top'; + return 'bottom'; + } + + private computeTop(resolved: PopoverPlacement, inputRect: DOMRect, pickerHeight: number): number { + if (resolved === 'top') { + return inputRect.top - pickerHeight - TP_POPOVER_GAP_PX; + } + return inputRect.bottom + TP_POPOVER_GAP_PX; + } + + private clampHorizontal(idealLeft: number, width: number): number { + let left = idealLeft; + if (left + width > window.innerWidth) { + left = window.innerWidth - width - TP_POPOVER_EDGE_MARGIN_PX; + } + if (left < TP_POPOVER_EDGE_MARGIN_PX) { + left = TP_POPOVER_EDGE_MARGIN_PX; + } + return left; + } + + private addListeners(): void { + if (!isDocument()) return; + + this.resizeHandler = (): void => { + this.scheduleReposition(); + }; + + this.scrollHandler = (): void => { + this.scheduleReposition(); + }; + + this.clickOutsideHandler = (e: MouseEvent): void => { + this.handleClickOutside(e); + }; + + window.addEventListener('resize', this.resizeHandler, { passive: true }); + window.addEventListener('scroll', this.scrollHandler, { passive: true, capture: true }); + + const clickHandler = this.clickOutsideHandler; + setTimeout((): void => { + if (clickHandler === this.clickOutsideHandler) { + document.addEventListener('pointerdown', clickHandler); + } + }, 0); + } + + private removeListeners(): void { + if (this.rafId !== null) { + cancelAnimationFrame(this.rafId); + this.rafId = null; + } + + if (this.resizeHandler) { + window.removeEventListener('resize', this.resizeHandler); + this.resizeHandler = null; + } + + if (this.scrollHandler) { + window.removeEventListener('scroll', this.scrollHandler, true as unknown as EventListenerOptions); + this.scrollHandler = null; + } + + if (this.clickOutsideHandler) { + document.removeEventListener('pointerdown', this.clickOutsideHandler); + this.clickOutsideHandler = null; + } + } + + private scheduleReposition(): void { + if (this.rafId !== null) return; + + this.rafId = requestAnimationFrame((): void => { + this.rafId = null; + this.positionPopover(); + }); + } + + private handleClickOutside(e: MouseEvent): void { + const modal = this.core.getModalElement(); + const input = this.core.getInput(); + const target = e.target as Node | null; + if (!modal || !target) return; + + const isInsideModal = modal.contains(target); + const isInsideInput = input ? input.contains(target) : false; + + if (!isInsideModal && !isInsideInput) { + this.emitter.emit('cancel', {}); + } + } +} diff --git a/app/src/managers/plugins/wheel/WheelDragHandler.ts b/app/src/managers/plugins/wheel/WheelDragHandler.ts index 307f38f..e736743 100644 --- a/app/src/managers/plugins/wheel/WheelDragHandler.ts +++ b/app/src/managers/plugins/wheel/WheelDragHandler.ts @@ -45,6 +45,8 @@ export class WheelDragHandler { } init(): void { + this.cleanupPreviousInit(); + if (!isDocument()) return; const columnTypes: readonly WheelColumnType[] = ['hours', 'minutes', 'ampm']; @@ -107,6 +109,13 @@ export class WheelDragHandler { } destroy(): void { + this.cleanupPreviousInit(); + this.onSnap = null; + this.onVisualUpdate = null; + this.onScrollStart = null; + } + + private cleanupPreviousInit(): void { if (this.visualUpdateRaf !== null) { cancelAnimationFrame(this.visualUpdateRaf); this.visualUpdateRaf = null; @@ -122,9 +131,6 @@ export class WheelDragHandler { this.columnStates.forEach((state) => state.destroy()); this.columnStates.clear(); - this.onSnap = null; - this.onVisualUpdate = null; - this.onScrollStart = null; } private handlePointerDown(columnType: WheelColumnType, e: PointerEvent): void { diff --git a/app/src/managers/plugins/wheel/WheelEventHandler.ts b/app/src/managers/plugins/wheel/WheelEventHandler.ts index 1ff0325..082e55d 100644 --- a/app/src/managers/plugins/wheel/WheelEventHandler.ts +++ b/app/src/managers/plugins/wheel/WheelEventHandler.ts @@ -3,11 +3,14 @@ import type { EventEmitter, TimepickerEventMap } from '../../../utils/EventEmitt import type { WheelScrollHandler } from './WheelScrollHandler'; import type { WheelColumnType } from './WheelTypes'; import { isDocument } from '../../../utils/node'; +import { announceToScreenReader } from '../../../utils/accessibility'; const ARROW_UP = 'ArrowUp'; const ARROW_DOWN = 'ArrowDown'; const NEUTRAL_HOUR = '12'; const NEUTRAL_MINUTES = '00'; +const NEUTRAL_AMPM = 'AM'; +const COMMIT_ON_SCROLL_DELAY_MS = 400; export class WheelEventHandler { private emitter: EventEmitter<TimepickerEventMap>; @@ -17,6 +20,7 @@ export class WheelEventHandler { private clearHandler: ((data: { previousValue: string | null }) => void) | null = null; private previousValues: Map<WheelColumnType, string | null> = new Map(); private scrollStartHandler: ((columnType: WheelColumnType) => void) | null = null; + private commitOnScrollTimer: ReturnType<typeof setTimeout> | null = null; constructor(emitter: EventEmitter<TimepickerEventMap>, scrollHandler: WheelScrollHandler, core: CoreState) { this.emitter = emitter; @@ -25,6 +29,10 @@ export class WheelEventHandler { } init(): void { + this.removeKeyboardListeners(); + this.removeClearListener(); + this.previousValues.clear(); + this.captureCurrentValues(); this.scrollHandler.setScrollEndCallback((columnType: WheelColumnType, value: string): void => { @@ -47,6 +55,10 @@ export class WheelEventHandler { this.removeClearListener(); this.previousValues.clear(); this.scrollStartHandler = null; + if (this.commitOnScrollTimer !== null) { + clearTimeout(this.commitOnScrollTimer); + this.commitOnScrollTimer = null; + } } private handleColumnScrollEnd(columnType: WheelColumnType, value: string): void { @@ -61,14 +73,27 @@ export class WheelEventHandler { this.previousValues.set(columnType, value); + const modal = this.core.getModalElement(); + switch (columnType) { case 'hours': this.syncHourInput(value); this.emitter.emit('select:hour', { hour: value }); + announceToScreenReader(modal, `Hour: ${value}`); break; case 'minutes': this.syncMinuteInput(value); this.emitter.emit('select:minute', { minutes: value }); + announceToScreenReader(modal, `Minutes: ${value}`); + break; + case 'ampm': + this.syncAmPmState(value); + if (value === 'AM') { + this.emitter.emit('select:am', {}); + } else { + this.emitter.emit('select:pm', {}); + } + announceToScreenReader(modal, `${value} selected`); break; } @@ -77,6 +102,34 @@ export class WheelEventHandler { minutes: selection.minute, type: selection.ampm ?? undefined, }); + + if (this.core.options.ui.wheel?.commitOnScroll === true) { + this.scheduleCommitOnScroll(); + } + } + + private scheduleCommitOnScroll(): void { + if (this.commitOnScrollTimer !== null) { + clearTimeout(this.commitOnScrollTimer); + } + + this.commitOnScrollTimer = setTimeout(() => { + this.commitOnScrollTimer = null; + const selection = this.scrollHandler.getCurrentSelection(); + + const input = this.core.getInput(); + if (input) { + const type = selection.ampm ? ` ${selection.ampm}` : ''; + input.value = `${selection.hour}:${selection.minute}${type}`; + } + + this.emitter.emit('confirm', { + hour: selection.hour, + minutes: selection.minute, + type: selection.ampm ?? undefined, + autoCommit: true, + }); + }, COMMIT_ON_SCROLL_DELAY_MS); } private syncHourInput(value: string): void { @@ -97,10 +150,20 @@ export class WheelEventHandler { this.core.setDegreesMinutes(parseInt(value, 10) * 6); } + private syncAmPmState(value: string): void { + const AM = this.core.getAM(); + const PM = this.core.getPM(); + + if (AM && PM) { + AM.classList.toggle('active', value === 'AM'); + PM.classList.toggle('active', value === 'PM'); + } + } + private attachKeyboardListeners(): void { if (!isDocument()) return; - const columnTypes: readonly WheelColumnType[] = ['hours', 'minutes']; + const columnTypes: readonly WheelColumnType[] = ['hours', 'minutes', 'ampm']; columnTypes.forEach((type) => { const col = this.scrollHandler.getCurrentSelection() ? this.getColumnFromRenderer(type) : null; @@ -175,6 +238,7 @@ export class WheelEventHandler { this.clearHandler = (): void => { this.scrollHandler.scrollToValue('hours', NEUTRAL_HOUR); this.scrollHandler.scrollToValue('minutes', NEUTRAL_MINUTES); + this.scrollHandler.scrollToValue('ampm', NEUTRAL_AMPM); }; this.emitter.on('clear', this.clearHandler); diff --git a/app/src/managers/plugins/wheel/WheelManager.ts b/app/src/managers/plugins/wheel/WheelManager.ts index f2bb690..8676d8d 100644 --- a/app/src/managers/plugins/wheel/WheelManager.ts +++ b/app/src/managers/plugins/wheel/WheelManager.ts @@ -4,6 +4,7 @@ import { WheelRenderer } from './WheelRenderer'; import { WheelScrollHandler } from './WheelScrollHandler'; import { WheelEventHandler } from './WheelEventHandler'; import { WheelDragHandler } from './WheelDragHandler'; +import PopoverManager from './PopoverManager'; export default class WheelManager { private readonly renderer: WheelRenderer; @@ -12,7 +13,9 @@ export default class WheelManager { private readonly eventHandler: WheelEventHandler; private readonly core: CoreState; private readonly emitter: EventEmitter<TimepickerEventMap>; + private readonly popover: PopoverManager; private amPmHandler: (() => void) | null = null; + private hourChangeHandler: (() => void) | null = null; constructor(core: CoreState, emitter: EventEmitter<TimepickerEventMap>) { this.core = core; @@ -22,6 +25,7 @@ export default class WheelManager { this.scrollHandler = new WheelScrollHandler(this.renderer, core); this.scrollHandler.setDragHandler(this.dragHandler); this.eventHandler = new WheelEventHandler(emitter, this.scrollHandler, core); + this.popover = new PopoverManager(core, emitter); } init(): void { @@ -35,24 +39,41 @@ export default class WheelManager { }); this.listenForAmPmChanges(); + this.listenForHourChanges(); this.deferInitialSync(); } - scrollToValue(hour: string, minute: string, _type?: string): void { + scrollToValue(hour: string, minute: string, type?: string): void { this.scrollHandler.scrollToValue('hours', hour.padStart(2, '0')); this.scrollHandler.scrollToValue('minutes', minute.padStart(2, '0')); + if (type && this.isCompactWheelMode()) { + this.scrollHandler.scrollToValue('ampm', type.toUpperCase()); + } } updateDisabledItems(): void { this.renderer.updateDisabledItems(); } + attachPopover(): void { + this.popover.attach(); + } + + detachPopover(): void { + this.popover.detach(); + } + destroy(): void { + this.popover.destroy(); if (this.amPmHandler) { this.emitter.off('select:am', this.amPmHandler); this.emitter.off('select:pm', this.amPmHandler); this.amPmHandler = null; } + if (this.hourChangeHandler) { + this.emitter.off('select:hour', this.hourChangeHandler); + this.hourChangeHandler = null; + } this.eventHandler.destroy(); this.scrollHandler.destroy(); this.dragHandler.destroy(); @@ -80,6 +101,16 @@ export default class WheelManager { if (minutesInput?.value) { this.scrollHandler.scrollToValue('minutes', minutesInput.value.padStart(2, '0')); } + + if (this.isCompactWheelMode()) { + const am = this.core.getAM(); + const initialPeriod = am?.classList.contains('active') ? 'AM' : 'PM'; + this.scrollHandler.scrollToValue('ampm', initialPeriod); + } + } + + private isCompactWheelMode(): boolean { + return this.core.options.ui.mode === 'compact-wheel'; } private listenForAmPmChanges(): void { @@ -92,4 +123,15 @@ export default class WheelManager { this.emitter.on('select:am', this.amPmHandler); this.emitter.on('select:pm', this.amPmHandler); } + + private listenForHourChanges(): void { + const disabled = this.core.disabledTime; + if (!disabled?.value?.isInterval) return; + + this.hourChangeHandler = (): void => { + this.renderer.updateDisabledItems(); + }; + + this.emitter.on('select:hour', this.hourChangeHandler); + } } diff --git a/app/src/managers/plugins/wheel/WheelRenderer.ts b/app/src/managers/plugins/wheel/WheelRenderer.ts index 655b7ea..3581caa 100644 --- a/app/src/managers/plugins/wheel/WheelRenderer.ts +++ b/app/src/managers/plugins/wheel/WheelRenderer.ts @@ -1,6 +1,7 @@ import type { CoreState } from '../../../timepicker/CoreState'; import type { EventEmitter, TimepickerEventMap } from '../../../utils/EventEmitter'; import { isDocument } from '../../../utils/node'; +import { checkedDisabledValuesInterval } from '../../../utils/time/disable'; import type { WheelColumnType } from './WheelTypes'; const COLUMN_SELECTORS: Record<WheelColumnType, string> = { @@ -20,6 +21,9 @@ export class WheelRenderer { } init(): void { + this.cachedItems.clear(); + this.cachedItemHeight = null; + if (!isDocument()) return; const modal = this.core.getModalElement(); @@ -40,34 +44,119 @@ export class WheelRenderer { const disabled = this.core.disabledTime; if (!disabled?.value) return; + const shouldHide = this.core.options.clock.disabledTime?.hideOptions === true; + + if (disabled.value.isInterval && disabled.value.intervals) { + this.updateDisabledByInterval(disabled.value, shouldHide); + } else { + this.updateDisabledByFlatLists(disabled.value, shouldHide); + } + + if (shouldHide) { + this.invalidateItemCache(); + } + } + + private updateDisabledByFlatLists( + value: NonNullable<NonNullable<typeof this.core.disabledTime>['value']>, + shouldHide: boolean, + ): void { const hoursColumn = this.columns.get('hours'); const minutesColumn = this.columns.get('minutes'); - if (hoursColumn && disabled.value.hours) { - const disabledSet = new Set(disabled.value.hours.map(String)); + if (hoursColumn && value.hours) { + const disabledSet = new Set(value.hours.map(String)); + this.toggleDisabledOnItems(hoursColumn, disabledSet, shouldHide); + } + + if (minutesColumn && value.minutes) { + const disabledSet = new Set(value.minutes.map(String)); + this.toggleDisabledOnItems(minutesColumn, disabledSet, shouldHide); + } + } + + private updateDisabledByInterval( + value: NonNullable<NonNullable<typeof this.core.disabledTime>['value']>, + shouldHide: boolean, + ): void { + const clockType = (value.clockType as '12h' | '24h') ?? '12h'; + const intervals = value.intervals; + const amPm = this.getCurrentAmPm(); + const currentHour = this.getCurrentHour(); + + const hoursColumn = this.columns.get('hours'); + if (hoursColumn) { const items = hoursColumn.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); items.forEach((item) => { - const val = item.getAttribute('data-value'); - if (val !== null) { - const numVal = String(parseInt(val, 10)); - item.classList.toggle('is-disabled', disabledSet.has(numVal) || disabledSet.has(val)); + const hourVal = item.getAttribute('data-value'); + if (hourVal === null) return; + + const allMinutesDisabled = this.isHourFullyDisabled(hourVal, amPm, intervals, clockType); + item.classList.toggle('is-disabled', allMinutesDisabled); + if (shouldHide) { + item.classList.toggle('is-hidden', allMinutesDisabled); } }); } - if (minutesColumn && disabled.value.minutes) { - const disabledSet = new Set(disabled.value.minutes.map(String)); + const minutesColumn = this.columns.get('minutes'); + if (minutesColumn) { const items = minutesColumn.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); items.forEach((item) => { - const val = item.getAttribute('data-value'); - if (val !== null) { - const numVal = String(parseInt(val, 10)); - item.classList.toggle('is-disabled', disabledSet.has(numVal) || disabledSet.has(val)); + const minuteVal = item.getAttribute('data-value'); + if (minuteVal === null) return; + + const isValid = checkedDisabledValuesInterval(currentHour, minuteVal, amPm, intervals, clockType); + item.classList.toggle('is-disabled', !isValid); + if (shouldHide) { + item.classList.toggle('is-hidden', !isValid); } }); } } + private isHourFullyDisabled( + hour: string, + amPm: string, + intervals: string[] | undefined, + clockType: '12h' | '24h', + ): boolean { + if (!intervals) return false; + + for (let m = 0; m < 60; m++) { + const minuteStr = m.toString().padStart(2, '0'); + const isValid = checkedDisabledValuesInterval(hour, minuteStr, amPm, intervals, clockType); + if (isValid) return false; + } + return true; + } + + private toggleDisabledOnItems(column: HTMLDivElement, disabledSet: Set<string>, shouldHide: boolean): void { + const items = column.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + items.forEach((item) => { + const val = item.getAttribute('data-value'); + if (val !== null) { + const numVal = String(parseInt(val, 10)); + const isDisabled = disabledSet.has(numVal) || disabledSet.has(val); + item.classList.toggle('is-disabled', isDisabled); + if (shouldHide) { + item.classList.toggle('is-hidden', isDisabled); + } + } + }); + } + + private getCurrentAmPm(): string { + const am = this.core.getAM(); + if (am?.classList.contains('active')) return 'AM'; + return 'PM'; + } + + private getCurrentHour(): string { + const hourInput = this.core.getHour(); + return hourInput?.value?.padStart(2, '0') ?? '12'; + } + getColumnElement(type: WheelColumnType): HTMLDivElement | null { return this.columns.get(type) ?? null; } @@ -79,11 +168,19 @@ export class WheelRenderer { const col = this.columns.get(type); if (!col) return null; - const items = col.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + const shouldHide = this.core.options.clock.disabledTime?.hideOptions === true; + const selector = shouldHide ? '.tp-ui-wheel-item:not(.is-hidden)' : '.tp-ui-wheel-item'; + + const items = col.querySelectorAll<HTMLDivElement>(selector); this.cachedItems.set(type, items); return items; } + invalidateItemCache(): void { + this.cachedItems.clear(); + this.cachedItemHeight = null; + } + getItemCount(type: WheelColumnType): number { const items = this.getItems(type); return items ? items.length : 0; @@ -95,7 +192,7 @@ export class WheelRenderer { const hoursCol = this.columns.get('hours'); if (!hoursCol) return 0; - const firstItem = hoursCol.querySelector<HTMLDivElement>('.tp-ui-wheel-item'); + const firstItem = hoursCol.querySelector<HTMLDivElement>('.tp-ui-wheel-item:not(.is-hidden)'); if (!firstItem) return 0; const height = firstItem.getBoundingClientRect().height; diff --git a/app/src/managers/plugins/wheel/WheelScrollHandler.ts b/app/src/managers/plugins/wheel/WheelScrollHandler.ts index 105ae49..a111e3d 100644 --- a/app/src/managers/plugins/wheel/WheelScrollHandler.ts +++ b/app/src/managers/plugins/wheel/WheelScrollHandler.ts @@ -81,7 +81,15 @@ export class WheelScrollHandler { getCurrentSelection(): WheelSelectionState { const hour = this.getSelectedValue('hours') ?? '12'; const minute = this.getSelectedValue('minutes') ?? '00'; - const ampm = this.core.options.clock.type !== '24h' ? this.getSelectedValue('ampm') : null; + let ampm: string | null = null; + + if (this.core.options.clock.type !== '24h') { + ampm = this.getSelectedValue('ampm'); + if (ampm === null) { + const am = this.core.getAM(); + ampm = am?.classList.contains('active') ? 'AM' : 'PM'; + } + } return { hour, minute, ampm }; } @@ -129,12 +137,22 @@ export class WheelScrollHandler { items.forEach((item, i) => { const distance = Math.abs(i - centerIndex); - item.classList.toggle('is-center', distance === 0); + const isCenter = distance === 0; + item.classList.toggle('is-center', isCenter); item.classList.toggle('is-near', distance === 1); + item.setAttribute('aria-selected', String(isCenter)); }); const col = this.renderer.getColumnElement(columnType); if (col) { + const centerItem = items[centerIndex]; + if (centerItem) { + const itemId = centerItem.getAttribute('id'); + if (itemId) { + col.setAttribute('aria-activedescendant', itemId); + } + } + const wrapper = col.parentElement; if (wrapper) { wrapper.classList.toggle('at-start', centerIndex <= 0); @@ -177,6 +195,9 @@ export class WheelScrollHandler { const nextValue = items[nextIndex].getAttribute('data-value'); if (nextValue !== null) { this.scrollToValue(columnType, nextValue); + if (this.onScrollEnd) { + this.onScrollEnd(columnType, nextValue); + } return; } } @@ -185,6 +206,9 @@ export class WheelScrollHandler { const prevValue = items[prevIndex].getAttribute('data-value'); if (prevValue !== null) { this.scrollToValue(columnType, prevValue); + if (this.onScrollEnd) { + this.onScrollEnd(columnType, prevValue); + } return; } } diff --git a/app/src/managers/plugins/wheel/index.ts b/app/src/managers/plugins/wheel/index.ts index 7f52ce1..b6b04c2 100644 --- a/app/src/managers/plugins/wheel/index.ts +++ b/app/src/managers/plugins/wheel/index.ts @@ -1,4 +1,5 @@ export { default as WheelManager } from './WheelManager'; +export { default as PopoverManager } from './PopoverManager'; export { WheelRenderer } from './WheelRenderer'; export { WheelScrollHandler } from './WheelScrollHandler'; export { WheelEventHandler } from './WheelEventHandler'; diff --git a/app/src/styles/partials/_buttons.scss b/app/src/styles/partials/_buttons.scss index 0a79cfd..39dd7d8 100644 --- a/app/src/styles/partials/_buttons.scss +++ b/app/src/styles/partials/_buttons.scss @@ -17,7 +17,7 @@ &-ok.btn-mobile { position: relative; color: var(--tp-primary); - border-radius: 20px; + border-radius: var(--tp-btn-radius); background-color: transparent; text-align: center; font-size: 14px; diff --git a/app/src/styles/partials/_clock.scss b/app/src/styles/partials/_clock.scss index 339871b..873131e 100644 --- a/app/src/styles/partials/_clock.scss +++ b/app/src/styles/partials/_clock.scss @@ -173,4 +173,8 @@ color: var(--tp-text-disabled); pointer-events: none; } + + &-tips-hidden { + display: none; + } } diff --git a/app/src/styles/partials/_wheel.scss b/app/src/styles/partials/_wheel.scss index a7783d0..f883d12 100644 --- a/app/src/styles/partials/_wheel.scss +++ b/app/src/styles/partials/_wheel.scss @@ -1,5 +1,3 @@ -/* Wheel picker styles — native-feeling scroll-spinner columns */ - .tp-ui-wheel-container { position: relative; display: flex; @@ -64,6 +62,10 @@ pointer-events: none; } +.tp-ui-wheel-item.is-hidden { + display: none; +} + .tp-ui-wheel-padding { height: var(--tp-wheel-item-height); pointer-events: none; @@ -103,7 +105,7 @@ height: var(--tp-wheel-item-height); pointer-events: none; z-index: 2; - opacity: 0.6; + opacity: var(--tp-wheel-fade-opacity, 0.6); transition: opacity var(--tp-duration-fast, 150ms) var(--tp-easing-standard, ease-out); } @@ -127,14 +129,54 @@ .tp-ui-wheel-mode .tp-ui-mobile-clock-wrapper { min-height: auto; +} + +.tp-ui-compact-wheel-mode .tp-ui-mobile-clock-wrapper { + min-height: auto; +} + +.tp-ui-compact-wheel-mode .tp-ui-wrapper { + padding-top: var(--tp-spacing-md); +} + +@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + .tp-ui-wheel-mode .tp-ui-wheel-container { + padding: var(--tp-spacing-sm) 0; + } + + .tp-ui-wheel-mode .tp-ui-mobile-clock-wrapper.expanded { + justify-content: center; + padding-bottom: var(--tp-wheel-landscape-footer-offset); + } - &.expanded { - @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { - justify-content: center; - } + .tp-ui-compact-wheel-mode .tp-ui-wrapper.expanded { + flex-direction: column; + width: var(--tp-wheel-landscape-compact-width); + } + + .tp-ui-compact-wheel-mode .tp-ui-mobile-clock-wrapper.expanded { + justify-content: center; + } + + .tp-ui-compact-wheel-mode .tp-ui-wheel-container { + padding: var(--tp-spacing-xs) 0; + min-height: calc(var(--tp-wheel-item-height) * var(--tp-wheel-landscape-compact-visible-items)); + } + + .tp-ui-compact-wheel-mode .tp-ui-wheel-column-wrapper { + height: calc(var(--tp-wheel-item-height) * var(--tp-wheel-landscape-compact-visible-items)); } } +.tp-ui-wheel-ampm { + width: var(--tp-wheel-ampm-column-width, 64px); +} + +.tp-ui-wheel-column-wrapper:has(.tp-ui-wheel-ampm) { + width: var(--tp-wheel-ampm-column-width, 64px); + margin-left: var(--tp-spacing-xs); +} + @media (prefers-reduced-motion: reduce) { .tp-ui-wheel-item { transition: none; @@ -150,3 +192,28 @@ color: Highlight; } } + +.tp-ui-modal.tp-ui-popover { + top: auto; + bottom: auto; + left: auto; + right: auto; + width: auto; + max-width: var(--tp-popover-max-width); + height: auto; + background-color: transparent; + backdrop-filter: none; + pointer-events: auto; + z-index: 5001; +} + +.tp-ui-modal.tp-ui-popover .tp-ui-wrapper { + position: static; + top: auto; + left: auto; + transform: none; + width: auto; + box-shadow: var(--tp-popover-shadow); + border: 1px solid var(--tp-outline-variant, rgba(0, 0, 0, 0.12)); + border-radius: var(--tp-popover-radius); +} diff --git a/app/src/styles/themes/theme-crane-straight.scss b/app/src/styles/themes/theme-crane-straight.scss index 7f77cce..feffedd 100644 --- a/app/src/styles/themes/theme-crane-straight.scss +++ b/app/src/styles/themes/theme-crane-straight.scss @@ -28,6 +28,11 @@ --tp-border: transparent; --tp-outline: #ff4c52; --tp-radius: 0; + --tp-border-radius: 0; + --tp-radius-sm: 0; + --tp-radius-md: 0; + --tp-radius-lg: 0; + --tp-btn-radius: 0; --tp-dropdown-option-bg: #ffffff; --tp-dropdown-option-text: #000000; diff --git a/app/src/styles/themes/theme-glassmorphic.scss b/app/src/styles/themes/theme-glassmorphic.scss index fe645d7..a3009c3 100644 --- a/app/src/styles/themes/theme-glassmorphic.scss +++ b/app/src/styles/themes/theme-glassmorphic.scss @@ -37,4 +37,5 @@ --tp-wheel-highlight-border: rgba(255, 255, 255, 0.2); --tp-wheel-text-color: rgba(255, 255, 255, 0.95); --tp-wheel-selected-color: rgba(255, 255, 255, 0.95); + --tp-wheel-fade-opacity: 0; } diff --git a/app/src/styles/themes/theme-m2.scss b/app/src/styles/themes/theme-m2.scss index 405b6f1..c03a7da 100644 --- a/app/src/styles/themes/theme-m2.scss +++ b/app/src/styles/themes/theme-m2.scss @@ -34,6 +34,7 @@ --tp-border-radius: 4px; --tp-radius-md: 2px; --tp-radius-sm: 4px; + --tp-btn-radius: 4px; --tp-dropdown-option-bg: #ffffff; --tp-dropdown-option-text: #000000; @@ -42,4 +43,5 @@ --tp-wheel-highlight-border: #d6d6d6; --tp-wheel-text-color: #000000; --tp-wheel-selected-color: #6200ee; + --tp-wheel-highlight-radius: 2px; } diff --git a/app/src/styles/variables.scss b/app/src/styles/variables.scss index 0d720a4..e72b333 100644 --- a/app/src/styles/variables.scss +++ b/app/src/styles/variables.scss @@ -72,6 +72,7 @@ --tp-radius-lg: 20px; --tp-radius-circle: 50%; --tp-radius-full: 100%; + --tp-btn-radius: var(--tp-radius-lg); --tp-size-clock: 256px; --tp-size-wrapper: 328px; @@ -139,6 +140,9 @@ --tp-wheel-visible-items: 5; --tp-wheel-column-width: 76px; --tp-wheel-separator-width: 20px; + --tp-wheel-landscape-footer-offset: 72px; + --tp-wheel-landscape-compact-width: 360px; + --tp-wheel-landscape-compact-visible-items: 3; --tp-wheel-highlight-bg: var(--tp-primary-container, rgba(103, 80, 164, 0.08)); --tp-wheel-highlight-border: var(--tp-outline-variant, rgba(0, 0, 0, 0.12)); --tp-wheel-highlight-radius: var(--tp-radius-md); @@ -147,6 +151,12 @@ --tp-wheel-disabled-opacity: var(--tp-opacity-disabled, 0.38); --tp-wheel-font-size: var(--tp-font-size-lg, 16px); --tp-wheel-selected-font-size: 22px; + + --tp-popover-gap: 4px; + --tp-popover-min-width: 260px; + --tp-popover-max-width: 328px; + --tp-popover-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); + --tp-popover-radius: var(--tp-border-radius); } $red-invalid: #d50000; diff --git a/app/src/timepicker/Lifecycle.ts b/app/src/timepicker/Lifecycle.ts index a3c63b4..55c8de7 100644 --- a/app/src/timepicker/Lifecycle.ts +++ b/app/src/timepicker/Lifecycle.ts @@ -7,6 +7,7 @@ import { debounce } from '../utils/debounce'; import { allEvents } from '../utils/variables'; import { isDocument, isNode } from '../utils/node'; import { TIMINGS } from '../constants/timings'; +import type WheelManager from '../managers/plugins/wheel/WheelManager'; type TypeFunction = () => void; @@ -111,14 +112,16 @@ export class Lifecycle { unmount(callback?: TypeFunction): void { const debouncedUnmount = debounce((...args: unknown[]): void => { - if (args.length > 2 || !this.core.getModalElement()) return; + if (args.length > 2) return; const [update] = args.filter((e) => typeof e === 'boolean') as boolean[]; const [cb] = args.filter((e) => typeof e === 'function') as TypeFunction[]; this.core.setIsMobileView(!!this.core.options.ui.mobile); - if (update) { + const modal = this.core.getModalElement(); + + if (update && modal) { const okButton = this.core.getOkButton(); okButton?.click(); } @@ -127,7 +130,14 @@ export class Lifecycle { this.removeEventListeners(); - this.managers.animation.removeAnimationToClose(); + if (this.isPopoverMode()) { + const wheel = this.managers.getPlugin<WheelManager>('wheel'); + wheel?.detachPopover(); + } + + if (modal) { + this.managers.animation.removeAnimationToClose(); + } const openElements = this.core.getOpenElement(); openElements.forEach((openEl) => openEl?.classList.remove('disabled')); @@ -145,10 +155,10 @@ export class Lifecycle { input?.focus(); } - const modal = this.core.getModalElement(); - if (modal === null) return; - - modal.remove(); + const currentModal = this.core.getModalElement(); + if (currentModal) { + currentModal.remove(); + } this.core.setIsModalRemove(true); }, TIMINGS.MODAL_REMOVE); @@ -229,21 +239,56 @@ export class Lifecycle { if (this.core.isDestroyed) return; if (!this.core.isModalRemove) return; + this.setupValidation(); + this.disableOpenElements(); + this.setupModal(); + this.applyExpandedState(); + + this.managers.modal.setFlexEndToFooterIfNoKeyboardIcon(); + this.applyThemeDeferred(); + this.managers.animation.setAnimationToOpen(); + this.managers.config.getInputValueOnOpenAndSet(); + + const isWheelMode = this.resolveWheelMode(); + this.emitMissingPluginErrors(); + this.initClockOrWheel(isWheelMode); + this.initOptionalPlugins(isWheelMode); + this.bindEventHandlers(isWheelMode); + this.finalizeModal(isWheelMode); + + if (this.isPopoverMode()) { + const wheel = this.managers.getPlugin<WheelManager>('wheel'); + wheel?.attachPopover(); + } + + this.managers.modal.setShowClassToBackdrop(); + } + + private setupValidation(): void { this.managers.validation.setErrorHandler(); this.managers.validation.removeErrorHandler(); + } + private disableOpenElements(): void { if (!this.core.options.ui.inline?.enabled) { const openElements = this.core.getOpenElement(); - const input = this.core.getInput(); openElements.forEach((openEl) => openEl?.classList.add('disabled')); - input?.blur(); + + if (!this.isPopoverMode()) { + const input = this.core.getInput(); + input?.blur(); + } } + } + private setupModal(): void { this.managers.modal.setScrollbarOrNot(); this.managers.modal.setModalTemplate(); this.managers.modal.setNormalizeClass(); this.managers.modal.removeBackdrop(); + } + private applyExpandedState(): void { if (!this.core.isMobileView) { const modal = this.core.getModalElement(); const clockWrapper = modal?.querySelector('.tp-ui-mobile-clock-wrapper'); @@ -264,9 +309,9 @@ export class Lifecycle { } else { this.managers.config.updateClockFaceAccessibility(true); } + } - this.managers.modal.setFlexEndToFooterIfNoKeyboardIcon(); - + private applyThemeDeferred(): void { setTimeout(() => { this.managers.theme.setTheme(); @@ -277,13 +322,24 @@ export class Lifecycle { } } }, 0); + } - this.managers.animation.setAnimationToOpen(); - this.managers.config.getInputValueOnOpenAndSet(); + private isCompactWheelMode(): boolean { + return this.core.options.ui.mode === 'compact-wheel'; + } - const isWheelMode = this.core.options.ui.mode === 'wheel' && PluginRegistry.has('wheel'); + private isPopoverMode(): boolean { + return this.isCompactWheelMode() && !!this.core.options.ui.wheel?.placement; + } - if (this.core.options.ui.mode === 'wheel' && !PluginRegistry.has('wheel')) { + private resolveWheelMode(): boolean { + const mode = this.core.options.ui.mode; + return (mode === 'wheel' || mode === 'compact-wheel') && PluginRegistry.has('wheel'); + } + + private emitMissingPluginErrors(): void { + const mode = this.core.options.ui.mode; + if ((mode === 'wheel' || mode === 'compact-wheel') && !PluginRegistry.has('wheel')) { this.emitter.emit('error', { error: 'WheelPlugin is not registered. Import and register it: PluginRegistry.register(WheelPlugin)', }); @@ -301,7 +357,9 @@ export class Lifecycle { 'TimezonePlugin is not registered. Import and register it: PluginRegistry.register(TimezonePlugin)', }); } + } + private initClockOrWheel(isWheelMode: boolean): void { if (isWheelMode) { const wheel = this.managers.getPlugin('wheel'); if (wheel) { @@ -312,7 +370,9 @@ export class Lifecycle { this.managers.clock.setOnStartCSSClassesIfClockType24h(); this.managers.clock.setClassActiveToHourOnOpen(); } + } + private initOptionalPlugins(isWheelMode: boolean): void { const timezone = this.managers.getPlugin('timezone'); if (timezone) { timezone.init(); @@ -322,7 +382,9 @@ export class Lifecycle { if (range && !isWheelMode) { range.init(); } + } + private bindEventHandlers(isWheelMode: boolean): void { this.managers.events.handleCancelButton(); this.managers.events.handleOkButton(); this.managers.clearButton.init(); @@ -338,7 +400,7 @@ export class Lifecycle { this.managers.events.handleSwitchViewButton(); } - if (this.core.options.clock.type !== '24h') { + if (this.core.options.clock.type !== '24h' && !this.isCompactWheelMode()) { this.managers.events.handleAmClick(); this.managers.events.handlePmClick(); } @@ -349,9 +411,14 @@ export class Lifecycle { if (!this.core.options.ui.inline?.enabled) { this.managers.events.handleEscClick(); - this.managers.events.handleBackdropClick(); + + if (!this.isPopoverMode()) { + this.managers.events.handleBackdropClick(); + } } + } + private finalizeModal(isWheelMode: boolean): void { const modal = this.core.getModalElement(); if (modal) { initMd3Ripple(modal); @@ -367,8 +434,6 @@ export class Lifecycle { }); } } - - this.managers.modal.setShowClassToBackdrop(); } private removeEventListeners(): void { diff --git a/app/src/timepicker/TimepickerUI.ts b/app/src/timepicker/TimepickerUI.ts index ffd8e75..19e0f50 100644 --- a/app/src/timepicker/TimepickerUI.ts +++ b/app/src/timepicker/TimepickerUI.ts @@ -99,7 +99,9 @@ export default class TimepickerUI { const type = data.type ? ` ${data.type}` : ''; input.value = `${data.hour}:${data.minutes}${type}`; } - this.lifecycle.unmount(); + if (!data.autoCommit) { + this.lifecycle.unmount(); + } } }); @@ -260,54 +262,11 @@ export default class TimepickerUI { } const trimmedTime = sanitizeTimeInput(time.trim()); - let hourValue = '12'; - let minutesValue = '00'; - let typeValue = 'AM'; try { - if (this.core.options.clock.type === '24h') { - const timeMatch = trimmedTime.match(/^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/); - if (!timeMatch) { - throw new Error('Invalid 24h format. Expected HH:MM'); - } - hourValue = timeMatch[1].padStart(2, '0'); - minutesValue = timeMatch[2]; - } else { - const timeMatch = trimmedTime.match(/^(1[0-2]|[1-9]):([0-5][0-9])\s*(AM|PM)$/i); - if (!timeMatch) { - throw new Error('Invalid 12h format. Expected HH:MM AM/PM'); - } - hourValue = timeMatch[1]; - minutesValue = timeMatch[2]; - typeValue = timeMatch[3].toUpperCase(); - } - - const hour = this.core.getHour(); - const minutes = this.core.getMinutes(); - const AM = this.core.getAM(); - const PM = this.core.getPM(); - - if (hour) { - hour.value = hourValue; - hour.setAttribute('aria-valuenow', hourValue); - this.core.setDegreesHours(Number(hourValue) * 30); - } - - if (minutes) { - minutes.value = minutesValue; - minutes.setAttribute('aria-valuenow', minutesValue); - this.core.setDegreesMinutes(Number(minutesValue) * 6); - } - - if (this.core.options.clock.type !== '24h' && AM && PM) { - if (typeValue === 'AM') { - AM.classList.add('active'); - PM.classList.remove('active'); - } else { - PM.classList.add('active'); - AM.classList.remove('active'); - } - } + const parsed = this.parseTimeString(trimmedTime); + this.applyParsedTime(parsed); + this.syncPeriodIndicator(parsed.typeValue); if (updateInput) { const input = this.core.getInput(); @@ -316,22 +275,80 @@ export default class TimepickerUI { } } - if (this.core.options.ui.mode === 'wheel') { - const wheel = this.managers.getPlugin<WheelManager>('wheel'); - if (wheel) { - wheel.scrollToValue(hourValue, minutesValue, typeValue); - } - } else { - const clockHand = this.core.getClockHand(); - if (clockHand) { - clockHand.style.transform = `rotateZ(${this.core.degreesHours || 0}deg)`; - } - } + this.syncClockVisual(parsed); } catch (error) { return; } } + private parseTimeString(trimmedTime: string): { + hourValue: string; + minutesValue: string; + typeValue: string; + } { + if (this.core.options.clock.type === '24h') { + const timeMatch = trimmedTime.match(/^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/); + if (!timeMatch) { + throw new Error('Invalid 24h format. Expected HH:MM'); + } + return { hourValue: timeMatch[1].padStart(2, '0'), minutesValue: timeMatch[2], typeValue: 'AM' }; + } + + const timeMatch = trimmedTime.match(/^(1[0-2]|[1-9]):([0-5][0-9])\s*(AM|PM)$/i); + if (!timeMatch) { + throw new Error('Invalid 12h format. Expected HH:MM AM/PM'); + } + return { hourValue: timeMatch[1], minutesValue: timeMatch[2], typeValue: timeMatch[3].toUpperCase() }; + } + + private applyParsedTime(parsed: { hourValue: string; minutesValue: string }): void { + const hour = this.core.getHour(); + const minutes = this.core.getMinutes(); + + if (hour) { + hour.value = parsed.hourValue; + hour.setAttribute('aria-valuenow', parsed.hourValue); + this.core.setDegreesHours(Number(parsed.hourValue) * 30); + } + + if (minutes) { + minutes.value = parsed.minutesValue; + minutes.setAttribute('aria-valuenow', parsed.minutesValue); + this.core.setDegreesMinutes(Number(parsed.minutesValue) * 6); + } + } + + private syncPeriodIndicator(typeValue: string): void { + if (this.core.options.clock.type === '24h') return; + + const AM = this.core.getAM(); + const PM = this.core.getPM(); + if (!AM || !PM) return; + + if (typeValue === 'AM') { + AM.classList.add('active'); + PM.classList.remove('active'); + } else { + PM.classList.add('active'); + AM.classList.remove('active'); + } + } + + private syncClockVisual(parsed: { hourValue: string; minutesValue: string; typeValue: string }): void { + const mode = this.core.options.ui.mode; + if (mode === 'wheel' || mode === 'compact-wheel') { + const wheel = this.managers.getPlugin<WheelManager>('wheel'); + if (wheel) { + wheel.scrollToValue(parsed.hourValue, parsed.minutesValue, parsed.typeValue); + } + } else { + const clockHand = this.core.getClockHand(); + if (clockHand) { + clockHand.style.transform = `rotateZ(${this.core.degreesHours || 0}deg)`; + } + } + } + /** * Get the root element of the timepicker instance. * @returns - The HTMLElement that serves as the root of the timepicker instance. diff --git a/app/src/types/options.d.ts b/app/src/types/options.d.ts index 50de4a1..1bc3fe2 100644 --- a/app/src/types/options.d.ts +++ b/app/src/types/options.d.ts @@ -71,6 +71,13 @@ export interface ClockOptions { minutes?: Array<string | number>; hours?: Array<string | number>; interval?: string | string[]; + /** + * @description When true, disabled hours/minutes are completely removed from the list + * instead of being dimmed. Useful when many values are disabled (e.g., business hours only). + * Works in all modes: clock, wheel, compact-wheel. + * @default false + */ + hideOptions?: boolean; }; /** @@ -99,10 +106,10 @@ export interface ClockOptions { */ export interface UIOptions { /** - * @description Picker mode: analog clock face or scroll wheel spinner + * @description Picker mode: analog clock face, scroll wheel spinner, or compact wheel (no header) * @default "clock" */ - mode?: 'clock' | 'wheel'; + mode?: 'clock' | 'wheel' | 'compact-wheel'; /** * @description Theme for the timepicker @@ -202,6 +209,41 @@ export interface UIOptions { showButtons?: boolean; autoUpdate?: boolean; }; + + /** + * @description Wheel / compact-wheel mode configuration + * @example + * wheel: { + * placement: 'auto', + * hideFooter: true, + * commitOnScroll: true + * } + */ + wheel?: { + /** + * @description Popover placement relative to input in compact-wheel mode. + * 'auto' opens below if space allows, otherwise above. + * When undefined, compact-wheel behaves as a normal centered modal with backdrop. + * @default undefined + */ + placement?: 'auto' | 'top' | 'bottom'; + + /** + * @description When true, the footer (OK/Cancel/Clear buttons + switch icon) + * is not rendered in the DOM at all. Only works in compact-wheel mode. + * Useful when commitOnScroll is enabled and buttons are unnecessary. + * @default false + */ + hideFooter?: boolean; + + /** + * @description When enabled, the timepicker automatically commits the selected time + * at the end of wheel scrolling, updating the input value and emitting a change event + * without requiring the user to press OK. Only applies to wheel and compact-wheel modes. + * @default false + */ + commitOnScroll?: boolean; + }; } /** diff --git a/app/src/types/types.d.ts b/app/src/types/types.d.ts index 62822b2..47fea81 100644 --- a/app/src/types/types.d.ts +++ b/app/src/types/types.d.ts @@ -15,6 +15,8 @@ export type ConfirmEventData = { hour?: string; minutes?: string; type?: string; + /** When true, this confirm was triggered by commitOnScroll (auto-commit) */ + autoCommit?: boolean; }; /** Payload when user clears time */ @@ -119,8 +121,8 @@ export type ErrorEventData = { export type TimepickerEventCallback<T = unknown> = (eventData: T) => void; export type OptionTypes = { - /** Picker mode: clock or wheel @default "clock" */ - mode?: 'clock' | 'wheel'; + /** Picker mode: clock, wheel, or compact-wheel @default "clock" */ + mode?: 'clock' | 'wheel' | 'compact-wheel'; /** AM label text @default "AM" */ amLabel?: string; /** Enable animations @default true */ diff --git a/app/src/utils/options/defaults.ts b/app/src/utils/options/defaults.ts index fbda70f..fd99967 100644 --- a/app/src/utils/options/defaults.ts +++ b/app/src/utils/options/defaults.ts @@ -25,6 +25,7 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { iconTemplateMobile: '', inline: undefined, clearButton: true, + wheel: undefined, }, labels: { @@ -84,38 +85,50 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { }; export function mergeOptions(userOptions: TimepickerOptions = {}): Required<TimepickerOptions> { - return { + const merged: Required<TimepickerOptions> = { clock: { ...DEFAULT_OPTIONS.clock, - ...(userOptions.clock || {}), + ...userOptions.clock, }, ui: { ...DEFAULT_OPTIONS.ui, - ...(userOptions.ui || {}), + ...userOptions.ui, }, labels: { ...DEFAULT_OPTIONS.labels, - ...(userOptions.labels || {}), + ...userOptions.labels, }, behavior: { ...DEFAULT_OPTIONS.behavior, - ...(userOptions.behavior || {}), + ...userOptions.behavior, }, callbacks: { ...DEFAULT_OPTIONS.callbacks, - ...(userOptions.callbacks || {}), + ...userOptions.callbacks, }, timezone: { ...DEFAULT_OPTIONS.timezone, - ...(userOptions.timezone || {}), + ...userOptions.timezone, }, range: { ...DEFAULT_OPTIONS.range, - ...(userOptions.range || {}), + ...userOptions.range, }, clearBehavior: { ...DEFAULT_OPTIONS.clearBehavior, - ...(userOptions.clearBehavior || {}), + ...userOptions.clearBehavior, }, }; + + const mergedMode = merged.ui.mode; + if (mergedMode === 'wheel' || mergedMode === 'compact-wheel') { + merged.ui.wheel = { + placement: mergedMode === 'compact-wheel' ? 'auto' : undefined, + hideFooter: undefined, + commitOnScroll: undefined, + ...merged.ui.wheel, + }; + } + + return merged; } diff --git a/app/src/utils/template/index.ts b/app/src/utils/template/index.ts index e299cb9..a8c4f40 100644 --- a/app/src/utils/template/index.ts +++ b/app/src/utils/template/index.ts @@ -8,71 +8,137 @@ export const HOURS_24 = ['00', '13', '14', '15', '16', '17', '18', '19', '20', ' export const HOURS_12 = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']; export const MINUTES_STEP_5 = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']; -export const getModalTemplate = (options: Required<TimepickerOptions>, instanceId: string): string => { +interface TemplateConfig { + mobileClass: string; + clockType: string; + instanceId: string; + isWheelMode: boolean; + isCompactWheel: boolean; + isRangeMode: boolean; +} + +const buildTimezoneSelector = ( + options: Required<TimepickerOptions>, + mobileClass: string, + instanceId: string, +): string => { + const { + timezone: { enabled: tzEnabled, label: tzLabel }, + } = options; + + if (!tzEnabled || !PluginRegistry.has('timezone')) return ''; + + return `<div class="tp-ui-timezone ${mobileClass}"> + <span class="tp-ui-timezone-label" id="tp-tz-label-${instanceId}">${tzLabel}</span> + <div class="tp-ui-timezone-dropdown" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="tp-tz-label-${instanceId}" tabindex="0" data-tz-id="${instanceId}"> + <div class="tp-ui-timezone-selected" data-placeholder="${tzLabel}...">${tzLabel}...</div> + <svg class="tp-ui-timezone-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> + <div class="tp-ui-timezone-menu" role="listbox" aria-labelledby="tp-tz-label-${instanceId}"></div> + </div> + </div>`; +}; + +const buildRangeSelector = (options: Required<TimepickerOptions>): string => { + const { + range: { enabled: rangeEnabled, fromLabel, toLabel }, + } = options; + + if (!rangeEnabled || !PluginRegistry.has('range')) return ''; + + return `<div class="tp-ui-range-header" role="tablist" aria-label="Range selection"><button type="button" class="tp-ui-range-tab tp-ui-range-from active" role="tab" tabindex="0" aria-selected="true"><span class="tp-ui-range-tab-label">${fromLabel}</span><span class="tp-ui-range-tab-value tp-ui-range-from-time">--:--</span></button><button type="button" class="tp-ui-range-tab tp-ui-range-to" role="tab" tabindex="-1" aria-selected="false"><span class="tp-ui-range-tab-label">${toLabel}</span><span class="tp-ui-range-tab-value tp-ui-range-to-time">--:--</span></button></div>`; +}; + +const buildClearButton = (options: Required<TimepickerOptions>, mobileClass: string): string => { + const { + ui: { clearButton: clearButtonEnabled }, + labels: { clear: clearLabel }, + } = options; + + if (!clearButtonEnabled) return ''; + + return `<div class="tp-ui-clear-btn ${mobileClass} disabled" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${clearLabel}" aria-disabled="true">${clearLabel}</div>`; +}; + +const buildPickerBody = (config: TemplateConfig, incrementMinutes: number): string => { + if (config.isWheelMode) { + const includeAmPmColumn = config.isCompactWheel && config.clockType === '12h'; + return `<div class="tp-ui-mobile-clock-wrapper ${config.mobileClass}">${getWheelTemplate(config.clockType as '12h' | '24h', incrementMinutes, includeAmPmColumn, config.instanceId)}</div>`; + } + + return `<div class="tp-ui-mobile-clock-wrapper ${config.mobileClass}"><div class="tp-ui-body ${config.mobileClass}"><div class="tp-ui-clock-face ${config.mobileClass}" role="group" aria-label="Clock"><div class="tp-ui-dot ${config.mobileClass}" aria-hidden="true"></div><div class="tp-ui-clock-hand ${config.mobileClass}" aria-hidden="true"><div class="tp-ui-circle-hand ${config.mobileClass}"></div></div><div class="tp-ui-tips-wrapper ${config.mobileClass}" role="listbox" aria-label="Time"></div>${config.clockType === '24h' ? `<div class="tp-ui-tips-wrapper-24h ${config.mobileClass}" role="listbox" aria-label="24h"></div>` : ''}</div></div></div>`; +}; + +const buildHeader = (options: Required<TimepickerOptions>, config: TemplateConfig): string => { const { - ui: { - mode: pickerMode, - iconTemplate, - enableSwitchIcon, - animation, - theme, - mobile, - editable, - iconTemplateMobile, - clearButton: clearButtonEnabled, - }, labels: { time: timeLabel, mobileTime: mobileTimeLabel, am: amLabel, pm: pmLabel, - cancel: cancelLabel, - ok: okLabel, mobileMinute: minuteMobileLabel, mobileHour: hourMobileLabel, - clear: clearLabel, }, - clock: { type: clockType, incrementMinutes }, - timezone: { enabled: tzEnabled, label: tzLabel }, - range: { enabled: rangeEnabled, fromLabel, toLabel }, + ui: { editable }, + } = options; + const { mobileClass, clockType, instanceId } = config; + const label = mobileClass ? mobileTimeLabel : timeLabel; + + const periodSelector = + clockType !== '24h' + ? `<div class="tp-ui-wrapper-type-time ${mobileClass}" role="group" aria-label="Period"><div class="tp-ui-type-mode tp-ui-am ${mobileClass ? 'mobile' : 'tp-ui-ripple'}" data-md3-ripple tabindex="0" role="button" aria-label="${amLabel}" aria-pressed="false" data-type="AM">${amLabel}</div><div class="tp-ui-type-mode tp-ui-pm ${mobileClass ? 'mobile' : 'tp-ui-ripple'}" data-md3-ripple tabindex="0" role="button" aria-label="${pmLabel}" aria-pressed="false" data-type="PM">${pmLabel}</div></div>` + : ''; + + return `<div class="tp-ui-select-time ${mobileClass}" id="tp-ui-label-${instanceId}">${label}</div><div class="tp-ui-header ${mobileClass}"><div class="tp-ui-wrapper-time ${mobileClass} ${clockType === '24h' ? 'tp-ui-wrapper-time-24h' : ''}" role="group" aria-label="${label}"><div class="tp-ui-input-wrapper ${mobileClass}"><div class="tp-ui-input-ripple-wrapper ${mobileClass}" data-md3-ripple><input name="hour" ${!editable && !mobileClass ? 'readonly' : ''} class="tp-ui-hour ${mobileClass}" tabindex="0" type="number" min="0" max="${clockType === '12h' ? '12' : '23'}" aria-label="${mobileClass ? hourMobileLabel : 'Hour'}" role="spinbutton" aria-valuenow="12"></div><div class="tp-ui-hour-text ${mobileClass}">${hourMobileLabel}</div></div><div class="tp-ui-dots ${mobileClass}" aria-hidden="true"><span></span><span></span></div><div class="tp-ui-input-wrapper ${mobileClass}"><div class="tp-ui-input-ripple-wrapper ${mobileClass}" data-md3-ripple><input name="minutes" ${!editable && !mobileClass ? 'readonly' : ''} class="tp-ui-minutes ${mobileClass}" tabindex="0" type="number" min="0" max="59" aria-label="${mobileClass ? minuteMobileLabel : 'Minute'}" role="spinbutton" aria-valuenow="0"></div><div class="tp-ui-minute-text ${mobileClass}">${minuteMobileLabel}</div></div></div>${periodSelector}</div>`; +}; + +const buildFooter = (options: Required<TimepickerOptions>, mobileClass: string): string => { + const { + ui: { enableSwitchIcon, iconTemplate, iconTemplateMobile }, + labels: { cancel: cancelLabel, ok: okLabel }, } = options; - const mobileClass = !!mobile ? 'mobile' : ''; const keyboardIcon = `<button aria-label="Keyboard" type="button" class="tp-ui-keyboard-icon">${iconTemplate || keyboardSvg}</button>`; const clockIcon = iconTemplateMobile || `<button aria-label="Clock" type="button" class="tp-ui-keyboard-icon">${iconTemplateMobile || scheduleSvg}</button>`; - const timezoneSelector = - tzEnabled && PluginRegistry.has('timezone') - ? `<div class="tp-ui-timezone ${mobileClass}"> - <span class="tp-ui-timezone-label" id="tp-tz-label-${instanceId}">${tzLabel}</span> - <div class="tp-ui-timezone-dropdown" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="tp-tz-label-${instanceId}" tabindex="0" data-tz-id="${instanceId}"> - <div class="tp-ui-timezone-selected" data-placeholder="${tzLabel}...">${tzLabel}...</div> - <svg class="tp-ui-timezone-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> - <div class="tp-ui-timezone-menu" role="listbox" aria-labelledby="tp-tz-label-${instanceId}"></div> - </div> - </div>` - : ''; + const switchIcon = enableSwitchIcon + ? `<div class="tp-ui-keyboard-icon-wrapper ${mobileClass}" tabindex="0" role="button" aria-pressed="false" aria-label="Toggle" data-view="desktop">${mobileClass ? clockIcon : keyboardIcon}</div>` + : ''; - const rangeSelector = - rangeEnabled && PluginRegistry.has('range') - ? `<div class="tp-ui-range-header" role="tablist" aria-label="Range selection"><button type="button" class="tp-ui-range-tab tp-ui-range-from active" role="tab" tabindex="0" aria-selected="true"><span class="tp-ui-range-tab-label">${fromLabel}</span><span class="tp-ui-range-tab-value tp-ui-range-from-time">--:--</span></button><button type="button" class="tp-ui-range-tab tp-ui-range-to" role="tab" tabindex="-1" aria-selected="false"><span class="tp-ui-range-tab-label">${toLabel}</span><span class="tp-ui-range-tab-value tp-ui-range-to-time">--:--</span></button></div>` - : ''; + const clearButton = buildClearButton(options, mobileClass); - const clearButton = clearButtonEnabled - ? `<div class="tp-ui-clear-btn ${mobileClass} disabled" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${clearLabel}" aria-disabled="true">${clearLabel}</div>` - : ''; + return `<div class="tp-ui-footer ${mobileClass}" ${mobileClass ? 'data-view="mobile"' : ''}>${switchIcon}<div class="tp-ui-wrapper-btn ${mobileClass}">${clearButton}<div class="tp-ui-cancel-btn ${mobileClass}" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${cancelLabel}">${cancelLabel}</div><div class="tp-ui-ok-btn ${mobileClass}" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${okLabel}">${okLabel}</div></div></div>`; +}; - const isWheelMode = pickerMode === 'wheel' && PluginRegistry.has('wheel'); +export const getModalTemplate = (options: Required<TimepickerOptions>, instanceId: string): string => { + const { + ui: { mode: pickerMode, animation, theme, mobile }, + clock: { incrementMinutes }, + } = options; - const clockBody = `<div class="tp-ui-mobile-clock-wrapper ${mobileClass}"><div class="tp-ui-body ${mobileClass}"><div class="tp-ui-clock-face ${mobileClass}" role="group" aria-label="Clock"><div class="tp-ui-dot ${mobileClass}" aria-hidden="true"></div><div class="tp-ui-clock-hand ${mobileClass}" aria-hidden="true"><div class="tp-ui-circle-hand ${mobileClass}"></div></div><div class="tp-ui-tips-wrapper ${mobileClass}" role="listbox" aria-label="Time"></div>${clockType === '24h' ? `<div class="tp-ui-tips-wrapper-24h ${mobileClass}" role="listbox" aria-label="24h"></div>` : ''}</div></div></div>`; + const mobileClass = !!mobile ? 'mobile' : ''; + const isCompactWheel = pickerMode === 'compact-wheel' && PluginRegistry.has('wheel'); + const isWheelMode = (pickerMode === 'wheel' || isCompactWheel) && PluginRegistry.has('wheel'); + const isRangeMode = !!options.range?.enabled && PluginRegistry.has('range'); - const wheelBody = `<div class="tp-ui-mobile-clock-wrapper ${mobileClass}">${getWheelTemplate(clockType as '12h' | '24h', incrementMinutes ?? 1)}</div>`; + const config: TemplateConfig = { + mobileClass, + clockType: options.clock.type || '12h', + instanceId, + isWheelMode, + isCompactWheel, + isRangeMode, + }; - const isRangeMode = rangeEnabled && PluginRegistry.has('range'); + const rangeSelector = buildRangeSelector(options); + const timezoneSelector = buildTimezoneSelector(options, mobileClass, instanceId); + const header = isCompactWheel ? '' : buildHeader(options, config); + const pickerBody = buildPickerBody(config, incrementMinutes ?? 1); + const footer = + isCompactWheel && options.ui.wheel?.hideFooter === true ? '' : buildFooter(options, mobileClass); - const pickerBody = isWheelMode ? wheelBody : clockBody; + const wheelClass = isCompactWheel ? ' tp-ui-compact-wheel-mode' : isWheelMode ? ' tp-ui-wheel-mode' : ''; - return `<div class="tp-ui-modal normalize ${mobileClass}${isRangeMode ? ' tp-ui-range-mode' : ''}${isWheelMode ? ' tp-ui-wheel-mode' : ''}" data-theme="${theme}" role="dialog" aria-modal="true" aria-labelledby="tp-ui-label-${instanceId}" data-owner-id="${instanceId}" style='transition:${animation ? 'opacity 0.15s linear' : 'none'}'><div class="tp-ui-wrapper ${mobileClass}" tabindex="0">${rangeSelector}<div class="tp-ui-select-time ${mobileClass}" id="tp-ui-label-${instanceId}">${mobileClass ? mobileTimeLabel : timeLabel}</div><div class="tp-ui-header ${mobileClass}"><div class="tp-ui-wrapper-time ${mobileClass} ${clockType === '24h' ? 'tp-ui-wrapper-time-24h' : ''}" role="group" aria-label="${mobileClass ? mobileTimeLabel : timeLabel}"><div class="tp-ui-input-wrapper ${mobileClass}"><div class="tp-ui-input-ripple-wrapper ${mobileClass}" data-md3-ripple><input name="hour" ${!editable && !mobileClass ? 'readonly' : ''} class="tp-ui-hour ${mobileClass}" tabindex="0" type="number" min="0" max="${clockType === '12h' ? '12' : '23'}" aria-label="${mobileClass ? hourMobileLabel : 'Hour'}" role="spinbutton" aria-valuenow="12"></div><div class="tp-ui-hour-text ${mobileClass}">${hourMobileLabel}</div></div><div class="tp-ui-dots ${mobileClass}" aria-hidden="true"><span></span><span></span></div><div class="tp-ui-input-wrapper ${mobileClass}"><div class="tp-ui-input-ripple-wrapper ${mobileClass}" data-md3-ripple><input name="minutes" ${!editable && !mobileClass ? 'readonly' : ''} class="tp-ui-minutes ${mobileClass}" tabindex="0" type="number" min="0" max="59" aria-label="${mobileClass ? minuteMobileLabel : 'Minute'}" role="spinbutton" aria-valuenow="0"></div><div class="tp-ui-minute-text ${mobileClass}">${minuteMobileLabel}</div></div></div>${clockType !== '24h' ? `<div class="tp-ui-wrapper-type-time ${mobileClass}" role="group" aria-label="Period"><div class="tp-ui-type-mode tp-ui-am ${mobileClass ? 'mobile' : 'tp-ui-ripple'}" data-md3-ripple tabindex="0" role="button" aria-label="${amLabel}" aria-pressed="false" data-type="AM">${amLabel}</div><div class="tp-ui-type-mode tp-ui-pm ${mobileClass ? 'mobile' : 'tp-ui-ripple'}" data-md3-ripple tabindex="0" role="button" aria-label="${pmLabel}" aria-pressed="false" data-type="PM">${pmLabel}</div></div>` : ''}</div>${timezoneSelector}${pickerBody}<div class="tp-ui-footer ${mobileClass}" ${mobileClass ? 'data-view="mobile"' : ''}>${enableSwitchIcon ? `<div class="tp-ui-keyboard-icon-wrapper ${mobileClass}" tabindex="0" role="button" aria-pressed="false" aria-label="Toggle" data-view="desktop">${mobileClass ? clockIcon : keyboardIcon}</div>` : ''}<div class="tp-ui-wrapper-btn ${mobileClass}">${clearButton}<div class="tp-ui-cancel-btn ${mobileClass}" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${cancelLabel}">${cancelLabel}</div><div class="tp-ui-ok-btn ${mobileClass}" data-md3-ripple tabindex="0" role="button" aria-pressed="false" aria-label="${okLabel}">${okLabel}</div></div></div></div><div class="timepicker-announcer sr-only" role="status" aria-live="polite" aria-atomic="true"></div></div>`; + return `<div class="tp-ui-modal normalize ${mobileClass}${isRangeMode ? ' tp-ui-range-mode' : ''}${wheelClass}" data-theme="${theme}" role="dialog" aria-modal="true" aria-labelledby="tp-ui-label-${instanceId}" data-owner-id="${instanceId}" style='transition:${animation ? 'opacity 0.15s linear' : 'none'}'><div class="tp-ui-wrapper ${mobileClass}" tabindex="0">${rangeSelector}${header}${timezoneSelector}${pickerBody}${footer}</div><div class="timepicker-announcer sr-only" role="status" aria-live="polite" aria-atomic="true"></div></div>`; }; diff --git a/app/src/utils/template/wheel.ts b/app/src/utils/template/wheel.ts index 0d258c3..21a6e9b 100644 --- a/app/src/utils/template/wheel.ts +++ b/app/src/utils/template/wheel.ts @@ -7,11 +7,11 @@ const buildPadding = (): string => .map(() => '<div class="tp-ui-wheel-padding"></div>') .join(''); -const buildItems = (values: ReadonlyArray<string>, labelPrefix: string): string => +const buildItems = (values: ReadonlyArray<string>, labelPrefix: string, columnId: string): string => values .map( (v) => - `<div class="tp-ui-wheel-item" role="option" data-value="${v}" aria-label="${labelPrefix} ${v}">${v}</div>`, + `<div class="tp-ui-wheel-item" role="option" id="${columnId}-${v}" data-value="${v}" aria-label="${labelPrefix} ${v}" aria-selected="false">${v}</div>`, ) .join(''); @@ -20,8 +20,9 @@ const buildColumn = ( ariaLabel: string, values: ReadonlyArray<string>, labelPrefix: string, + columnId: string, ): string => - `<div class="tp-ui-wheel-column-wrapper at-start"><div class="tp-ui-wheel-column ${className}" role="listbox" aria-label="${ariaLabel}" tabindex="0">${buildPadding()}${buildItems(values, labelPrefix)}${buildPadding()}</div></div>`; + `<div class="tp-ui-wheel-column-wrapper at-start"><div class="tp-ui-wheel-column ${className}" role="listbox" aria-label="${ariaLabel}" aria-activedescendant="" tabindex="0">${buildPadding()}${buildItems(values, labelPrefix, columnId)}${buildPadding()}</div></div>`; const generateHours12 = (): ReadonlyArray<string> => Array.from({ length: 12 }, (_, i) => pad(i + 1)); @@ -30,18 +31,30 @@ const generateHours24 = (): ReadonlyArray<string> => Array.from({ length: 24 }, const generateMinutes = (step: number): ReadonlyArray<string> => Array.from({ length: Math.ceil(60 / step) }, (_, i) => pad(i * step)); -export const getWheelTemplate = (clockType: '12h' | '24h', incrementMinutes: number): string => { +const AMPM_VALUES: ReadonlyArray<string> = ['AM', 'PM']; + +export const getWheelTemplate = ( + clockType: '12h' | '24h', + incrementMinutes: number, + includeAmPmColumn: boolean = false, + instanceId: string = 'tp', +): string => { const hours = clockType === '12h' ? generateHours12() : generateHours24(); const minutes = generateMinutes(incrementMinutes); - const hoursColumn = buildColumn('tp-ui-wheel-hours', 'Hours', hours, 'Hour'); + const hoursColumn = buildColumn('tp-ui-wheel-hours', 'Hours', hours, 'Hour', `${instanceId}-wh`); const separator = '<div class="tp-ui-wheel-separator" aria-hidden="true">:</div>'; - const minutesColumn = buildColumn('tp-ui-wheel-minutes', 'Minutes', minutes, 'Minute'); + const minutesColumn = buildColumn('tp-ui-wheel-minutes', 'Minutes', minutes, 'Minute', `${instanceId}-wm`); + + const ampmColumn = + includeAmPmColumn && clockType === '12h' + ? buildColumn('tp-ui-wheel-ampm', 'Period', AMPM_VALUES, 'Period', `${instanceId}-wp`) + : ''; const highlight = '<div class="tp-ui-wheel-highlight" aria-hidden="true"></div>'; - return `<div class="tp-ui-wheel-container">${hoursColumn}${separator}${minutesColumn}${highlight}</div>`; + return `<div class="tp-ui-wheel-container">${hoursColumn}${separator}${minutesColumn}${ampmColumn}${highlight}</div>`; }; diff --git a/app/tests/unit/managers/AnimationManager.edge.test.ts b/app/tests/unit/managers/AnimationManager.edge.test.ts new file mode 100644 index 0000000..6372c9a --- /dev/null +++ b/app/tests/unit/managers/AnimationManager.edge.test.ts @@ -0,0 +1,95 @@ +import AnimationManager from '../../../src/managers/AnimationManager'; +import { CoreState } from '../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../src/utils/EventEmitter'; +import { DEFAULT_OPTIONS } from '../../../src/utils/options/defaults'; + +describe('AnimationManager edge cases', () => { + let coreState: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let manager: AnimationManager; + let mockElement: HTMLElement; + + beforeEach(() => { + jest.useFakeTimers(); + + mockElement = document.createElement('div'); + mockElement.innerHTML = '<input type="text" />'; + document.body.appendChild(mockElement); + + coreState = new CoreState(mockElement, DEFAULT_OPTIONS, 'anim-edge-id'); + emitter = new EventEmitter(); + manager = new AnimationManager(coreState, emitter); + }); + + afterEach(() => { + manager.destroy(); + document.body.innerHTML = ''; + jest.useRealTimers(); + jest.clearAllMocks(); + }); + + describe('rapid open/close toggle', () => { + it('should not leak classes when open and close are called rapidly', () => { + const modal = document.createElement('div') as HTMLDivElement; + jest.spyOn(coreState, 'getModalElement').mockReturnValue(modal); + + manager.setAnimationToOpen(); + manager.removeAnimationToClose(); + manager.setAnimationToOpen(); + manager.removeAnimationToClose(); + + jest.advanceTimersByTime(1000); + + expect(modal.classList.contains('show')).toBe(false); + expect(modal.classList.contains('opacity')).toBe(false); + }); + }); + + describe('setAnimationToOpen with null modal', () => { + it('should not throw when modal is null', () => { + jest.spyOn(coreState, 'getModalElement').mockReturnValue(null); + + expect(() => manager.setAnimationToOpen()).not.toThrow(); + }); + }); + + describe('destroy cancels pending animation timers', () => { + it('should not apply show class after destroy', () => { + const modal = document.createElement('div') as HTMLDivElement; + jest.spyOn(coreState, 'getModalElement').mockReturnValue(modal); + + manager.setAnimationToOpen(); + expect(modal.classList.contains('opacity')).toBe(true); + + manager.destroy(); + + jest.advanceTimersByTime(1000); + + expect(modal.classList.contains('show')).toBe(false); + }); + }); + + describe('handleAnimationSwitchTipsMode rapid calls', () => { + it('should handle rapid toggle without issues', () => { + const clockHand = document.createElement('div'); + jest.spyOn(coreState, 'getClockHand').mockReturnValue(clockHand); + + manager.handleAnimationSwitchTipsMode(); + manager.handleAnimationSwitchTipsMode(); + manager.handleAnimationSwitchTipsMode(); + + jest.advanceTimersByTime(1000); + + expect(clockHand.classList.contains('tp-ui-tips-animation')).toBe(false); + }); + }); + + describe('animation:clock event after destroy', () => { + it('should not throw when event fires after destroy', () => { + manager.destroy(); + + expect(() => emitter.emit('animation:clock', {})).not.toThrow(); + }); + }); +}); + diff --git a/app/tests/unit/managers/config/InputValueHandler.edge.test.ts b/app/tests/unit/managers/config/InputValueHandler.edge.test.ts new file mode 100644 index 0000000..8853a83 --- /dev/null +++ b/app/tests/unit/managers/config/InputValueHandler.edge.test.ts @@ -0,0 +1,165 @@ +import { InputValueHandler } from '../../../../src/managers/config/InputValueHandler'; +import { CoreState } from '../../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../../src/utils/EventEmitter'; +import { DEFAULT_OPTIONS } from '../../../../src/utils/options/defaults'; +import * as inputUtils from '../../../../src/utils/input'; + +describe('InputValueHandler edge cases', () => { + let coreState: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let handler: InputValueHandler; + let mockElement: HTMLElement; + let mockInput: HTMLInputElement; + + beforeEach(() => { + mockElement = document.createElement('div'); + mockInput = document.createElement('input'); + mockInput.type = 'text'; + mockElement.appendChild(mockInput); + document.body.appendChild(mockElement); + + coreState = new CoreState(mockElement, DEFAULT_OPTIONS, 'edge-input-id'); + emitter = new EventEmitter(); + handler = new InputValueHandler(coreState, emitter); + }); + + afterEach(() => { + handler.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + jest.restoreAllMocks(); + }); + + describe('getInputValueOnOpenAndSet() with whitespace-only input', () => { + it('should treat spaces-only input as having a value and parse it', () => { + mockInput.value = ' '; + const hourInput = document.createElement('input') as HTMLInputElement; + const minutesInput = document.createElement('input') as HTMLInputElement; + + jest.spyOn(coreState, 'getHour').mockReturnValue(hourInput); + jest.spyOn(coreState, 'getMinutes').mockReturnValue(minutesInput); + jest.spyOn(coreState, 'getActiveTypeMode').mockReturnValue(null); + jest.spyOn(coreState, 'getModalElement').mockReturnValue(document.createElement('div')); + jest.spyOn(coreState, 'getAM').mockReturnValue(null); + + expect(() => handler.getInputValueOnOpenAndSet()).not.toThrow(); + }); + }); + + describe('getInputValueOnOpenAndSet() with single-digit input', () => { + it('should pad single-digit hour to two digits', () => { + mockInput.value = '3:05 PM'; + const hourInput = document.createElement('input') as HTMLInputElement; + const minutesInput = document.createElement('input') as HTMLInputElement; + const modal = document.createElement('div'); + const pmEl = document.createElement('div'); + pmEl.setAttribute('data-type', 'PM'); + modal.appendChild(pmEl); + + jest.spyOn(coreState, 'getHour').mockReturnValue(hourInput); + jest.spyOn(coreState, 'getMinutes').mockReturnValue(minutesInput); + jest.spyOn(coreState, 'getActiveTypeMode').mockReturnValue(null); + jest.spyOn(coreState, 'getModalElement').mockReturnValue(modal); + jest.spyOn(coreState, 'getAM').mockReturnValue(null); + + handler.getInputValueOnOpenAndSet(); + + expect(hourInput.value).toBe('03'); + expect(minutesInput.value).toBe('05'); + }); + }); + + describe('getInputValueOnOpenAndSet() with no input element', () => { + it('should return early without throwing when input is absent', () => { + mockElement.innerHTML = ''; + + expect(() => handler.getInputValueOnOpenAndSet()).not.toThrow(); + }); + }); + + describe('preventClockTypeByCurrentTime() with boolean currentTime', () => { + it('should not update options when currentTime is false', () => { + const opts = { + ...DEFAULT_OPTIONS, + clock: { ...DEFAULT_OPTIONS.clock, currentTime: false as const }, + }; + const core = new CoreState(mockElement, opts, 'prevent-bool-false'); + const h = new InputValueHandler(core, emitter); + const spy = jest.spyOn(core, 'updateOptions'); + + h.preventClockTypeByCurrentTime(); + + expect(spy).not.toHaveBeenCalled(); + h.destroy(); + }); + }); + + describe('updateInputValueWithCurrentTimeOnStart() formatting', () => { + it('should format 12h time with AM/PM suffix', () => { + const opts = { + ...DEFAULT_OPTIONS, + clock: { ...DEFAULT_OPTIONS.clock, currentTime: true }, + }; + const core = new CoreState(mockElement, opts, 'update-input-12h'); + const h = new InputValueHandler(core, emitter); + + jest.spyOn(inputUtils, 'getInputValue').mockReturnValue({ + hour: '09', + minutes: '30', + type: 'AM', + }); + + h.updateInputValueWithCurrentTimeOnStart(); + + expect(mockInput.value).toBe('09:30 AM'); + h.destroy(); + }); + + it('should format 24h time without AM/PM suffix', () => { + const opts = { + ...DEFAULT_OPTIONS, + clock: { ...DEFAULT_OPTIONS.clock, type: '24h' as const, currentTime: true }, + }; + const core = new CoreState(mockElement, opts, 'update-input-24h'); + const h = new InputValueHandler(core, emitter); + + jest.spyOn(inputUtils, 'getInputValue').mockReturnValue({ + hour: '14', + minutes: '30', + type: undefined, + }); + + h.updateInputValueWithCurrentTimeOnStart(); + + expect(mockInput.value).toBe('14:30'); + h.destroy(); + }); + }); + + describe('getInputValueOnOpenAndSet() data-type element mismatch', () => { + it('should not crash when modal has no matching data-type element', () => { + mockInput.value = '10:30 PM'; + const hourInput = document.createElement('input') as HTMLInputElement; + const minutesInput = document.createElement('input') as HTMLInputElement; + const modal = document.createElement('div'); + + jest.spyOn(coreState, 'getHour').mockReturnValue(hourInput); + jest.spyOn(coreState, 'getMinutes').mockReturnValue(minutesInput); + jest.spyOn(coreState, 'getActiveTypeMode').mockReturnValue(null); + jest.spyOn(coreState, 'getModalElement').mockReturnValue(modal); + jest.spyOn(coreState, 'getAM').mockReturnValue(null); + + expect(() => handler.getInputValueOnOpenAndSet()).not.toThrow(); + expect(hourInput.value).toBe('10'); + expect(minutesInput.value).toBe('30'); + }); + }); + + describe('destroy() idempotency', () => { + it('should not throw when called multiple times', () => { + handler.destroy(); + expect(() => handler.destroy()).not.toThrow(); + }); + }); +}); + diff --git a/app/tests/unit/managers/config/InputValueHandler.test.ts b/app/tests/unit/managers/config/InputValueHandler.test.ts index fe83d4d..8800149 100644 --- a/app/tests/unit/managers/config/InputValueHandler.test.ts +++ b/app/tests/unit/managers/config/InputValueHandler.test.ts @@ -232,6 +232,110 @@ describe('InputValueHandler', () => { }); }); + describe('getInputValueOnOpenAndSet() 12h period inference', () => { + it('should default period to AM when input has no AM/PM suffix in 12h mode', () => { + mockInput.value = '10:55'; + const hourInput = document.createElement('input') as HTMLInputElement; + const minutesInput = document.createElement('input') as HTMLInputElement; + const modal = document.createElement('div'); + const amElement = document.createElement('div'); + amElement.setAttribute('data-type', 'AM'); + const pmElement = document.createElement('div'); + pmElement.setAttribute('data-type', 'PM'); + modal.appendChild(amElement); + modal.appendChild(pmElement); + + jest.spyOn(coreState, 'getHour').mockReturnValue(hourInput); + jest.spyOn(coreState, 'getMinutes').mockReturnValue(minutesInput); + jest.spyOn(coreState, 'getActiveTypeMode').mockReturnValue(null); + jest.spyOn(coreState, 'getModalElement').mockReturnValue(modal); + jest.spyOn(coreState, 'getAM').mockReturnValue(null); + + handler.getInputValueOnOpenAndSet(); + + expect(hourInput.value).toBe('10'); + expect(minutesInput.value).toBe('55'); + expect(amElement.classList.contains('active')).toBe(true); + expect(pmElement.classList.contains('active')).toBe(false); + }); + + it('should keep PM when input explicitly has PM suffix', () => { + mockInput.value = '3:20 PM'; + const hourInput = document.createElement('input') as HTMLInputElement; + const minutesInput = document.createElement('input') as HTMLInputElement; + const modal = document.createElement('div'); + const amElement = document.createElement('div'); + amElement.setAttribute('data-type', 'AM'); + const pmElement = document.createElement('div'); + pmElement.setAttribute('data-type', 'PM'); + modal.appendChild(amElement); + modal.appendChild(pmElement); + + jest.spyOn(coreState, 'getHour').mockReturnValue(hourInput); + jest.spyOn(coreState, 'getMinutes').mockReturnValue(minutesInput); + jest.spyOn(coreState, 'getActiveTypeMode').mockReturnValue(null); + jest.spyOn(coreState, 'getModalElement').mockReturnValue(modal); + jest.spyOn(coreState, 'getAM').mockReturnValue(null); + + handler.getInputValueOnOpenAndSet(); + + expect(hourInput.value).toBe('03'); + expect(minutesInput.value).toBe('20'); + expect(pmElement.classList.contains('active')).toBe(true); + expect(amElement.classList.contains('active')).toBe(false); + }); + + it('should emit open event with inferred period when input lacks AM/PM', () => { + mockInput.value = '7:45'; + const emitSpy = jest.spyOn(emitter, 'emit'); + const hourInput = document.createElement('input') as HTMLInputElement; + const minutesInput = document.createElement('input') as HTMLInputElement; + const modal = document.createElement('div'); + const amElement = document.createElement('div'); + amElement.setAttribute('data-type', 'AM'); + modal.appendChild(amElement); + + jest.spyOn(coreState, 'getHour').mockReturnValue(hourInput); + jest.spyOn(coreState, 'getMinutes').mockReturnValue(minutesInput); + jest.spyOn(coreState, 'getActiveTypeMode').mockReturnValue(null); + jest.spyOn(coreState, 'getModalElement').mockReturnValue(modal); + jest.spyOn(coreState, 'getAM').mockReturnValue(null); + + handler.getInputValueOnOpenAndSet(); + + expect(emitSpy).toHaveBeenCalledWith('open', expect.any(Object)); + }); + + it('should not infer period in 24h mode when input lacks AM/PM', () => { + const options24h = { + ...DEFAULT_OPTIONS, + clock: { ...DEFAULT_OPTIONS.clock, type: '24h' as const }, + }; + const core24h = new CoreState(mockElement, options24h, 'test-24h-period'); + const handler24h = new InputValueHandler(core24h, emitter); + + mockInput.value = '14:30'; + const hourInput = document.createElement('input') as HTMLInputElement; + const minutesInput = document.createElement('input') as HTMLInputElement; + const modal = document.createElement('div'); + + jest.spyOn(core24h, 'getHour').mockReturnValue(hourInput); + jest.spyOn(core24h, 'getMinutes').mockReturnValue(minutesInput); + jest.spyOn(core24h, 'getActiveTypeMode').mockReturnValue(null); + jest.spyOn(core24h, 'getModalElement').mockReturnValue(modal); + jest.spyOn(core24h, 'getAM').mockReturnValue(null); + + handler24h.getInputValueOnOpenAndSet(); + + expect(hourInput.value).toBe('14'); + expect(minutesInput.value).toBe('30'); + const activatedElements = modal.querySelectorAll('.active'); + expect(activatedElements.length).toBe(0); + + handler24h.destroy(); + }); + }); + describe('getInputValue', () => { it('should return input value object for 12h format', () => { mockInput.value = '10:45 PM'; @@ -256,4 +360,3 @@ describe('InputValueHandler', () => { }); }); }); - diff --git a/app/tests/unit/managers/plugins/wheel/ColumnDragState.edge.test.ts b/app/tests/unit/managers/plugins/wheel/ColumnDragState.edge.test.ts new file mode 100644 index 0000000..e0fb386 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/ColumnDragState.edge.test.ts @@ -0,0 +1,101 @@ +import { ColumnDragState } from '../../../../../src/managers/plugins/wheel/ColumnDragState'; + +describe('ColumnDragState edge cases', () => { + let element: HTMLDivElement; + let state: ColumnDragState; + + beforeEach(() => { + element = document.createElement('div'); + element.style.height = '200px'; + element.style.overflow = 'auto'; + document.body.appendChild(element); + state = new ColumnDragState(element, 'hours'); + }); + + afterEach(() => { + state.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + jest.useRealTimers(); + }); + + describe('computeReleaseVelocity() with identical timestamps', () => { + it('should return 0 when all samples have the same timestamp', () => { + const mockNow = 1000; + jest.spyOn(performance, 'now').mockReturnValue(mockNow); + + state.startDrag(100, 1); + state.addVelocitySample(110); + state.addVelocitySample(120); + + expect(state.computeReleaseVelocity()).toBe(0); + }); + }); + + describe('destroy during active drag', () => { + it('should abort signal without throwing when destroyed mid-drag', () => { + state.startDrag(100, 1); + state.addVelocitySample(110); + const signal = state.signal; + + expect(state.isDragging).toBe(true); + expect(() => state.destroy()).not.toThrow(); + expect(signal.aborted).toBe(true); + }); + }); + + describe('animateToOffset() edge distances', () => { + it('should snap immediately for sub-pixel distance', () => { + element.scrollTop = 100; + const onComplete = jest.fn(); + + state.animateToOffset(100.3, onComplete); + + expect(onComplete).toHaveBeenCalledTimes(1); + expect(element.scrollTop).toBe(100.3); + }); + }); + + describe('scheduleSnapAfterWheel() replaced by destroy', () => { + it('should not fire callback if destroyed before debounce fires', () => { + jest.useFakeTimers(); + + const callback = jest.fn(); + state.scheduleSnapAfterWheel(callback); + state.destroy(); + + jest.advanceTimersByTime(300); + + expect(callback).not.toHaveBeenCalled(); + }); + }); + + describe('multiple startDrag without endDrag', () => { + it('should overwrite previous drag state', () => { + state.startDrag(50, 1); + expect(state.lastY).toBe(50); + expect(state.pointerId).toBe(1); + + state.startDrag(200, 2); + expect(state.lastY).toBe(200); + expect(state.pointerId).toBe(2); + expect(state.isDragging).toBe(true); + }); + }); + + describe('stopMomentum when no rAF is set', () => { + it('should not throw when called without active momentum or snap', () => { + expect(() => state.stopMomentum()).not.toThrow(); + expect(() => state.stopMomentum()).not.toThrow(); + }); + }); + + describe('signal after double destroy', () => { + it('should return a new non-aborted signal after controller is nullified', () => { + state.destroy(); + const signal = state.signal; + expect(signal).toBeInstanceOf(AbortSignal); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelEventHandler.edge.test.ts b/app/tests/unit/managers/plugins/wheel/WheelEventHandler.edge.test.ts new file mode 100644 index 0000000..2d408dd --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelEventHandler.edge.test.ts @@ -0,0 +1,288 @@ +import { WheelEventHandler } from '../../../../../src/managers/plugins/wheel/WheelEventHandler'; +import { WheelScrollHandler } from '../../../../../src/managers/plugins/wheel/WheelScrollHandler'; +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; +import { CoreState } from '../../../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { + setupWheelTestContext, + createWheelOptions, + WHEEL_ITEM_HEIGHT_PX, + type WheelTestContext, +} from './wheel-test-helpers'; + +describe('WheelEventHandler edge cases', () => { + let ctx: WheelTestContext; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + let scrollHandler: WheelScrollHandler; + let eventHandler: WheelEventHandler; + + beforeEach(() => { + ctx = setupWheelTestContext('12h'); + renderer = new WheelRenderer(ctx.core, ctx.emitter); + dragHandler = new WheelDragHandler(renderer); + scrollHandler = new WheelScrollHandler(renderer, ctx.core); + scrollHandler.setDragHandler(dragHandler); + eventHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + + renderer.init(); + dragHandler.init(); + scrollHandler.init(); + eventHandler.init(); + }); + + afterEach(() => { + eventHandler.destroy(); + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + jest.useRealTimers(); + }); + + describe('commitOnScroll debouncing', () => { + it('should commit value to input after scroll end when commitOnScroll enabled', () => { + jest.useFakeTimers(); + + eventHandler.destroy(); + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + + const commitOpts = createWheelOptions({ + clock: { type: '12h' }, + ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, + }); + const element = document.createElement('div'); + const input = document.createElement('input'); + input.type = 'text'; + element.appendChild(input); + document.body.appendChild(element); + + const core = new CoreState(element, commitOpts, 'commit-test'); + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', 'commit-test'); + + const hourInput = document.createElement('input'); + hourInput.className = 'tp-ui-hour'; + modal.appendChild(hourInput); + const minuteInput = document.createElement('input'); + minuteInput.className = 'tp-ui-minutes'; + modal.appendChild(minuteInput); + + const am = document.createElement('div'); + am.className = 'tp-ui-type-mode tp-ui-am active'; + modal.appendChild(am); + const pm = document.createElement('div'); + pm.className = 'tp-ui-type-mode tp-ui-pm'; + modal.appendChild(pm); + + const container = document.createElement('div'); + const hoursWrapper = document.createElement('div'); + hoursWrapper.className = 'tp-ui-wheel-column-wrapper'; + const hoursCol = document.createElement('div'); + hoursCol.className = 'tp-ui-wheel-column tp-ui-wheel-hours'; + for (let i = 1; i <= 12; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + hoursCol.appendChild(item); + } + hoursWrapper.appendChild(hoursCol); + container.appendChild(hoursWrapper); + + const minutesWrapper = document.createElement('div'); + minutesWrapper.className = 'tp-ui-wheel-column-wrapper'; + const minutesCol = document.createElement('div'); + minutesCol.className = 'tp-ui-wheel-column tp-ui-wheel-minutes'; + for (let i = 0; i < 60; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + minutesCol.appendChild(item); + } + minutesWrapper.appendChild(minutesCol); + container.appendChild(minutesWrapper); + + const ampmWrapper = document.createElement('div'); + ampmWrapper.className = 'tp-ui-wheel-column-wrapper'; + const ampmCol = document.createElement('div'); + ampmCol.className = 'tp-ui-wheel-column tp-ui-wheel-ampm'; + ['AM', 'PM'].forEach((val) => { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', val); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + ampmCol.appendChild(item); + }); + ampmWrapper.appendChild(ampmCol); + container.appendChild(ampmWrapper); + + modal.appendChild(container); + document.body.appendChild(modal); + + const emitter = new EventEmitter<TimepickerEventMap>(); + const r = new WheelRenderer(core, emitter); + const d = new WheelDragHandler(r); + const s = new WheelScrollHandler(r, core); + s.setDragHandler(d); + const e = new WheelEventHandler(emitter, s, core); + + r.init(); + d.init(); + s.init(); + e.init(); + + const emitSpy = jest.spyOn(emitter, 'emit'); + + jest.spyOn(r, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + s.scrollToValue('hours', '09'); + + const capturedRef: { callback: ((col: string, val: string) => void) | null } = { callback: null }; + jest.spyOn(s, 'setScrollEndCallback').mockImplementation((cb) => { + capturedRef.callback = cb as (col: string, val: string) => void; + }); + jest.spyOn(s, 'getCurrentSelection').mockReturnValue({ + hour: '09', + minute: '00', + ampm: 'AM', + }); + + e.destroy(); + e.init(); + + capturedRef.callback?.('hours', '09'); + + jest.advanceTimersByTime(500); + + expect(emitSpy).toHaveBeenCalledWith('confirm', expect.objectContaining({ autoCommit: true })); + + e.destroy(); + s.destroy(); + d.destroy(); + r.destroy(); + }); + }); + + describe('arrow key at boundaries', () => { + it('should not scroll beyond first item on ArrowUp', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + scrollHandler.scrollToValue('hours', '01'); + + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) return; + + const scrollSpy = jest.spyOn(scrollHandler, 'scrollToValue'); + scrollSpy.mockClear(); + + hoursCol.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })); + + const callsToHoursScroll = scrollSpy.mock.calls.filter((call) => call[0] === 'hours'); + expect(callsToHoursScroll.length).toBe(0); + }); + + it('should not scroll beyond last item on ArrowDown', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + scrollHandler.scrollToValue('hours', '12'); + + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) return; + + const scrollSpy = jest.spyOn(scrollHandler, 'scrollToValue'); + scrollSpy.mockClear(); + + hoursCol.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })); + + const callsToHoursScroll = scrollSpy.mock.calls.filter((call) => call[0] === 'hours'); + expect(callsToHoursScroll.length).toBe(0); + }); + }); + + describe('ampm column scroll end', () => { + it('should emit select:am when ampm scrolls to AM', () => { + const emitSpy = jest.spyOn(ctx.emitter, 'emit'); + const capturedRef: { callback: ((col: string, val: string) => void) | null } = { callback: null }; + + jest.spyOn(scrollHandler, 'setScrollEndCallback').mockImplementation((cb) => { + capturedRef.callback = cb as (col: string, val: string) => void; + }); + jest.spyOn(scrollHandler, 'getCurrentSelection').mockReturnValue({ + hour: '12', + minute: '00', + ampm: 'AM', + }); + + eventHandler.destroy(); + eventHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + eventHandler.init(); + + capturedRef.callback?.('ampm', 'AM'); + + expect(emitSpy).toHaveBeenCalledWith('select:am', {}); + }); + + it('should emit select:pm when ampm scrolls to PM', () => { + const emitSpy = jest.spyOn(ctx.emitter, 'emit'); + const capturedRef: { callback: ((col: string, val: string) => void) | null } = { callback: null }; + + jest.spyOn(scrollHandler, 'setScrollEndCallback').mockImplementation((cb) => { + capturedRef.callback = cb as (col: string, val: string) => void; + }); + jest.spyOn(scrollHandler, 'getCurrentSelection').mockReturnValue({ + hour: '12', + minute: '00', + ampm: 'PM', + }); + + eventHandler.destroy(); + eventHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + eventHandler.init(); + + capturedRef.callback?.('ampm', 'PM'); + + expect(emitSpy).toHaveBeenCalledWith('select:pm', {}); + }); + }); + + describe('destroy clears commitOnScroll timer', () => { + it('should not fire confirm event after destroy', () => { + jest.useFakeTimers(); + + const commitOpts = createWheelOptions({ + clock: { type: '12h' }, + ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, + }); + ctx.core.setOptions(commitOpts); + + const emitSpy = jest.spyOn(ctx.emitter, 'emit'); + const capturedRef: { callback: ((col: string, val: string) => void) | null } = { callback: null }; + + jest.spyOn(scrollHandler, 'setScrollEndCallback').mockImplementation((cb) => { + capturedRef.callback = cb as (col: string, val: string) => void; + }); + jest.spyOn(scrollHandler, 'getCurrentSelection').mockReturnValue({ + hour: '06', + minute: '15', + ampm: 'PM', + }); + + eventHandler.destroy(); + eventHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); + eventHandler.init(); + + capturedRef.callback?.('hours', '06'); + eventHandler.destroy(); + + jest.advanceTimersByTime(1000); + + const confirmCalls = emitSpy.mock.calls.filter((call) => call[0] === 'confirm'); + expect(confirmCalls.length).toBe(0); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelEventHandler.test.ts b/app/tests/unit/managers/plugins/wheel/WheelEventHandler.test.ts index 77aabd1..8fad2e3 100644 --- a/app/tests/unit/managers/plugins/wheel/WheelEventHandler.test.ts +++ b/app/tests/unit/managers/plugins/wheel/WheelEventHandler.test.ts @@ -114,10 +114,12 @@ describe('WheelEventHandler', () => { describe('scroll end event emission', () => { it('should emit select:hour when scroll handler reports hour scroll end', () => { const emitSpy = jest.spyOn(ctx.emitter, 'emit'); - let capturedCallback: ((columnType: string, value: string) => void) | null = null; + const capturedRef: { callback: ((columnType: string, value: string) => void) | null } = { + callback: null, + }; jest.spyOn(scrollHandler, 'setScrollEndCallback').mockImplementation((cb) => { - capturedCallback = cb as (columnType: string, value: string) => void; + capturedRef.callback = cb as (columnType: string, value: string) => void; }); jest.spyOn(scrollHandler, 'getCurrentSelection').mockReturnValue({ @@ -130,8 +132,8 @@ describe('WheelEventHandler', () => { eventHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); eventHandler.init(); - expect(capturedCallback).not.toBeNull(); - capturedCallback?.('hours', '09'); + expect(capturedRef.callback).not.toBeNull(); + capturedRef.callback?.('hours', '09'); expect(emitSpy).toHaveBeenCalledWith('select:hour', { hour: '09' }); expect(emitSpy).toHaveBeenCalledWith('update', { @@ -143,10 +145,12 @@ describe('WheelEventHandler', () => { it('should emit select:minute when scroll handler reports minute scroll end', () => { const emitSpy = jest.spyOn(ctx.emitter, 'emit'); - let capturedCallback: ((columnType: string, value: string) => void) | null = null; + const capturedRef: { callback: ((columnType: string, value: string) => void) | null } = { + callback: null, + }; jest.spyOn(scrollHandler, 'setScrollEndCallback').mockImplementation((cb) => { - capturedCallback = cb as (columnType: string, value: string) => void; + capturedRef.callback = cb as (columnType: string, value: string) => void; }); jest.spyOn(scrollHandler, 'getCurrentSelection').mockReturnValue({ @@ -159,8 +163,8 @@ describe('WheelEventHandler', () => { eventHandler = new WheelEventHandler(ctx.emitter, scrollHandler, ctx.core); eventHandler.init(); - expect(capturedCallback).not.toBeNull(); - capturedCallback?.('minutes', '45'); + expect(capturedRef.callback).not.toBeNull(); + capturedRef.callback?.('minutes', '45'); expect(emitSpy).toHaveBeenCalledWith('select:minute', { minutes: '45' }); expect(emitSpy).toHaveBeenCalledWith('update', { diff --git a/app/tests/unit/managers/plugins/wheel/WheelHeaderSync.test.ts b/app/tests/unit/managers/plugins/wheel/WheelHeaderSync.test.ts new file mode 100644 index 0000000..686bee3 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelHeaderSync.test.ts @@ -0,0 +1,333 @@ +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; +import { WheelScrollHandler } from '../../../../../src/managers/plugins/wheel/WheelScrollHandler'; +import { WheelEventHandler } from '../../../../../src/managers/plugins/wheel/WheelEventHandler'; +import { CoreState } from '../../../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { createWheelOptions, WHEEL_ITEM_HEIGHT_PX } from './wheel-test-helpers'; + +const RECT_STUB: DOMRect = { + height: WHEEL_ITEM_HEIGHT_PX, + width: 80, + x: 0, + y: 0, + top: 0, + left: 0, + bottom: WHEEL_ITEM_HEIGHT_PX, + right: 80, + toJSON: () => ({}), +}; + +function mockItemHeights(modal: HTMLDivElement): void { + modal.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item').forEach((item) => { + jest.spyOn(item, 'getBoundingClientRect').mockReturnValue(RECT_STUB); + }); +} + +function buildModalWithDisabledMinutes(instanceId: string): HTMLDivElement { + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', instanceId); + + const hourInput = document.createElement('input'); + hourInput.className = 'tp-ui-hour'; + hourInput.value = '12'; + modal.appendChild(hourInput); + + const minuteInput = document.createElement('input'); + minuteInput.className = 'tp-ui-minutes'; + minuteInput.value = '00'; + modal.appendChild(minuteInput); + + const am = document.createElement('div'); + am.className = 'tp-ui-type-mode tp-ui-am active'; + modal.appendChild(am); + + const pm = document.createElement('div'); + pm.className = 'tp-ui-type-mode tp-ui-pm'; + modal.appendChild(pm); + + const container = document.createElement('div'); + container.className = 'tp-ui-wheel-container'; + + const hoursWrapper = document.createElement('div'); + hoursWrapper.className = 'tp-ui-wheel-column-wrapper'; + const hoursCol = document.createElement('div'); + hoursCol.className = 'tp-ui-wheel-column tp-ui-wheel-hours'; + hoursCol.setAttribute('role', 'listbox'); + hoursCol.setAttribute('tabindex', '0'); + + for (let i = 1; i <= 12; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.setAttribute('role', 'option'); + item.textContent = String(i).padStart(2, '0'); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + hoursCol.appendChild(item); + } + hoursWrapper.appendChild(hoursCol); + container.appendChild(hoursWrapper); + + const minutesWrapper = document.createElement('div'); + minutesWrapper.className = 'tp-ui-wheel-column-wrapper'; + const minutesCol = document.createElement('div'); + minutesCol.className = 'tp-ui-wheel-column tp-ui-wheel-minutes'; + minutesCol.setAttribute('role', 'listbox'); + minutesCol.setAttribute('tabindex', '0'); + + for (let i = 0; i < 60; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.setAttribute('role', 'option'); + item.textContent = String(i).padStart(2, '0'); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + minutesCol.appendChild(item); + } + minutesWrapper.appendChild(minutesCol); + container.appendChild(minutesWrapper); + + const ampmWrapper = document.createElement('div'); + ampmWrapper.className = 'tp-ui-wheel-column-wrapper'; + const ampmCol = document.createElement('div'); + ampmCol.className = 'tp-ui-wheel-column tp-ui-wheel-ampm'; + ampmCol.setAttribute('role', 'listbox'); + ampmCol.setAttribute('tabindex', '0'); + + ['AM', 'PM'].forEach((val) => { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', val); + item.setAttribute('role', 'option'); + item.textContent = val; + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + ampmCol.appendChild(item); + }); + ampmWrapper.appendChild(ampmCol); + container.appendChild(ampmWrapper); + + modal.appendChild(container); + return modal; +} + +const INSTANCE_ID = 'header-sync-test'; +const DISABLED_MINUTES = ['28', '29', '30', '31', '32']; + +describe('Wheel header sync on disabled skip', () => { + let element: HTMLDivElement; + let modal: HTMLDivElement; + let core: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + let scrollHandler: WheelScrollHandler; + let eventHandler: WheelEventHandler; + + beforeEach(() => { + element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const options = createWheelOptions({ + clock: { + type: '12h', + disabledTime: { minutes: [28, 29, 30, 31, 32] }, + }, + }); + + core = new CoreState(element, options, INSTANCE_ID); + core.setDisabledTime({ + value: { + minutes: DISABLED_MINUTES, + }, + }); + + modal = buildModalWithDisabledMinutes(INSTANCE_ID); + document.body.appendChild(modal); + mockItemHeights(modal); + + emitter = new EventEmitter<TimepickerEventMap>(); + renderer = new WheelRenderer(core, emitter); + dragHandler = new WheelDragHandler(renderer); + scrollHandler = new WheelScrollHandler(renderer, core); + scrollHandler.setDragHandler(dragHandler); + eventHandler = new WheelEventHandler(emitter, scrollHandler, core); + + renderer.init(); + dragHandler.init(); + scrollHandler.init(); + eventHandler.init(); + }); + + afterEach(() => { + eventHandler.destroy(); + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + it('should emit select:minute when scrollToNextValid skips disabled value', () => { + const minuteSpy = jest.fn(); + emitter.on('select:minute', minuteSpy); + + dragHandler.setScrollOffset('minutes', 30 * WHEEL_ITEM_HEIGHT_PX); + scrollHandler['onColumnSnapped']('minutes'); + + expect(minuteSpy).toHaveBeenCalled(); + const payload = minuteSpy.mock.calls[0][0]; + expect(DISABLED_MINUTES).not.toContain(payload.minutes); + }); + + it('should sync the minute header input after disabled skip', () => { + dragHandler.setScrollOffset('minutes', 30 * WHEEL_ITEM_HEIGHT_PX); + scrollHandler['onColumnSnapped']('minutes'); + + const minuteInput = modal.querySelector<HTMLInputElement>('.tp-ui-minutes'); + const value = minuteInput?.value; + + expect(value).toBeDefined(); + expect(DISABLED_MINUTES).not.toContain(value); + }); + + it('should emit update event after disabled skip', () => { + const updateSpy = jest.fn(); + emitter.on('update', updateSpy); + + dragHandler.setScrollOffset('minutes', 30 * WHEEL_ITEM_HEIGHT_PX); + scrollHandler['onColumnSnapped']('minutes'); + + expect(updateSpy).toHaveBeenCalled(); + }); + + it('should emit wheel:scroll:end after disabled skip', () => { + const scrollEndSpy = jest.fn(); + emitter.on('wheel:scroll:end', scrollEndSpy); + + dragHandler.setScrollOffset('minutes', 30 * WHEEL_ITEM_HEIGHT_PX); + scrollHandler['onColumnSnapped']('minutes'); + + expect(scrollEndSpy).toHaveBeenCalled(); + }); + + it('should emit select:hour when hour snaps to disabled value', () => { + core.setDisabledTime({ + value: { + hours: ['3', '4', '5'], + }, + }); + renderer.updateDisabledItems(); + + const hourSpy = jest.fn(); + emitter.on('select:hour', hourSpy); + + dragHandler.setScrollOffset('hours', 3 * WHEEL_ITEM_HEIGHT_PX); + scrollHandler['onColumnSnapped']('hours'); + + expect(hourSpy).toHaveBeenCalled(); + }); + + it('should sync hour header input after disabled hour skip', () => { + core.setDisabledTime({ + value: { + hours: ['3', '4', '5'], + }, + }); + renderer.updateDisabledItems(); + + dragHandler.setScrollOffset('hours', 3 * WHEEL_ITEM_HEIGHT_PX); + scrollHandler['onColumnSnapped']('hours'); + + const hourInput = modal.querySelector<HTMLInputElement>('.tp-ui-hour'); + const value = hourInput?.value; + + expect(value).toBeDefined(); + expect(['03', '04', '05']).not.toContain(value); + }); +}); + +describe('Wheel commitOnScroll after disabled skip', () => { + let element: HTMLDivElement; + let modal: HTMLDivElement; + let core: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + let scrollHandler: WheelScrollHandler; + let eventHandler: WheelEventHandler; + + beforeEach(() => { + jest.useFakeTimers(); + + element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const options = createWheelOptions({ + clock: { + type: '12h', + disabledTime: { minutes: [28, 29, 30, 31, 32] }, + }, + ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, + }); + + core = new CoreState(element, options, INSTANCE_ID); + core.setDisabledTime({ + value: { + minutes: DISABLED_MINUTES, + }, + }); + + modal = buildModalWithDisabledMinutes(INSTANCE_ID); + document.body.appendChild(modal); + mockItemHeights(modal); + + emitter = new EventEmitter<TimepickerEventMap>(); + renderer = new WheelRenderer(core, emitter); + dragHandler = new WheelDragHandler(renderer); + scrollHandler = new WheelScrollHandler(renderer, core); + scrollHandler.setDragHandler(dragHandler); + eventHandler = new WheelEventHandler(emitter, scrollHandler, core); + + renderer.init(); + dragHandler.init(); + scrollHandler.init(); + eventHandler.init(); + }); + + afterEach(() => { + eventHandler.destroy(); + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + jest.useRealTimers(); + }); + + it('should emit confirm event after commitOnScroll delay on disabled skip', () => { + const confirmSpy = jest.fn(); + emitter.on('confirm', confirmSpy); + + dragHandler.setScrollOffset('minutes', 30 * WHEEL_ITEM_HEIGHT_PX); + scrollHandler['onColumnSnapped']('minutes'); + + jest.advanceTimersByTime(500); + + expect(confirmSpy).toHaveBeenCalledWith(expect.objectContaining({ autoCommit: true })); + }); + + it('should write valid time to input element after commitOnScroll', () => { + dragHandler.setScrollOffset('minutes', 30 * WHEEL_ITEM_HEIGHT_PX); + scrollHandler['onColumnSnapped']('minutes'); + + jest.advanceTimersByTime(500); + + const input = element.querySelector<HTMLInputElement>('input'); + + expect(input?.value).toBeDefined(); + expect(input?.value).not.toContain(':30 '); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelHideDisabled.test.ts b/app/tests/unit/managers/plugins/wheel/WheelHideDisabled.test.ts new file mode 100644 index 0000000..b103bb2 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelHideDisabled.test.ts @@ -0,0 +1,526 @@ +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; +import { WheelScrollHandler } from '../../../../../src/managers/plugins/wheel/WheelScrollHandler'; +import { WheelEventHandler } from '../../../../../src/managers/plugins/wheel/WheelEventHandler'; +import { CoreState } from '../../../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { createWheelOptions, WHEEL_ITEM_HEIGHT_PX } from './wheel-test-helpers'; + +function buildHideDisabledModal(instanceId: string): HTMLDivElement { + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', instanceId); + + const hourInput = document.createElement('input'); + hourInput.className = 'tp-ui-hour'; + hourInput.value = '12'; + modal.appendChild(hourInput); + + const minuteInput = document.createElement('input'); + minuteInput.className = 'tp-ui-minutes'; + minuteInput.value = '00'; + modal.appendChild(minuteInput); + + const am = document.createElement('div'); + am.className = 'tp-ui-type-mode tp-ui-am active'; + modal.appendChild(am); + + const pm = document.createElement('div'); + pm.className = 'tp-ui-type-mode tp-ui-pm'; + modal.appendChild(pm); + + const hoursWrapper = document.createElement('div'); + hoursWrapper.className = 'tp-ui-wheel-column-wrapper'; + const hoursCol = document.createElement('div'); + hoursCol.className = 'tp-ui-wheel-column tp-ui-wheel-hours'; + hoursCol.setAttribute('role', 'listbox'); + hoursCol.setAttribute('tabindex', '0'); + + for (let i = 1; i <= 12; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.setAttribute('role', 'option'); + item.textContent = String(i).padStart(2, '0'); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + hoursCol.appendChild(item); + } + + hoursWrapper.appendChild(hoursCol); + modal.appendChild(hoursWrapper); + + const minutesWrapper = document.createElement('div'); + minutesWrapper.className = 'tp-ui-wheel-column-wrapper'; + const minutesCol = document.createElement('div'); + minutesCol.className = 'tp-ui-wheel-column tp-ui-wheel-minutes'; + minutesCol.setAttribute('role', 'listbox'); + minutesCol.setAttribute('tabindex', '0'); + + for (let i = 0; i < 60; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.setAttribute('role', 'option'); + item.textContent = String(i).padStart(2, '0'); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + minutesCol.appendChild(item); + } + + minutesWrapper.appendChild(minutesCol); + modal.appendChild(minutesWrapper); + + const ampmWrapper = document.createElement('div'); + ampmWrapper.className = 'tp-ui-wheel-column-wrapper'; + const ampmCol = document.createElement('div'); + ampmCol.className = 'tp-ui-wheel-column tp-ui-wheel-ampm'; + ampmCol.setAttribute('role', 'listbox'); + ampmCol.setAttribute('tabindex', '0'); + + ['AM', 'PM'].forEach((val) => { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', val); + item.setAttribute('role', 'option'); + item.textContent = val; + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + ampmCol.appendChild(item); + }); + + ampmWrapper.appendChild(ampmCol); + modal.appendChild(ampmWrapper); + + return modal; +} + +const DISABLED_HOURS = ['1', '2', '3', '4', '5', '6']; +const DISABLED_MINUTES = ['0', '15', '30', '45']; +const INSTANCE_ID = 'hide-disabled-test'; + +describe('Wheel + hideDisabledOptions (pointer drag & touch)', () => { + let element: HTMLDivElement; + let modal: HTMLDivElement; + let core: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + let scrollHandler: WheelScrollHandler; + let eventHandler: WheelEventHandler; + + beforeEach(() => { + HTMLElement.prototype.setPointerCapture = jest.fn(); + HTMLElement.prototype.releasePointerCapture = jest.fn(); + + if (typeof globalThis.PointerEvent === 'undefined') { + (globalThis as Record<string, unknown>).PointerEvent = class PointerEvent extends MouseEvent { + readonly pointerId: number; + constructor(type: string, init: PointerEventInit & { pointerId?: number } = {}) { + super(type, init); + this.pointerId = init.pointerId ?? 0; + } + }; + } + + element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const options = createWheelOptions({ + clock: { + type: '12h', + disabledTime: { hours: [1, 2, 3, 4, 5, 6], minutes: [0, 15, 30, 45], hideOptions: true }, + }, + }); + + core = new CoreState(element, options, INSTANCE_ID); + core.setDisabledTime({ + value: { + hours: DISABLED_HOURS, + minutes: DISABLED_MINUTES, + }, + }); + + modal = buildHideDisabledModal(INSTANCE_ID); + document.body.appendChild(modal); + + emitter = new EventEmitter<TimepickerEventMap>(); + renderer = new WheelRenderer(core, emitter); + dragHandler = new WheelDragHandler(renderer); + scrollHandler = new WheelScrollHandler(renderer, core); + scrollHandler.setDragHandler(dragHandler); + eventHandler = new WheelEventHandler(emitter, scrollHandler, core); + + renderer.init(); + dragHandler.init(); + scrollHandler.init(); + eventHandler.init(); + }); + + afterEach(() => { + eventHandler.destroy(); + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + describe('hidden items filtering', () => { + it('should exclude disabled hours from visible items', () => { + const items = renderer.getItems('hours'); + const values = Array.from(items ?? []).map((el) => el.getAttribute('data-value')); + + DISABLED_HOURS.forEach((h) => { + expect(values).not.toContain(String(parseInt(h, 10)).padStart(2, '0')); + }); + }); + + it('should keep enabled hours 07–12 visible', () => { + const items = renderer.getItems('hours'); + const values = Array.from(items ?? []).map((el) => el.getAttribute('data-value')); + + ['07', '08', '09', '10', '11', '12'].forEach((h) => { + expect(values).toContain(h); + }); + }); + + it('should report correct item count for hours (6 visible out of 12)', () => { + expect(renderer.getItemCount('hours')).toBe(6); + }); + + it('should exclude disabled minutes from visible items', () => { + const items = renderer.getItems('minutes'); + const values = Array.from(items ?? []).map((el) => el.getAttribute('data-value')); + + expect(values).not.toContain('00'); + expect(values).not.toContain('15'); + expect(values).not.toContain('30'); + expect(values).not.toContain('45'); + }); + + it('should report correct item count for minutes (56 visible out of 60)', () => { + expect(renderer.getItemCount('minutes')).toBe(56); + }); + + it('should measure item height from a visible item, not a hidden one', () => { + const hoursCol = renderer.getColumnElement('hours'); + const firstVisible = hoursCol?.querySelector<HTMLDivElement>('.tp-ui-wheel-item:not(.is-hidden)'); + + if (firstVisible) { + jest.spyOn(firstVisible, 'getBoundingClientRect').mockReturnValue({ + height: WHEEL_ITEM_HEIGHT_PX, + width: 80, + x: 0, + y: 0, + top: 0, + left: 0, + bottom: WHEEL_ITEM_HEIGHT_PX, + right: 80, + toJSON: () => ({}), + }); + } + + renderer.invalidateItemCache(); + const height = renderer.getItemHeight(); + + expect(height).toBe(WHEEL_ITEM_HEIGHT_PX); + }); + }); + + describe('pointer drag on filtered hours column', () => { + it('should add is-dragging class on pointerdown', () => { + const hoursCol = renderer.getColumnElement('hours'); + + hoursCol?.dispatchEvent(new PointerEvent('pointerdown', { clientY: 200, pointerId: 1, bubbles: true })); + + expect(hoursCol?.classList.contains('is-dragging')).toBe(true); + }); + + it('should remove is-dragging class on pointerup', () => { + const hoursCol = renderer.getColumnElement('hours'); + + hoursCol?.dispatchEvent(new PointerEvent('pointerdown', { clientY: 200, pointerId: 1, bubbles: true })); + + document.dispatchEvent(new PointerEvent('pointerup', { clientY: 200, pointerId: 1, bubbles: true })); + + expect(hoursCol?.classList.contains('is-dragging')).toBe(false); + }); + + it('should invoke snap callback after pointer drag completes', () => { + const snapSpy = jest.fn(); + dragHandler.setSnapCallback(snapSpy); + + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + let rafCallbacks: FrameRequestCallback[] = []; + jest.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((cb) => { + rafCallbacks.push(cb); + return rafCallbacks.length; + }); + + let timeCounter = 0; + jest.spyOn(performance, 'now').mockImplementation(() => { + timeCounter += 200; + return timeCounter; + }); + + const hoursCol = renderer.getColumnElement('hours'); + + hoursCol?.dispatchEvent(new PointerEvent('pointerdown', { clientY: 200, pointerId: 1, bubbles: true })); + + document.dispatchEvent(new PointerEvent('pointermove', { clientY: 190, pointerId: 1, bubbles: true })); + + document.dispatchEvent(new PointerEvent('pointerup', { clientY: 190, pointerId: 1, bubbles: true })); + + while (rafCallbacks.length > 0) { + const batch = [...rafCallbacks]; + rafCallbacks = []; + batch.forEach((cb) => cb(timeCounter)); + } + + expect(snapSpy).toHaveBeenCalledWith('hours'); + }); + + it('should emit scroll start on pointerdown', () => { + const startSpy = jest.fn(); + dragHandler.setScrollStartCallback(startSpy); + + const hoursCol = renderer.getColumnElement('hours'); + + hoursCol?.dispatchEvent(new PointerEvent('pointerdown', { clientY: 200, pointerId: 1, bubbles: true })); + + expect(startSpy).toHaveBeenCalledWith('hours'); + }); + + it('should update scrollTop during pointermove', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) throw new Error('hours column not found'); + + hoursCol.scrollTop = 0; + + hoursCol.dispatchEvent(new PointerEvent('pointerdown', { clientY: 200, pointerId: 1, bubbles: true })); + + document.dispatchEvent(new PointerEvent('pointermove', { clientY: 160, pointerId: 1, bubbles: true })); + + expect(hoursCol.scrollTop).toBeGreaterThanOrEqual(0); + }); + }); + + describe('pointer drag on filtered minutes column', () => { + it('should apply is-dragging and release on full drag cycle', () => { + const minutesCol = renderer.getColumnElement('minutes'); + + minutesCol?.dispatchEvent( + new PointerEvent('pointerdown', { clientY: 300, pointerId: 2, bubbles: true }), + ); + + expect(minutesCol?.classList.contains('is-dragging')).toBe(true); + + document.dispatchEvent(new PointerEvent('pointermove', { clientY: 260, pointerId: 2, bubbles: true })); + + document.dispatchEvent(new PointerEvent('pointerup', { clientY: 260, pointerId: 2, bubbles: true })); + + expect(minutesCol?.classList.contains('is-dragging')).toBe(false); + }); + }); + + describe('wheel (mouse scroll) on filtered columns', () => { + it('should prevent default on wheel event for hours', () => { + const hoursCol = renderer.getColumnElement('hours'); + const event = new WheelEvent('wheel', { + deltaY: 50, + bubbles: true, + cancelable: true, + }); + const spy = jest.spyOn(event, 'preventDefault'); + + hoursCol?.dispatchEvent(event); + + expect(spy).toHaveBeenCalled(); + }); + + it('should prevent default on wheel event for minutes', () => { + const minutesCol = renderer.getColumnElement('minutes'); + const event = new WheelEvent('wheel', { + deltaY: -40, + bubbles: true, + cancelable: true, + }); + const spy = jest.spyOn(event, 'preventDefault'); + + minutesCol?.dispatchEvent(event); + + expect(spy).toHaveBeenCalled(); + }); + }); + + describe('scrollToValue with hidden items', () => { + it('should scroll to a visible hour value', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + scrollHandler.scrollToValue('hours', '09'); + const value = scrollHandler.getSelectedValue('hours'); + + expect(value).toBe('09'); + }); + + it('should not scroll to a hidden hour value', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + scrollHandler.scrollToValue('hours', '03'); + const value = scrollHandler.getSelectedValue('hours'); + + expect(value).not.toBe('03'); + }); + + it('should scroll to a visible minute value', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + scrollHandler.scrollToValue('minutes', '22'); + const value = scrollHandler.getSelectedValue('minutes'); + + expect(value).toBe('22'); + }); + + it('should not scroll to a hidden minute value', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + scrollHandler.scrollToValue('minutes', '15'); + const value = scrollHandler.getSelectedValue('minutes'); + + expect(value).not.toBe('15'); + }); + }); + + describe('getCurrentSelection with hidden items', () => { + it('should return only visible values in selection', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + scrollHandler.scrollToValue('hours', '10'); + scrollHandler.scrollToValue('minutes', '22'); + + const selection = scrollHandler.getCurrentSelection(); + + expect(selection.hour).toBe('10'); + expect(selection.minute).toBe('22'); + expect(selection.ampm).toBeDefined(); + }); + }); + + describe('event emission after drag on filtered columns', () => { + it('should emit select:hour with a visible hour after scroll end', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + const capturedRef: { callback: ((col: string, val: string) => void) | null } = { callback: null }; + + jest.spyOn(scrollHandler, 'setScrollEndCallback').mockImplementation((cb) => { + capturedRef.callback = cb as (col: string, val: string) => void; + }); + jest.spyOn(scrollHandler, 'getCurrentSelection').mockReturnValue({ + hour: '09', + minute: '22', + ampm: 'AM', + }); + + eventHandler.destroy(); + eventHandler = new WheelEventHandler(emitter, scrollHandler, core); + eventHandler.init(); + + capturedRef.callback?.('hours', '09'); + + expect(emitSpy).toHaveBeenCalledWith('select:hour', { hour: '09' }); + expect(emitSpy).toHaveBeenCalledWith('update', { + hour: '09', + minutes: '22', + type: 'AM', + }); + }); + + it('should emit select:minute with a visible minute after scroll end', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + const capturedRef: { callback: ((col: string, val: string) => void) | null } = { callback: null }; + + jest.spyOn(scrollHandler, 'setScrollEndCallback').mockImplementation((cb) => { + capturedRef.callback = cb as (col: string, val: string) => void; + }); + jest.spyOn(scrollHandler, 'getCurrentSelection').mockReturnValue({ + hour: '10', + minute: '33', + ampm: 'PM', + }); + + eventHandler.destroy(); + eventHandler = new WheelEventHandler(emitter, scrollHandler, core); + eventHandler.init(); + + capturedRef.callback?.('minutes', '33'); + + expect(emitSpy).toHaveBeenCalledWith('select:minute', { minutes: '33' }); + expect(emitSpy).toHaveBeenCalledWith('update', { + hour: '10', + minutes: '33', + type: 'PM', + }); + }); + }); + + describe('maxOffset respects hidden item count', () => { + it('should compute maxOffset based on visible items only', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + const maxOffset = dragHandler.getMaxOffset('hours'); + + expect(maxOffset).toBe((6 - 1) * WHEEL_ITEM_HEIGHT_PX); + }); + + it('should compute maxOffset for minutes based on visible count', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + const maxOffset = dragHandler.getMaxOffset('minutes'); + + expect(maxOffset).toBe((56 - 1) * WHEEL_ITEM_HEIGHT_PX); + }); + }); + + describe('multi-column drag sequence', () => { + it('should handle dragging hours then minutes without interference', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + const hoursCol = renderer.getColumnElement('hours'); + const minutesCol = renderer.getColumnElement('minutes'); + + hoursCol?.dispatchEvent(new PointerEvent('pointerdown', { clientY: 200, pointerId: 1, bubbles: true })); + document.dispatchEvent(new PointerEvent('pointerup', { clientY: 180, pointerId: 1, bubbles: true })); + + expect(hoursCol?.classList.contains('is-dragging')).toBe(false); + + minutesCol?.dispatchEvent( + new PointerEvent('pointerdown', { clientY: 300, pointerId: 2, bubbles: true }), + ); + + expect(minutesCol?.classList.contains('is-dragging')).toBe(true); + + document.dispatchEvent(new PointerEvent('pointerup', { clientY: 270, pointerId: 2, bubbles: true })); + + expect(minutesCol?.classList.contains('is-dragging')).toBe(false); + }); + }); + + describe('ampm column unaffected by hideDisabledOptions', () => { + it('should still have 2 items in ampm column', () => { + expect(renderer.getItemCount('ampm')).toBe(2); + }); + + it('should allow drag on ampm column', () => { + const ampmCol = renderer.getColumnElement('ampm'); + + ampmCol?.dispatchEvent(new PointerEvent('pointerdown', { clientY: 100, pointerId: 3, bubbles: true })); + + expect(ampmCol?.classList.contains('is-dragging')).toBe(true); + + document.dispatchEvent(new PointerEvent('pointerup', { clientY: 80, pointerId: 3, bubbles: true })); + + expect(ampmCol?.classList.contains('is-dragging')).toBe(false); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelIntervalDisabled.test.ts b/app/tests/unit/managers/plugins/wheel/WheelIntervalDisabled.test.ts new file mode 100644 index 0000000..3e24618 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelIntervalDisabled.test.ts @@ -0,0 +1,393 @@ +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; +import { WheelScrollHandler } from '../../../../../src/managers/plugins/wheel/WheelScrollHandler'; +import { WheelEventHandler } from '../../../../../src/managers/plugins/wheel/WheelEventHandler'; +import { CoreState } from '../../../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { createWheelOptions, WHEEL_ITEM_HEIGHT_PX } from './wheel-test-helpers'; + +function buildIntervalModal(instanceId: string, clockType: '12h' | '24h'): HTMLDivElement { + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', instanceId); + + const hourInput = document.createElement('input'); + hourInput.className = 'tp-ui-hour'; + hourInput.value = '12'; + modal.appendChild(hourInput); + + const minuteInput = document.createElement('input'); + minuteInput.className = 'tp-ui-minutes'; + minuteInput.value = '00'; + modal.appendChild(minuteInput); + + if (clockType === '12h') { + const am = document.createElement('div'); + am.className = 'tp-ui-type-mode tp-ui-am active'; + modal.appendChild(am); + + const pm = document.createElement('div'); + pm.className = 'tp-ui-type-mode tp-ui-pm'; + modal.appendChild(pm); + } + + const container = document.createElement('div'); + container.className = 'tp-ui-wheel-container'; + + const start = clockType === '12h' ? 1 : 0; + const end = clockType === '12h' ? 12 : 23; + + const hoursWrapper = document.createElement('div'); + hoursWrapper.className = 'tp-ui-wheel-column-wrapper'; + const hoursCol = document.createElement('div'); + hoursCol.className = 'tp-ui-wheel-column tp-ui-wheel-hours'; + hoursCol.setAttribute('role', 'listbox'); + hoursCol.setAttribute('tabindex', '0'); + for (let i = start; i <= end; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.setAttribute('role', 'option'); + item.textContent = String(i).padStart(2, '0'); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + hoursCol.appendChild(item); + } + hoursWrapper.appendChild(hoursCol); + container.appendChild(hoursWrapper); + + const minutesWrapper = document.createElement('div'); + minutesWrapper.className = 'tp-ui-wheel-column-wrapper'; + const minutesCol = document.createElement('div'); + minutesCol.className = 'tp-ui-wheel-column tp-ui-wheel-minutes'; + minutesCol.setAttribute('role', 'listbox'); + minutesCol.setAttribute('tabindex', '0'); + for (let i = 0; i < 60; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', String(i).padStart(2, '0')); + item.setAttribute('role', 'option'); + item.textContent = String(i).padStart(2, '0'); + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + minutesCol.appendChild(item); + } + minutesWrapper.appendChild(minutesCol); + container.appendChild(minutesWrapper); + + if (clockType === '12h') { + const ampmWrapper = document.createElement('div'); + ampmWrapper.className = 'tp-ui-wheel-column-wrapper'; + const ampmCol = document.createElement('div'); + ampmCol.className = 'tp-ui-wheel-column tp-ui-wheel-ampm'; + ampmCol.setAttribute('role', 'listbox'); + ampmCol.setAttribute('tabindex', '0'); + ['AM', 'PM'].forEach((val) => { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + item.setAttribute('data-value', val); + item.setAttribute('role', 'option'); + item.textContent = val; + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + ampmCol.appendChild(item); + }); + ampmWrapper.appendChild(ampmCol); + container.appendChild(ampmWrapper); + } + + modal.appendChild(container); + return modal; +} + +const INSTANCE_ID = 'interval-test'; + +describe('Wheel + interval disabled time (12h)', () => { + let element: HTMLDivElement; + let modal: HTMLDivElement; + let core: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + let scrollHandler: WheelScrollHandler; + let eventHandler: WheelEventHandler; + + beforeEach(() => { + element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const options = createWheelOptions({ + clock: { + type: '12h', + disabledTime: { interval: '02:00 AM-05:30 AM' }, + }, + }); + + core = new CoreState(element, options, INSTANCE_ID); + core.setDisabledTime({ + value: { + isInterval: true, + clockType: '12h', + intervals: ['02:00 AM-05:30 AM'], + }, + }); + + modal = buildIntervalModal(INSTANCE_ID, '12h'); + document.body.appendChild(modal); + + emitter = new EventEmitter<TimepickerEventMap>(); + renderer = new WheelRenderer(core, emitter); + dragHandler = new WheelDragHandler(renderer); + scrollHandler = new WheelScrollHandler(renderer, core); + scrollHandler.setDragHandler(dragHandler); + eventHandler = new WheelEventHandler(emitter, scrollHandler, core); + + renderer.init(); + dragHandler.init(); + scrollHandler.init(); + eventHandler.init(); + }); + + afterEach(() => { + eventHandler.destroy(); + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + it('should mark hours 02-05 as disabled when AM is active', () => { + const hoursCol = renderer.getColumnElement('hours'); + const items = hoursCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + + const disabledValues: string[] = []; + items?.forEach((item) => { + if (item.classList.contains('is-disabled')) { + disabledValues.push(item.getAttribute('data-value') ?? ''); + } + }); + + expect(disabledValues).toContain('03'); + expect(disabledValues).toContain('04'); + expect(disabledValues).not.toContain('01'); + expect(disabledValues).not.toContain('06'); + expect(disabledValues).not.toContain('12'); + }); + + it('should mark minutes in interval range as disabled for hour 02', () => { + const hourInput = core.getHour(); + if (hourInput) hourInput.value = '02'; + + renderer.updateDisabledItems(); + + const minutesCol = renderer.getColumnElement('minutes'); + const items = minutesCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + + const minute00 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '00'); + const minute30 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '30'); + const minute59 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '59'); + + expect(minute00?.classList.contains('is-disabled')).toBe(true); + expect(minute30?.classList.contains('is-disabled')).toBe(true); + expect(minute59?.classList.contains('is-disabled')).toBe(true); + }); + + it('should NOT mark any hour as disabled when PM is active', () => { + const am = modal.querySelector('.tp-ui-am'); + const pm = modal.querySelector('.tp-ui-pm'); + am?.classList.remove('active'); + pm?.classList.add('active'); + + renderer.updateDisabledItems(); + + const hoursCol = renderer.getColumnElement('hours'); + const items = hoursCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + + const disabledCount = Array.from(items ?? []).filter((i) => i.classList.contains('is-disabled')).length; + + expect(disabledCount).toBe(0); + }); + + it('should re-evaluate disabled items on AM/PM DOM change', () => { + const am = modal.querySelector('.tp-ui-am'); + const pm = modal.querySelector('.tp-ui-pm'); + am?.classList.remove('active'); + pm?.classList.add('active'); + + renderer.updateDisabledItems(); + + const hoursCol = renderer.getColumnElement('hours'); + const items = hoursCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + const disabledCount = Array.from(items ?? []).filter((i) => i.classList.contains('is-disabled')).length; + + expect(disabledCount).toBe(0); + }); + + it('should update disabled minutes when hour changes', () => { + const hourInput = core.getHour(); + if (hourInput) hourInput.value = '06'; + + renderer.updateDisabledItems(); + + const minutesCol = renderer.getColumnElement('minutes'); + const items = minutesCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + const disabledCount = Array.from(items ?? []).filter((i) => i.classList.contains('is-disabled')).length; + + expect(disabledCount).toBe(0); + }); + + it('should mark minutes as disabled for boundary hour 05 up to :30', () => { + const hourInput = core.getHour(); + if (hourInput) hourInput.value = '05'; + + renderer.updateDisabledItems(); + + const minutesCol = renderer.getColumnElement('minutes'); + const items = minutesCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + + const minute00 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '00'); + const minute30 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '30'); + const minute31 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '31'); + + expect(minute00?.classList.contains('is-disabled')).toBe(true); + expect(minute30?.classList.contains('is-disabled')).toBe(true); + expect(minute31?.classList.contains('is-disabled')).toBe(false); + }); +}); + +describe('Wheel + interval disabled time (24h)', () => { + let element: HTMLDivElement; + let modal: HTMLDivElement; + let core: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let renderer: WheelRenderer; + + beforeEach(() => { + element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const options = createWheelOptions({ + clock: { + type: '24h', + disabledTime: { interval: '09:00-12:30' }, + }, + }); + + core = new CoreState(element, options, INSTANCE_ID); + core.setDisabledTime({ + value: { + isInterval: true, + clockType: '24h', + intervals: ['09:00-12:30'], + }, + }); + + modal = buildIntervalModal(INSTANCE_ID, '24h'); + document.body.appendChild(modal); + + emitter = new EventEmitter<TimepickerEventMap>(); + renderer = new WheelRenderer(core, emitter); + renderer.init(); + }); + + afterEach(() => { + renderer.destroy(); + document.body.innerHTML = ''; + }); + + it('should mark hours 10-11 as disabled (fully inside interval)', () => { + const hoursCol = renderer.getColumnElement('hours'); + const items = hoursCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + + const item10 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '10'); + const item11 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '11'); + + expect(item10?.classList.contains('is-disabled')).toBe(true); + expect(item11?.classList.contains('is-disabled')).toBe(true); + }); + + it('should NOT disable hour 08 (before interval)', () => { + const hoursCol = renderer.getColumnElement('hours'); + const items = hoursCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + + const item08 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '08'); + + expect(item08?.classList.contains('is-disabled')).toBe(false); + }); + + it('should NOT disable hour 13 (after interval)', () => { + const hoursCol = renderer.getColumnElement('hours'); + const items = hoursCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + + const item13 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '13'); + + expect(item13?.classList.contains('is-disabled')).toBe(false); + }); +}); + +describe('Wheel + multiple intervals', () => { + let element: HTMLDivElement; + let modal: HTMLDivElement; + let core: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let renderer: WheelRenderer; + + beforeEach(() => { + element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const options = createWheelOptions({ + clock: { + type: '12h', + disabledTime: { interval: ['01:00 AM-03:00 AM', '06:00 PM-08:00 PM'] }, + }, + }); + + core = new CoreState(element, options, INSTANCE_ID); + core.setDisabledTime({ + value: { + isInterval: true, + clockType: '12h', + intervals: ['01:00 AM-03:00 AM', '06:00 PM-08:00 PM'], + }, + }); + + modal = buildIntervalModal(INSTANCE_ID, '12h'); + document.body.appendChild(modal); + + emitter = new EventEmitter<TimepickerEventMap>(); + renderer = new WheelRenderer(core, emitter); + renderer.init(); + }); + + afterEach(() => { + renderer.destroy(); + document.body.innerHTML = ''; + }); + + it('should disable hours in AM interval when AM active', () => { + const hoursCol = renderer.getColumnElement('hours'); + const items = hoursCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + + const item02 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '02'); + + expect(item02?.classList.contains('is-disabled')).toBe(true); + }); + + it('should disable hours in PM interval when PM active', () => { + const am = modal.querySelector('.tp-ui-am'); + const pm = modal.querySelector('.tp-ui-pm'); + am?.classList.remove('active'); + pm?.classList.add('active'); + + renderer.updateDisabledItems(); + + const hoursCol = renderer.getColumnElement('hours'); + const items = hoursCol?.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); + + const item07 = Array.from(items ?? []).find((i) => i.getAttribute('data-value') === '07'); + + expect(item07?.classList.contains('is-disabled')).toBe(true); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelRenderer.edge.test.ts b/app/tests/unit/managers/plugins/wheel/WheelRenderer.edge.test.ts new file mode 100644 index 0000000..a3ed603 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelRenderer.edge.test.ts @@ -0,0 +1,135 @@ +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { setupWheelTestContext, createWheelOptions, type WheelTestContext } from './wheel-test-helpers'; +import { CoreState } from '../../../../../src/timepicker/CoreState'; + +describe('WheelRenderer edge cases', () => { + let ctx: WheelTestContext; + let renderer: WheelRenderer; + + beforeEach(() => { + ctx = setupWheelTestContext('12h'); + renderer = new WheelRenderer(ctx.core, ctx.emitter); + }); + + afterEach(() => { + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + describe('hideDisabledOptions + cache invalidation', () => { + it('should exclude hidden items from getItems after updateDisabledItems', () => { + const hideOpts = createWheelOptions({ + clock: { type: '12h', disabledTime: { hideOptions: true } }, + }); + const hideCore = new CoreState(ctx.element, hideOpts, ctx.core.instanceId); + const hideRenderer = new WheelRenderer(hideCore, ctx.emitter); + + hideCore.setDisabledTime({ value: { hours: ['3', '5', '7'] } }); + hideRenderer.init(); + + const items = hideRenderer.getItems('hours'); + const values = Array.from(items ?? []).map((el) => el.getAttribute('data-value')); + expect(values).not.toContain('03'); + expect(values).not.toContain('05'); + expect(values).not.toContain('07'); + + hideRenderer.destroy(); + }); + + it('should refresh items cache after invalidateItemCache', () => { + renderer.init(); + const before = renderer.getItems('hours'); + renderer.invalidateItemCache(); + const after = renderer.getItems('hours'); + + expect(before).not.toBe(after); + expect(before?.length).toBe(after?.length); + }); + }); + + describe('double init()', () => { + it('should not duplicate column references after calling init twice', () => { + renderer.init(); + const first = renderer.getColumnElement('hours'); + + renderer.init(); + const second = renderer.getColumnElement('hours'); + + expect(first).toBe(second); + }); + + it('should reset item cache on re-init', () => { + renderer.init(); + const beforeItems = renderer.getItems('hours'); + + renderer.init(); + const afterItems = renderer.getItems('hours'); + + expect(beforeItems).not.toBe(afterItems); + }); + }); + + describe('getItemHeight() caching', () => { + it('should return 0 when column has no items', () => { + const element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const emptyOpts = createWheelOptions({ clock: { type: '12h' } }); + const emptyCore = new CoreState(element, emptyOpts, 'empty-height-test'); + + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', 'empty-height-test'); + const col = document.createElement('div'); + col.className = 'tp-ui-wheel-column tp-ui-wheel-hours'; + modal.appendChild(col); + document.body.appendChild(modal); + + const emitter = new EventEmitter<TimepickerEventMap>(); + const emptyRenderer = new WheelRenderer(emptyCore, emitter); + emptyRenderer.init(); + + expect(emptyRenderer.getItemHeight()).toBe(0); + + emptyRenderer.destroy(); + }); + }); + + describe('updateDisabledItems with both hours and minutes disabled', () => { + it('should apply is-disabled class to items in both columns simultaneously', () => { + ctx.core.setDisabledTime({ + value: { hours: ['1', '2'], minutes: ['10', '20'] }, + }); + + renderer.init(); + renderer.updateDisabledItems(); + + const hoursCol = renderer.getColumnElement('hours'); + const minutesCol = renderer.getColumnElement('minutes'); + + expect(hoursCol?.querySelector('[data-value="01"]')?.classList.contains('is-disabled')).toBe(true); + expect(hoursCol?.querySelector('[data-value="02"]')?.classList.contains('is-disabled')).toBe(true); + expect(minutesCol?.querySelector('[data-value="10"]')?.classList.contains('is-disabled')).toBe(true); + expect(minutesCol?.querySelector('[data-value="20"]')?.classList.contains('is-disabled')).toBe(true); + expect(minutesCol?.querySelector('[data-value="30"]')?.classList.contains('is-disabled')).toBe(false); + }); + }); + + describe('getItemCount for non-existent column', () => { + it('should return 0 for ampm column in 24h mode', () => { + renderer.destroy(); + document.body.innerHTML = ''; + + const ctx24 = setupWheelTestContext('24h', 'count-24h'); + const renderer24 = new WheelRenderer(ctx24.core, ctx24.emitter); + renderer24.init(); + + expect(renderer24.getItemCount('ampm')).toBe(0); + + renderer24.destroy(); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.edge.test.ts b/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.edge.test.ts new file mode 100644 index 0000000..e94e130 --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.edge.test.ts @@ -0,0 +1,126 @@ +import { WheelScrollHandler } from '../../../../../src/managers/plugins/wheel/WheelScrollHandler'; +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; +import { setupWheelTestContext, WHEEL_ITEM_HEIGHT_PX, type WheelTestContext } from './wheel-test-helpers'; + +describe('WheelScrollHandler edge cases', () => { + let ctx: WheelTestContext; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + let scrollHandler: WheelScrollHandler; + + beforeEach(() => { + ctx = setupWheelTestContext('12h'); + renderer = new WheelRenderer(ctx.core, ctx.emitter); + dragHandler = new WheelDragHandler(renderer); + scrollHandler = new WheelScrollHandler(renderer, ctx.core); + scrollHandler.setDragHandler(dragHandler); + + renderer.init(); + dragHandler.init(); + scrollHandler.init(); + }); + + afterEach(() => { + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + describe('scrollToNextValid() with all items disabled', () => { + it('should not infinite-loop when every item in column is disabled', () => { + const hoursCol = renderer.getColumnElement('hours'); + if (!hoursCol) return; + + const items = hoursCol.querySelectorAll('.tp-ui-wheel-item'); + items.forEach((item) => item.classList.add('is-disabled')); + + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + expect(() => scrollHandler.scrollToValue('hours', '01')).not.toThrow(); + }); + }); + + describe('getSelectedValue() with out-of-bounds offset', () => { + it('should return null when scroll offset yields negative index', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + jest.spyOn(dragHandler, 'getScrollOffset').mockReturnValue(-999); + + const value = scrollHandler.getSelectedValue('hours'); + expect(value).toBeNull(); + }); + + it('should return null when scroll offset yields index beyond item count', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + jest.spyOn(dragHandler, 'getScrollOffset').mockReturnValue(99999); + + const value = scrollHandler.getSelectedValue('hours'); + expect(value).toBeNull(); + }); + }); + + describe('getSelectedValue() with zero item height', () => { + it('should return null when item height is 0', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(0); + + const value = scrollHandler.getSelectedValue('hours'); + expect(value).toBeNull(); + }); + }); + + describe('scrollToValue() with missing drag handler', () => { + it('should not throw when drag handler is null after destroy', () => { + scrollHandler.destroy(); + + expect(() => scrollHandler.scrollToValue('hours', '05')).not.toThrow(); + }); + }); + + describe('getCurrentSelection() defaults', () => { + it('should return 12 and 00 as defaults when no items are selectable', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(0); + + const selection = scrollHandler.getCurrentSelection(); + expect(selection.hour).toBe('12'); + expect(selection.minute).toBe('00'); + }); + }); + + describe('emitScrollStart()', () => { + it('should call scroll start callback when set', () => { + const startCb = jest.fn(); + scrollHandler.setScrollStartCallback(startCb); + + scrollHandler.emitScrollStart('hours'); + + expect(startCb).toHaveBeenCalledWith('hours'); + }); + + it('should not throw when no callback is set', () => { + scrollHandler.setScrollStartCallback(null); + + expect(() => scrollHandler.emitScrollStart('minutes')).not.toThrow(); + }); + }); + + describe('updateVisualClasses() with empty column', () => { + it('should not throw when column has no items', () => { + const emptyCtx = setupWheelTestContext('24h', 'empty-col-test'); + const emptyRenderer = new WheelRenderer(emptyCtx.core, emptyCtx.emitter); + const emptyDrag = new WheelDragHandler(emptyRenderer); + const emptyScroll = new WheelScrollHandler(emptyRenderer, emptyCtx.core); + emptyScroll.setDragHandler(emptyDrag); + + emptyRenderer.init(); + + expect(() => emptyScroll.updateVisualClasses('ampm')).not.toThrow(); + + emptyScroll.destroy(); + emptyDrag.destroy(); + emptyRenderer.destroy(); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.test.ts b/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.test.ts index a857955..8ac3c21 100644 --- a/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.test.ts +++ b/app/tests/unit/managers/plugins/wheel/WheelScrollHandler.test.ts @@ -1,7 +1,14 @@ import { WheelScrollHandler } from '../../../../../src/managers/plugins/wheel/WheelScrollHandler'; import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; -import { setupWheelTestContext, WHEEL_ITEM_HEIGHT_PX, type WheelTestContext } from './wheel-test-helpers'; +import { CoreState } from '../../../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { + setupWheelTestContext, + createWheelOptions, + WHEEL_ITEM_HEIGHT_PX, + type WheelTestContext, +} from './wheel-test-helpers'; describe('WheelScrollHandler', () => { let ctx: WheelTestContext; @@ -91,6 +98,129 @@ describe('WheelScrollHandler', () => { dragHandler24.destroy(); renderer24.destroy(); }); + + it('should fall back to AM header button when ampm wheel column is absent', () => { + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + + const element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const options = createWheelOptions({ clock: { type: '12h' } }); + const core = new CoreState(element, options, 'test-no-ampm-col'); + + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', 'test-no-ampm-col'); + + const am = document.createElement('div'); + am.className = 'tp-ui-type-mode tp-ui-am active'; + modal.appendChild(am); + + const pm = document.createElement('div'); + pm.className = 'tp-ui-type-mode tp-ui-pm'; + modal.appendChild(pm); + + const hoursWrapper = document.createElement('div'); + hoursWrapper.className = 'tp-ui-wheel-column-wrapper'; + const hoursCol = document.createElement('div'); + hoursCol.className = 'tp-ui-wheel-column tp-ui-wheel-hours'; + hoursWrapper.appendChild(hoursCol); + modal.appendChild(hoursWrapper); + + const minutesWrapper = document.createElement('div'); + minutesWrapper.className = 'tp-ui-wheel-column-wrapper'; + const minutesCol = document.createElement('div'); + minutesCol.className = 'tp-ui-wheel-column tp-ui-wheel-minutes'; + minutesWrapper.appendChild(minutesCol); + modal.appendChild(minutesWrapper); + + document.body.appendChild(modal); + + const emitter2 = new EventEmitter<TimepickerEventMap>(); + const renderer2 = new WheelRenderer(core, emitter2); + const dragHandler2 = new WheelDragHandler(renderer2); + const scrollHandler2 = new WheelScrollHandler(renderer2, core); + scrollHandler2.setDragHandler(dragHandler2); + + renderer2.init(); + dragHandler2.init(); + scrollHandler2.init(); + + const selection = scrollHandler2.getCurrentSelection(); + expect(selection.ampm).toBe('AM'); + + scrollHandler2.destroy(); + dragHandler2.destroy(); + renderer2.destroy(); + }); + + it('should fall back to PM when PM header button is active and ampm column is absent', () => { + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + + const element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + + const options = createWheelOptions({ clock: { type: '12h' } }); + const core = new CoreState(element, options, 'test-no-ampm-pm'); + + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', 'test-no-ampm-pm'); + + const am = document.createElement('div'); + am.className = 'tp-ui-type-mode tp-ui-am'; + modal.appendChild(am); + + const pm = document.createElement('div'); + pm.className = 'tp-ui-type-mode tp-ui-pm active'; + modal.appendChild(pm); + + const hoursWrapper = document.createElement('div'); + hoursWrapper.className = 'tp-ui-wheel-column-wrapper'; + const hoursCol = document.createElement('div'); + hoursCol.className = 'tp-ui-wheel-column tp-ui-wheel-hours'; + hoursWrapper.appendChild(hoursCol); + modal.appendChild(hoursWrapper); + + const minutesWrapper = document.createElement('div'); + minutesWrapper.className = 'tp-ui-wheel-column-wrapper'; + const minutesCol = document.createElement('div'); + minutesCol.className = 'tp-ui-wheel-column tp-ui-wheel-minutes'; + minutesWrapper.appendChild(minutesCol); + modal.appendChild(minutesWrapper); + + document.body.appendChild(modal); + + const emitter2 = new EventEmitter<TimepickerEventMap>(); + const renderer2 = new WheelRenderer(core, emitter2); + const dragHandler2 = new WheelDragHandler(renderer2); + const scrollHandler2 = new WheelScrollHandler(renderer2, core); + scrollHandler2.setDragHandler(dragHandler2); + + renderer2.init(); + dragHandler2.init(); + scrollHandler2.init(); + + const selection = scrollHandler2.getCurrentSelection(); + expect(selection.ampm).toBe('PM'); + + scrollHandler2.destroy(); + dragHandler2.destroy(); + renderer2.destroy(); + }); + + it('should read ampm from wheel column when it exists in 12h mode', () => { + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + scrollHandler.scrollToValue('ampm', 'PM'); + const selection = scrollHandler.getCurrentSelection(); + expect(selection.ampm).toBe('PM'); + }); }); describe('updateVisualClasses()', () => { diff --git a/app/tests/unit/timepicker/CoreState.edge.test.ts b/app/tests/unit/timepicker/CoreState.edge.test.ts new file mode 100644 index 0000000..34f4141 --- /dev/null +++ b/app/tests/unit/timepicker/CoreState.edge.test.ts @@ -0,0 +1,147 @@ +import { CoreState } from '../../../src/timepicker/CoreState'; +import { DEFAULT_OPTIONS } from '../../../src/utils/options/defaults'; + +describe('CoreState edge cases', () => { + let element: HTMLDivElement; + let coreState: CoreState; + + beforeEach(() => { + element = document.createElement('div'); + element.innerHTML = '<input type="text" />'; + document.body.appendChild(element); + coreState = new CoreState(element, DEFAULT_OPTIONS, 'edge-test-id'); + }); + + afterEach(() => { + document.body.innerHTML = ''; + }); + + describe('updateOptions() partial merging', () => { + it('should preserve unrelated option groups when updating one group', () => { + coreState.updateOptions({ clock: { type: '24h' } }); + + expect(coreState.options.clock.type).toBe('24h'); + expect(coreState.options.ui.mode).toBe('clock'); + expect(coreState.options.labels.am).toBe('AM'); + expect(coreState.options.behavior.focusTrap).toBe(true); + }); + + it('should handle empty update without corrupting state', () => { + const before = { ...coreState.options }; + coreState.updateOptions({}); + + expect(coreState.options.clock.type).toBe(before.clock.type); + expect(coreState.options.ui.mode).toBe(before.ui.mode); + }); + }); + + describe('reset() preserves identity', () => { + it('should preserve element reference after reset', () => { + coreState.setIsInitialized(true); + coreState.setDegreesHours(90); + coreState.reset(); + + expect(coreState.element).toBe(element); + expect(coreState.instanceId).toBe('edge-test-id'); + }); + + it('should preserve options after reset', () => { + coreState.updateOptions({ clock: { type: '24h' } }); + coreState.reset(); + + expect(coreState.options.clock.type).toBe('24h'); + }); + }); + + describe('state immutability', () => { + it('should not leak mutable internal state through options getter', () => { + const optionsRef1 = coreState.options; + coreState.updateOptions({ clock: { type: '24h' } }); + const optionsRef2 = coreState.options; + + expect(optionsRef1).not.toBe(optionsRef2); + expect(optionsRef1.clock.type).toBe('12h'); + expect(optionsRef2.clock.type).toBe('24h'); + }); + }); + + describe('getInput() with nested elements', () => { + it('should return first input even when multiple inputs exist', () => { + element.innerHTML = '<input type="text" value="first"/><input type="text" value="second"/>'; + + const input = coreState.getInput(); + expect(input?.value).toBe('first'); + }); + + it('should find input inside deeply nested structure', () => { + element.innerHTML = '<div><div><div><input type="text" value="deep"/></div></div></div>'; + + const input = coreState.getInput(); + expect(input?.value).toBe('deep'); + }); + }); + + describe('getModalElement() with multiple modals', () => { + it('should return only the modal matching its own instanceId', () => { + const modalA = document.createElement('div'); + modalA.setAttribute('data-owner-id', 'other-id'); + document.body.appendChild(modalA); + + const modalB = document.createElement('div'); + modalB.setAttribute('data-owner-id', 'edge-test-id'); + document.body.appendChild(modalB); + + expect(coreState.getModalElement()).toBe(modalB); + }); + }); + + describe('rapid sequential state changes', () => { + it('should reflect only the latest state after multiple rapid changes', () => { + coreState.setDegreesHours(10); + coreState.setDegreesHours(20); + coreState.setDegreesHours(30); + + expect(coreState.degreesHours).toBe(30); + }); + + it('should handle alternating boolean toggles correctly', () => { + coreState.setIsMobileView(true); + coreState.setIsMobileView(false); + coreState.setIsMobileView(true); + coreState.setIsMobileView(false); + + expect(coreState.isMobileView).toBe(false); + }); + }); + + describe('setDisabledTime with null', () => { + it('should accept null to clear disabled time', () => { + coreState.setDisabledTime({ value: { hours: ['1', '2'] } }); + expect(coreState.disabledTime).not.toBeNull(); + + coreState.setDisabledTime(null); + expect(coreState.disabledTime).toBeNull(); + }); + }); + + describe('getClockFace in mobile vs desktop', () => { + it('should return mobile clock face when isMobileView is true', () => { + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', 'edge-test-id'); + const mobileFace = document.createElement('div'); + mobileFace.className = 'tp-ui-clock-face mobile'; + modal.appendChild(mobileFace); + const desktopFace = document.createElement('div'); + desktopFace.className = 'tp-ui-clock-face'; + modal.appendChild(desktopFace); + document.body.appendChild(modal); + + coreState.setIsMobileView(true); + expect(coreState.getClockFace()).toBe(mobileFace); + + coreState.setIsMobileView(false); + expect(coreState.getClockFace()).toBe(desktopFace); + }); + }); +}); + diff --git a/app/tests/unit/utils/EventEmitter.edge.test.ts b/app/tests/unit/utils/EventEmitter.edge.test.ts new file mode 100644 index 0000000..0150925 --- /dev/null +++ b/app/tests/unit/utils/EventEmitter.edge.test.ts @@ -0,0 +1,122 @@ +import { EventEmitter } from '../../../src/utils/EventEmitter'; + +interface TestEventMap extends Record<string, unknown> { + testEvent: { value: string }; + chainA: { step: number }; + chainB: { step: number }; +} + +describe('EventEmitter edge cases', () => { + let emitter: EventEmitter<TestEventMap>; + + beforeEach(() => { + emitter = new EventEmitter<TestEventMap>(); + }); + + describe('handler throwing exception', () => { + it('should propagate error from handler and not call subsequent handlers', () => { + const firstHandler = jest.fn(() => { + throw new Error('handler crash'); + }); + const secondHandler = jest.fn(); + + emitter.on('testEvent', firstHandler); + emitter.on('testEvent', secondHandler); + + expect(() => emitter.emit('testEvent', { value: 'boom' })).toThrow('handler crash'); + expect(firstHandler).toHaveBeenCalledTimes(1); + }); + }); + + describe('re-entrant emit', () => { + it('should handle emit called inside a handler', () => { + const innerHandler = jest.fn(); + emitter.on('chainB', innerHandler); + + emitter.on('chainA', () => { + emitter.emit('chainB', { step: 2 }); + }); + + emitter.emit('chainA', { step: 1 }); + + expect(innerHandler).toHaveBeenCalledWith({ step: 2 }); + }); + }); + + describe('off() during emit', () => { + it('should allow a handler to remove itself', () => { + let callCount = 0; + const selfRemover = (): void => { + callCount++; + emitter.off('testEvent', selfRemover); + }; + + emitter.on('testEvent', selfRemover); + + emitter.emit('testEvent', { value: 'a' }); + emitter.emit('testEvent', { value: 'b' }); + + expect(callCount).toBe(1); + }); + }); + + describe('once() idempotency', () => { + it('should fire exactly once even with rapid sequential emits', () => { + const handler = jest.fn(); + emitter.once('testEvent', handler); + + emitter.emit('testEvent', { value: 'first' }); + emitter.emit('testEvent', { value: 'second' }); + emitter.emit('testEvent', { value: 'third' }); + + expect(handler).toHaveBeenCalledTimes(1); + expect(handler).toHaveBeenCalledWith({ value: 'first' }); + }); + }); + + describe('clear() between emissions', () => { + it('should prevent handlers from firing after clear', () => { + const handler = jest.fn(); + emitter.on('testEvent', handler); + + emitter.emit('testEvent', { value: 'before' }); + expect(handler).toHaveBeenCalledTimes(1); + + emitter.clear(); + emitter.emit('testEvent', { value: 'after' }); + + expect(handler).toHaveBeenCalledTimes(1); + }); + }); + + describe('off() with non-registered handler', () => { + it('should not throw when removing a handler that was never registered', () => { + const unregistered = jest.fn(); + expect(() => emitter.off('testEvent', unregistered)).not.toThrow(); + }); + }); + + describe('emit with undefined data', () => { + it('should pass undefined to handler when no data provided', () => { + const handler = jest.fn(); + emitter.on('testEvent', handler); + + emitter.emit('testEvent'); + + expect(handler).toHaveBeenCalledWith(undefined); + }); + }); + + describe('hasListeners after clear', () => { + it('should return false for all events after clear', () => { + emitter.on('testEvent', jest.fn()); + emitter.on('chainA', jest.fn()); + + emitter.clear(); + + expect(emitter.hasListeners('testEvent')).toBe(false); + expect(emitter.hasListeners('chainA')).toBe(false); + }); + }); +}); + diff --git a/app/tsconfig.json b/app/tsconfig.json index 425cb73..5441e6c 100644 --- a/app/tsconfig.json +++ b/app/tsconfig.json @@ -23,7 +23,7 @@ "timepicker-ui": ["./src/index.d.ts"] } }, - "include": ["./.eslintrc.js", "src", "docs/index.ts", "tests", "*.ts"], + "include": ["./.eslintrc.js", "src", "docs/index.ts", "docs/examples", "tests", "*.ts"], "exclude": [ "./dist", "node_modules", diff --git a/app/webpack.config.js b/app/webpack.config.js index 561712e..035ea1b 100644 --- a/app/webpack.config.js +++ b/app/webpack.config.js @@ -85,6 +85,11 @@ export default { }, }, }, + { + test: /\.html$/, + include: path.resolve(__dirname, 'docs/partials'), + type: 'asset/source', + }, { test: /\.svg$/, type: 'asset/source', diff --git a/docs-app/app/docs/api/options/page.tsx b/docs-app/app/docs/api/options/page.tsx index 8ebd082..0783644 100644 --- a/docs-app/app/docs/api/options/page.tsx +++ b/docs-app/app/docs/api/options/page.tsx @@ -145,9 +145,17 @@ const uiOptions = [ }, { name: "mode", - type: '"clock" | "wheel"', + type: '"clock" | "wheel" | "compact-wheel"', default: '"clock"', - description: "Picker mode — analog clock face or scroll-spinner wheels", + description: + "Picker mode \u2014 analog clock face, scroll-spinner wheels, or headerless wheel", + }, + { + name: "wheel", + type: "WheelOptions", + default: "undefined", + description: + "Wheel/compact-wheel config (placement, hideFooter, commitOnScroll)", }, ]; @@ -489,6 +497,26 @@ export default function OptionsPage() { /> </Section> + <Section icon={Layout} title="Wheel Mode Configuration"> + <p className="text-muted-foreground mb-4"> + Configure wheel/compact-wheel mode via{" "} + <code className="text-primary">ui.wheel</code>: + </p> + <CodeBlock + code={`const picker = new TimepickerUI(input, { + ui: { + mode: 'wheel', + wheel: { + placement: 'bottom', // Popover placement (compact-wheel only) + hideFooter: true, // Hide OK/Cancel footer + commitOnScroll: true // Commit value on scroll end + } + } +});`} + language="typescript" + /> + </Section> + <Section icon={Lock} title="Disabled Time Configuration"> <p className="text-muted-foreground mb-4"> Disable specific hours, minutes, or intervals via{" "} @@ -500,7 +528,8 @@ export default function OptionsPage() { disabledTime: { hours: [1, 3, 5, 8], // Disable specific hours minutes: [15, 30, 45], // Disable specific minutes - interval: 15 // Or use interval shorthand (15, 30, etc.) + interval: 15, // Or use interval shorthand (15, 30, etc.) + hideOptions: true // Hide disabled items instead of greying out } } });`} @@ -541,7 +570,8 @@ export default function OptionsPage() { autoSwitchToMinutes: true, disabledTime: { hours: [0, 1, 2, 3], - interval: 15 + interval: 15, + hideOptions: true }, currentTime: { updateInput: true, @@ -559,7 +589,12 @@ export default function OptionsPage() { enableSwitchIcon: false, editable: false, cssClass: 'custom-picker', - appendModalSelector: '#timepicker-container' + appendModalSelector: '#timepicker-container', + wheel: { + placement: 'bottom', + hideFooter: true, + commitOnScroll: true + } }, // Labels options diff --git a/docs-app/app/docs/changelog/page.tsx b/docs-app/app/docs/changelog/page.tsx index 748b8e8..bb1f959 100644 --- a/docs-app/app/docs/changelog/page.tsx +++ b/docs-app/app/docs/changelog/page.tsx @@ -66,6 +66,26 @@ const CHANGELOG_420 = { description: "Scroll-spinner interface replacing the analog clock face. Enable via ui.mode: 'wheel'. Supports 12h/24h, all themes, disabled time, and keyboard navigation", }, + { + title: "Compact-wheel mode", + description: + "Headerless wheel picker without the hour/minute inputs header. Enable via ui.mode: 'compact-wheel'. Combine with ui.wheel.placement for popover positioning", + }, + { + title: "ui.wheel.placement option", + description: + "Popover placement ('auto', 'top', 'bottom') for compact-wheel mode. Opens as a popover anchored to the input instead of a centered modal", + }, + { + title: "clock.disabledTime.hideOptions option", + description: + "Completely remove disabled hours/minutes from the list instead of dimming them. Works in all modes: clock, wheel, compact-wheel", + }, + { + title: "ui.wheel.commitOnScroll option", + description: + "Auto-commit time at the end of wheel scrolling without pressing OK. Only applies to wheel and compact-wheel modes", + }, { title: "Clear button", description: @@ -86,9 +106,9 @@ const CHANGELOG_420 = { "New callback and EventEmitter event with previousValue payload", }, { - title: "ClearEventData and ClearBehaviorOptions types", + title: "New exported types", description: - "Exported TypeScript types for clear button configuration and event data", + "ClearEventData, ClearBehaviorOptions, WheelScrollStartEventData, WheelScrollEndEventData", }, ], }; diff --git a/docs-app/app/docs/configuration/page.tsx b/docs-app/app/docs/configuration/page.tsx index 2440e4c..55dfe5b 100644 --- a/docs-app/app/docs/configuration/page.tsx +++ b/docs-app/app/docs/configuration/page.tsx @@ -38,7 +38,7 @@ const clockOptions = [ { name: "autoSwitchToMinutes", type: "boolean", - default: "false", + default: "true", description: "Auto-switch after hour", }, { @@ -142,10 +142,16 @@ const uiOptions = [ }, { name: "mode", - type: "clock | wheel", + type: "clock | wheel | compact-wheel", default: "clock", description: "Picker mode", }, + { + name: "wheel", + type: "object", + default: "undefined", + description: "Wheel config (placement, hideFooter, commitOnScroll)", + }, ]; const labelsOptions = [ @@ -421,7 +427,12 @@ export default function ConfigurationPage() { mobile: false, editable: false, enableScrollbar: false, - enableSwitchIcon: true + enableSwitchIcon: true, + wheel: { + placement: 'bottom', + hideFooter: true, + commitOnScroll: true + } }, labels: { ok: 'Confirm', @@ -457,7 +468,8 @@ export default function ConfigurationPage() { clock: { disabledTime: { hours: [1, 3, 5, 23], - minutes: [15, 30, 45] + minutes: [15, 30, 45], + hideOptions: true } } }`} @@ -502,6 +514,25 @@ export default function ConfigurationPage() { /> </section> + <section className="mb-12"> + <h2 className="text-2xl font-bold tracking-tight mb-6 text-foreground"> + Wheel Mode + </h2> + <CodeBlock + code={`{ + ui: { + mode: 'wheel', + wheel: { + placement: 'bottom', // Popover placement (compact-wheel only) + hideFooter: true, // Hide OK/Cancel footer + commitOnScroll: true // Commit value on scroll end + } + } +}`} + language="typescript" + /> + </section> + <section className="mb-12"> <h2 className="text-2xl font-bold tracking-tight mb-6 text-foreground"> Current Time diff --git a/docs-app/app/docs/features/wheel-mode/page.tsx b/docs-app/app/docs/features/wheel-mode/page.tsx index 62899c4..0d83924 100644 --- a/docs-app/app/docs/features/wheel-mode/page.tsx +++ b/docs-app/app/docs/features/wheel-mode/page.tsx @@ -1,7 +1,16 @@ import { CodeBlock } from "@/components/code-block"; import { Section } from "@/components/section"; import { InfoBox } from "@/components/info-box"; -import { Disc3, Settings, Palette, Keyboard, Zap } from "lucide-react"; +import { + Disc3, + Settings, + Palette, + Keyboard, + Zap, + Minimize2, + EyeOff, + RotateCcw, +} from "lucide-react"; export const metadata = { title: "Wheel Mode - Timepicker-UI", @@ -27,9 +36,11 @@ export default function WheelModePage() { variant="emerald" className="mb-8" > - Set <code>ui.mode: 'wheel'</code> to switch from the default - analog clock to scroll wheels. The header (hour/minute inputs, AM/PM - toggle) and footer (OK/Cancel/Clear buttons) remain unchanged. + Two wheel variants are available:{" "} + <code>ui.mode: 'wheel'</code> (with header) and{" "} + <code>ui.mode: 'compact-wheel'</code> (headerless). The header + (hour/minute inputs, AM/PM toggle) and footer (OK/Cancel/Clear buttons) + remain unchanged in wheel mode. </InfoBox> <Section icon={Disc3} title="Basic Usage"> @@ -194,7 +205,7 @@ picker.on('clear', (data) => { <ul className="space-y-2 text-sm text-orange-800 dark:text-orange-300 list-disc list-inside"> <li> Range plugin (<code>range.enabled</code>) is not supported in - wheel mode + wheel or compact-wheel mode </li> <li> <code>ui.mobile</code> is ignored — wheel layout is always the @@ -203,6 +214,140 @@ picker.on('clear', (data) => { </ul> </div> </Section> + + <Section icon={Minimize2} title="Compact-Wheel Mode"> + <p className="text-muted-foreground mb-4"> + Compact-wheel mode is a headerless variant — it shows only the scroll + wheels without the hour/minute input header. Ideal for minimal UIs or + popover-style pickers. + </p> + <CodeBlock + code={`const picker = new TimepickerUI(input, { + ui: { mode: 'compact-wheel' } +}); +picker.create();`} + language="typescript" + /> + <div className="mt-6 rounded-lg border border-border bg-card p-6"> + <h3 className="font-semibold mb-3 text-foreground"> + Popover Placement + </h3> + <p className="text-muted-foreground mb-3"> + Combine with{" "} + <code className="text-primary">ui.wheel.placement</code> to open as + a popover anchored to the input instead of a centered modal: + </p> + <CodeBlock + code={`new TimepickerUI(input, { + ui: { + mode: 'compact-wheel', + wheel: { + placement: 'auto' // 'auto', 'top', or 'bottom' + } + } +}).create();`} + language="typescript" + /> + <div className="mt-4 overflow-x-auto rounded-lg border border-border"> + <table className="w-full text-sm"> + <thead className="bg-muted/50"> + <tr className="border-b border-border"> + <th className="px-4 py-3 text-left font-semibold text-foreground"> + Value + </th> + <th className="px-4 py-3 text-left font-semibold text-foreground"> + Behavior + </th> + </tr> + </thead> + <tbody className="divide-y divide-border"> + <tr> + <td className="px-4 py-3"> + <code className="text-primary text-xs"> + 'auto' + </code> + </td> + <td className="px-4 py-3 text-muted-foreground"> + Opens below if space allows, otherwise above + </td> + </tr> + <tr> + <td className="px-4 py-3"> + <code className="text-primary text-xs"> + 'top' + </code> + </td> + <td className="px-4 py-3 text-muted-foreground"> + Always opens above the input + </td> + </tr> + <tr> + <td className="px-4 py-3"> + <code className="text-primary text-xs"> + 'bottom' + </code> + </td> + <td className="px-4 py-3 text-muted-foreground"> + Always opens below the input + </td> + </tr> + <tr> + <td className="px-4 py-3"> + <code className="text-primary text-xs">undefined</code> + </td> + <td className="px-4 py-3 text-muted-foreground"> + Centered modal with backdrop (default) + </td> + </tr> + </tbody> + </table> + </div> + </div> + </Section> + + <Section icon={EyeOff} title="Hide Disabled Options"> + <p className="text-muted-foreground mb-4"> + Set{" "} + <code className="text-primary"> + clock.disabledTime.hideOptions: true + </code>{" "} + to completely remove disabled hours/minutes from the wheel instead of + showing them as dimmed. Useful when many values are disabled (e.g., + business hours only). + </p> + <CodeBlock + code={`new TimepickerUI(input, { + clock: { + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 18, 19, 20, 21, 22, 23], hideOptions: true } + }, + ui: { mode: 'wheel' } +}).create();`} + language="typescript" + /> + </Section> + + <Section icon={RotateCcw} title="Auto-Commit on Scroll"> + <p className="text-muted-foreground mb-4"> + Set{" "} + <code className="text-primary">ui.wheel.commitOnScroll: true</code> to + automatically confirm the selected time when scrolling stops, without + requiring the user to press OK. Works in both wheel and compact-wheel + modes. + </p> + <CodeBlock + code={`new TimepickerUI(input, { + ui: { mode: 'wheel', wheel: { commitOnScroll: true } } +}).create(); + +// The confirm event includes autoCommit: true +picker.on('confirm', (data) => { + if (data.autoCommit) { + console.log('Auto-committed:', data.hour, data.minutes); + } +});`} + language="typescript" + /> + </Section> </div> ); } diff --git a/docs-app/app/docs/whats-new/page.tsx b/docs-app/app/docs/whats-new/page.tsx index 46ac665..aef9fe1 100644 --- a/docs-app/app/docs/whats-new/page.tsx +++ b/docs-app/app/docs/whats-new/page.tsx @@ -39,7 +39,8 @@ export default function WhatsNewPage() { className="mb-8" > <p className="mb-3"> - <strong>March 13, 2026</strong> - Wheel mode & clear button + <strong>March 15, 2026</strong> - Wheel mode, compact-wheel, clear + button and more </p> <p className="text-sm">What's new:</p> <ul className="mt-2 space-y-1 text-sm ml-4"> @@ -48,6 +49,27 @@ export default function WhatsNewPage() { analog clock face. Enable via{" "} <code>ui.mode: 'wheel'</code> </li> + <li> + <strong>Compact-wheel mode</strong> - Headerless wheel picker + without the hour/minute inputs header. Enable via{" "} + <code>ui.mode: 'compact-wheel'</code> + </li> + <li> + <strong>Popover placement</strong> - Use{" "} + <code>ui.wheel.placement</code> to open compact-wheel as a popover + anchored to the input (<code>'auto'</code>,{" "} + <code>'top'</code>, <code>'bottom'</code>) + </li> + <li> + <strong>Hide disabled options</strong> - Set{" "} + <code>clock.disabledTime.hideOptions: true</code> to completely + remove disabled values instead of dimming them + </li> + <li> + <strong>Auto-commit on scroll</strong> - Set{" "} + <code>ui.wheel.commitOnScroll: true</code> to auto-confirm time at + scroll end without pressing OK + </li> <li> <strong>Clear button</strong> - Reset time selection with a dedicated button, enabled by default via <code>ui.clearButton</code> @@ -61,8 +83,10 @@ export default function WhatsNewPage() { EventEmitter event with <code>previousValue</code> payload </li> <li> - <strong>New exported types</strong> - <code>ClearEventData</code>{" "} - and <code>ClearBehaviorOptions</code> + <strong>New exported types</strong> - <code>ClearEventData</code>,{" "} + <code>ClearBehaviorOptions</code>,{" "} + <code>WheelScrollStartEventData</code>,{" "} + <code>WheelScrollEndEventData</code> </li> </ul> <Link diff --git a/docs-app/app/page.tsx b/docs-app/app/page.tsx index a2eb04a..e40aaff 100644 --- a/docs-app/app/page.tsx +++ b/docs-app/app/page.tsx @@ -232,7 +232,7 @@ export default function Home() { <Sparkles className="h-4 w-4 flex-shrink-0" /> <span> <span className="font-medium">New:</span> Version 4.2.0 — Wheel - Plugin, Clear Button and more! + Plugin, Compact-Wheel, Clear Button and more! </span> </Link> </div> diff --git a/docs-app/components/footer.tsx b/docs-app/components/footer.tsx index 6a5fe95..1629b87 100644 --- a/docs-app/components/footer.tsx +++ b/docs-app/components/footer.tsx @@ -201,7 +201,7 @@ export function Footer() { rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors" > - v4.1.7 + v4.2.0 </a> </div> </div> From 6328c3c7c1dbb778f39633ed9d9921bf1729d6fc Mon Sep 17 00:00:00 2001 From: pglejzer <glejzerpiotr@gmail.com> Date: Mon, 16 Mar 2026 21:05:50 +0100 Subject: [PATCH 05/10] update --- app/docs/examples/disabled.ts | 17 +- app/docs/examples/hide-footer.ts | 3 +- app/docs/examples/wheel.ts | 54 ++- app/docs/partials/disabled.html | 45 +-- app/docs/partials/hide-footer.html | 7 +- app/docs/partials/popover-features.html | 30 +- app/docs/partials/wheel.html | 39 +- app/src/managers/ModalManager.ts | 15 +- app/src/managers/clock/ClockSystem.ts | 2 - .../clock/handlers/ClockSystemInitializer.ts | 1 - .../managers/clock/renderer/ClockRenderer.ts | 6 - app/src/managers/clock/types.ts | 1 - app/src/managers/events/ButtonHandlers.ts | 36 +- .../managers/plugins/wheel/PopoverManager.ts | 4 +- .../plugins/wheel/WheelEventHandler.ts | 2 +- .../managers/plugins/wheel/WheelManager.ts | 51 ++- .../managers/plugins/wheel/WheelRenderer.ts | 77 +++- app/src/styles/partials/_clock.scss | 4 - app/src/styles/partials/_wheel.scss | 4 - app/src/timepicker/Lifecycle.ts | 8 +- app/src/types/options.d.ts | 87 +++-- app/src/utils/options/defaults.ts | 16 +- app/src/utils/template/index.ts | 2 +- app/tests/unit/managers/WheelManager.test.ts | 1 + .../wheel/WheelEventHandler.edge.test.ts | 6 +- .../plugins/wheel/WheelHeaderSync.test.ts | 3 +- .../plugins/wheel/WheelHideDisabled.test.ts | 3 +- .../wheel/WheelHideDisabledPopover.test.ts | 361 ++++++++++++++++++ .../plugins/wheel/WheelRenderer.edge.test.ts | 3 +- .../plugins/wheel/wheel-test-helpers.ts | 1 + 30 files changed, 689 insertions(+), 200 deletions(-) create mode 100644 app/tests/unit/managers/plugins/wheel/WheelHideDisabledPopover.test.ts diff --git a/app/docs/examples/disabled.ts b/app/docs/examples/disabled.ts index f59e343..d92f6ee 100644 --- a/app/docs/examples/disabled.ts +++ b/app/docs/examples/disabled.ts @@ -133,22 +133,14 @@ document.getElementById('clear-intervals')?.addEventListener('click', () => { }); }); -// hideDisabledOptions — Clock mode -const hideDisabledClockPicker = new TimepickerUI('#hide-disabled-clock', { - clock: { - type: '24h', - disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 18, 19, 20, 21, 22, 23], hideOptions: true }, - }, -}); -hideDisabledClockPicker.create(); - // hideDisabledOptions — Wheel mode const hideDisabledWheelPicker = new TimepickerUI('#hide-disabled-wheel', { clock: { type: '12h', - disabledTime: { hours: [1, 2, 3, 4, 5, 6], minutes: [0, 15, 30, 45], hideOptions: true }, + disabledTime: { hours: [1, 2, 3, 4, 5, 6], minutes: [0, 15, 30, 45] }, }, ui: { mode: 'wheel' }, + wheel: { hideDisabled: true }, }); hideDisabledWheelPicker.create(); @@ -157,8 +149,9 @@ const hideDisabledPopoverPicker = new TimepickerUI('#hide-disabled-popover', { clock: { type: '24h', incrementMinutes: 5, - disabledTime: { hours: [0, 1, 2, 3, 4, 5, 22, 23], hideOptions: true }, + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 22, 23] }, }, - ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', hideDisabled: true }, }); hideDisabledPopoverPicker.create(); diff --git a/app/docs/examples/hide-footer.ts b/app/docs/examples/hide-footer.ts index 7a77212..8116d3e 100644 --- a/app/docs/examples/hide-footer.ts +++ b/app/docs/examples/hide-footer.ts @@ -15,7 +15,8 @@ const noFooterThemes = [ noFooterThemes.forEach((theme) => { new TimepickerUI(`#nofooter-${theme}`, { - ui: { mode: 'compact-wheel', theme, wheel: { hideFooter: true, commitOnScroll: true } }, + ui: { mode: 'compact-wheel', theme }, + wheel: { hideFooter: true, commitOnScroll: true }, }).create(); }); diff --git a/app/docs/examples/wheel.ts b/app/docs/examples/wheel.ts index 2a91102..2af8b13 100644 --- a/app/docs/examples/wheel.ts +++ b/app/docs/examples/wheel.ts @@ -59,8 +59,9 @@ new TimepickerUI('#compact-wheel-12h', { }).create(); new TimepickerUI('#compact-wheel-24h', { - clock: { type: '24h' }, + clock: { type: '24h', disabledTime: { hours: [12] } }, ui: { mode: 'compact-wheel' }, + wheel: { hideDisabled: true }, }).create(); new TimepickerUI('#compact-wheel-step', { @@ -90,63 +91,75 @@ compactThemeList.forEach((theme) => { // Compact Wheel + Popover — placement auto (default) new TimepickerUI('#popover-auto', { - ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto' }, }).create(); // Compact Wheel + Popover — placement top new TimepickerUI('#popover-top', { - ui: { mode: 'compact-wheel', wheel: { placement: 'top' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'top' }, }).create(); // Compact Wheel + Popover — placement bottom new TimepickerUI('#popover-bottom', { - ui: { mode: 'compact-wheel', wheel: { placement: 'bottom' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'bottom' }, }).create(); // Compact Wheel + Popover — 24h + placement auto new TimepickerUI('#popover-24h', { clock: { type: '24h' }, - ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto' }, }).create(); // Compact Wheel + Popover — dark theme + placement auto new TimepickerUI('#popover-dark', { - ui: { mode: 'compact-wheel', theme: 'dark', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel', theme: 'dark' }, + wheel: { placement: 'auto' }, }).create(); // Compact Wheel + Popover — m3-green theme + placement top new TimepickerUI('#popover-m3', { - ui: { mode: 'compact-wheel', theme: 'm3-green', wheel: { placement: 'top' } }, + ui: { mode: 'compact-wheel', theme: 'm3-green' }, + wheel: { placement: 'top' }, }).create(); // commitOnScroll — Wheel (auto-commit without OK) new TimepickerUI('#commit-on-scroll-wheel', { - ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, + ui: { mode: 'wheel' }, + wheel: { commitOnScroll: true }, }).create(); // commitOnScroll — Compact Wheel + Popover new TimepickerUI('#commit-on-scroll-popover', { - ui: { mode: 'compact-wheel', wheel: { placement: 'auto', commitOnScroll: true } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', commitOnScroll: true }, }).create(); // commitOnScroll — 24h + Popover new TimepickerUI('#commit-on-scroll-24h', { clock: { type: '24h' }, - ui: { mode: 'compact-wheel', wheel: { placement: 'auto', commitOnScroll: true } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', commitOnScroll: true }, }).create(); // Multiple Popover pickers (independent instances) new TimepickerUI('#multi-popover-1', { - ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto' }, }).create(); new TimepickerUI('#multi-popover-2', { clock: { type: '24h' }, - ui: { mode: 'compact-wheel', theme: 'm3-green', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel', theme: 'm3-green' }, + wheel: { placement: 'auto' }, }).create(); new TimepickerUI('#multi-popover-3', { - ui: { mode: 'compact-wheel', theme: 'dark', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel', theme: 'dark' }, + wheel: { placement: 'auto' }, }).create(); // Popover — All Themes @@ -165,7 +178,8 @@ const popoverThemeList = [ popoverThemeList.forEach((theme) => { new TimepickerUI(`#popover-theme-${theme}`, { - ui: { mode: 'compact-wheel', theme, wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel', theme }, + wheel: { placement: 'auto' }, }).create(); }); @@ -228,17 +242,19 @@ new TimepickerUI('#wheel-disabled-intervals-24h', { new TimepickerUI('#wheel-hide-disabled-hours', { clock: { type: '12h', - disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8], hideOptions: true }, + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8] }, }, ui: { mode: 'wheel' }, + wheel: { hideDisabled: true }, }).create(); new TimepickerUI('#wheel-hide-disabled-interval', { clock: { type: '24h', - disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'], hideOptions: true }, + disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'] }, }, ui: { mode: 'wheel' }, + wheel: { hideDisabled: true }, }).create(); // Compact Wheel + Disabled Time — all options @@ -300,15 +316,17 @@ new TimepickerUI('#compact-disabled-intervals-24h', { new TimepickerUI('#compact-hide-disabled-hours', { clock: { type: '12h', - disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8], hideOptions: true }, + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8] }, }, ui: { mode: 'compact-wheel' }, + wheel: { hideDisabled: true }, }).create(); new TimepickerUI('#compact-hide-disabled-interval', { clock: { type: '24h', - disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'], hideOptions: true }, + disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'] }, }, ui: { mode: 'compact-wheel' }, + wheel: { hideDisabled: true }, }).create(); diff --git a/app/docs/partials/disabled.html b/app/docs/partials/disabled.html index 38a272c..e63416f 100644 --- a/app/docs/partials/disabled.html +++ b/app/docs/partials/disabled.html @@ -328,23 +328,13 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Hide Disabled Options</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> - Completely remove disabled hours/minutes from the list instead of dimming them. Useful for - business-hours-only scenarios. + Completely remove disabled hours/minutes from the list instead of dimming them. Available in wheel and + compact-wheel modes only. </p> </div> <div class="p-8"> <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Clock — Business Hours Only</label - > - <input - id="hide-disabled-clock" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="09:00" - /> - </div> + <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" >Wheel — Hidden Hours & Minutes</label @@ -370,27 +360,19 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Hide Disabled Optio <div class="grid md:grid-cols-2 gap-6"> <div> <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="hide-disabled-clock" value="09:00" /> -<input id="hide-disabled-wheel" value="08:00 AM" /> + <pre><code class="language-html"><input id="hide-disabled-wheel" value="08:00 AM" /> <input id="hide-disabled-popover" value="10:00" /></code></pre> </div> <div> <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">// Clock — only show business hours (8-17) -new TimepickerUI('#hide-disabled-clock', { - clock: { - type: '24h', - disabledTime: { hours: [0,1,2,3,4,5,6,7,18,19,20,21,22,23], hideOptions: true }, - }, -}).create(); - -// Wheel — hide specific hours & minutes + <pre><code class="language-javascript">// Wheel — hide specific hours & minutes new TimepickerUI('#hide-disabled-wheel', { clock: { type: '12h', - disabledTime: { hours: [1,2,3,4,5,6], minutes: [0,15,30,45], hideOptions: true }, + disabledTime: { hours: [1,2,3,4,5,6], minutes: [0,15,30,45] }, }, ui: { mode: 'wheel' }, + wheel: { hideDisabled: true }, }).create(); // Popover — hidden + 5min step @@ -398,25 +380,24 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< clock: { type: '24h', incrementMinutes: 5, - disabledTime: { hours: [0,1,2,3,4,5,22,23], hideOptions: true }, + disabledTime: { hours: [0,1,2,3,4,5,22,23] }, }, - ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', hideDisabled: true }, }).create();</code></pre> </div> </div> <div class="mt-6 p-4 bg-rose-50 dark:bg-rose-900/20 rounded-lg border border-rose-200 dark:border-rose-800" > - <h4 class="text-sm font-semibold text-rose-900 dark:text-rose-200 mb-2"> - disabledTime.hideOptions Notes - </h4> + <h4 class="text-sm font-semibold text-rose-900 dark:text-rose-200 mb-2">wheel.hideDisabled Notes</h4> <ul class="text-sm text-rose-800 dark:text-rose-300 space-y-1 list-disc list-inside"> <li> Set - <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">clock.disabledTime.hideOptions: true</code> + <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">wheel.hideDisabled: true</code> to remove disabled values entirely </li> - <li>Works in all modes: clock, wheel, and compact-wheel</li> + <li>Works in wheel and compact-wheel modes only (not in clock mode)</li> <li> Combines with <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">disabledTime.hours</code>, <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">disabledTime.minutes</code>, and intervals diff --git a/app/docs/partials/hide-footer.html b/app/docs/partials/hide-footer.html index 72ebfcf..f77941f 100644 --- a/app/docs/partials/hide-footer.html +++ b/app/docs/partials/hide-footer.html @@ -120,7 +120,8 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< themes.forEach((theme) => { new TimepickerUI(`#nofooter-${theme}`, { - ui: { mode: 'compact-wheel', theme, wheel: { hideFooter: true, commitOnScroll: true } }, + ui: { mode: 'compact-wheel', theme }, + wheel: { hideFooter: true, commitOnScroll: true }, }).create(); });</code></pre> </div> @@ -131,7 +132,7 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< <h4 class="text-sm font-semibold text-rose-800 dark:text-rose-300 mb-2">How it works</h4> <ul class="text-sm text-rose-700 dark:text-rose-400 space-y-1"> <li> - <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">ui.wheel.hideFooter: true</code> + <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">wheel.hideFooter: true</code> — footer is not rendered in the DOM (not display:none — completely absent for accessibility) </li> <li> @@ -139,7 +140,7 @@ <h4 class="text-sm font-semibold text-rose-800 dark:text-rose-300 mb-2">How it w </li> <li> Combine with - <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">ui.wheel.commitOnScroll: true</code> + <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">wheel.commitOnScroll: true</code> so the selected time auto-commits without buttons </li> <li>Click outside or press Escape to close the picker</li> diff --git a/app/docs/partials/popover-features.html b/app/docs/partials/popover-features.html index f8cfcfb..eec41c9 100644 --- a/app/docs/partials/popover-features.html +++ b/app/docs/partials/popover-features.html @@ -85,33 +85,39 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> <pre><code class="language-javascript">// Auto placement (default) new TimepickerUI('#popover-auto', { - ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto' }, }).create(); // Top placement new TimepickerUI('#popover-top', { - ui: { mode: 'compact-wheel', wheel: { placement: 'top' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'top' }, }).create(); // Bottom placement new TimepickerUI('#popover-bottom', { - ui: { mode: 'compact-wheel', wheel: { placement: 'bottom' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'bottom' }, }).create(); // 24h + auto placement new TimepickerUI('#popover-24h', { clock: { type: '24h' }, - ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto' }, }).create(); // Dark theme + auto placement new TimepickerUI('#popover-dark', { - ui: { mode: 'compact-wheel', theme: 'dark', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel', theme: 'dark' }, + wheel: { placement: 'auto' }, }).create(); // M3 Green + top placement new TimepickerUI('#popover-m3', { - ui: { mode: 'compact-wheel', theme: 'm3-green', wheel: { placement: 'top' } }, + ui: { mode: 'compact-wheel', theme: 'm3-green' }, + wheel: { placement: 'top' }, }).create();</code></pre> </div> </div> @@ -172,16 +178,19 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> <pre><code class="language-javascript">// Each picker is fully independent new TimepickerUI('#multi-popover-1', { - ui: { mode: 'compact-wheel', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto' }, }).create(); new TimepickerUI('#multi-popover-2', { clock: { type: '24h' }, - ui: { mode: 'compact-wheel', theme: 'm3-green', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel', theme: 'm3-green' }, + wheel: { placement: 'auto' }, }).create(); new TimepickerUI('#multi-popover-3', { - ui: { mode: 'compact-wheel', theme: 'dark', wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel', theme: 'dark' }, + wheel: { placement: 'auto' }, }).create();</code></pre> </div> </div> @@ -303,7 +312,8 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< popoverThemeList.forEach((theme) => { new TimepickerUI(`#popover-theme-${theme}`, { - ui: { mode: 'compact-wheel', theme, wheel: { placement: 'auto' } }, + ui: { mode: 'compact-wheel', theme }, + wheel: { placement: 'auto' }, }).create(); });</code></pre> </div> diff --git a/app/docs/partials/wheel.html b/app/docs/partials/wheel.html index 6f1542f..d4d5185 100644 --- a/app/docs/partials/wheel.html +++ b/app/docs/partials/wheel.html @@ -534,18 +534,21 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> <pre><code class="language-javascript">// Wheel with auto-commit new TimepickerUI('#commit-on-scroll-wheel', { - ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, + ui: { mode: 'wheel' }, + wheel: { commitOnScroll: true }, }).create(); // Popover with auto-commit new TimepickerUI('#commit-on-scroll-popover', { - ui: { mode: 'compact-wheel', wheel: { placement: 'auto', commitOnScroll: true } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', commitOnScroll: true }, }).create(); // 24h popover with auto-commit new TimepickerUI('#commit-on-scroll-24h', { clock: { type: '24h' }, - ui: { mode: 'compact-wheel', wheel: { placement: 'auto', commitOnScroll: true } }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', commitOnScroll: true }, }).create();</code></pre> </div> </div> @@ -556,7 +559,7 @@ <h4 class="text-sm font-semibold text-amber-900 dark:text-amber-200 mb-2">commit <ul class="text-sm text-amber-800 dark:text-amber-300 space-y-1 list-disc list-inside"> <li> Set - <code class="bg-amber-100 dark:bg-amber-800 px-1 rounded">ui.wheel.commitOnScroll: true</code> for + <code class="bg-amber-100 dark:bg-amber-800 px-1 rounded">wheel.commitOnScroll: true</code> for instant commit on scroll end </li> <li> @@ -763,18 +766,20 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< new TimepickerUI('#wheel-hide-disabled-hours', { clock: { type: '12h', - disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8], hideOptions: true } + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8] } }, - ui: { mode: 'wheel' } + ui: { mode: 'wheel' }, + wheel: { hideDisabled: true } }).create(); // hideDisabledOptions — interval 24h new TimepickerUI('#wheel-hide-disabled-interval', { clock: { type: '24h', - disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'], hideOptions: true } + disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'] } }, - ui: { mode: 'wheel' } + ui: { mode: 'wheel' }, + wheel: { hideDisabled: true } }).create();</code></pre> </div> </div> @@ -783,7 +788,7 @@ <h4 class="text-sm font-semibold text-red-900 dark:text-red-200 mb-2">Wheel + di <ul class="text-sm text-red-800 dark:text-red-300 space-y-1 list-disc list-inside"> <li>Disabled items are dimmed and skipped during keyboard navigation</li> <li> - Set <code class="bg-red-100 dark:bg-red-800 px-1 rounded">disabledTime.hideOptions: true</code> to + Set <code class="bg-red-100 dark:bg-red-800 px-1 rounded">wheel.hideDisabled: true</code> to completely remove them from the wheel </li> <li> @@ -988,18 +993,20 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< new TimepickerUI('#compact-hide-disabled-hours', { clock: { type: '12h', - disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8], hideOptions: true } + disabledTime: { hours: [1, 2, 3, 4, 5, 6, 7, 8] } }, - ui: { mode: 'compact-wheel' } + ui: { mode: 'compact-wheel' }, + wheel: { hideDisabled: true } }).create(); // hideDisabledOptions — interval 24h new TimepickerUI('#compact-hide-disabled-interval', { clock: { type: '24h', - disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'], hideOptions: true } + disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'] } }, - ui: { mode: 'compact-wheel' } + ui: { mode: 'compact-wheel' }, + wheel: { hideDisabled: true } }).create();</code></pre> </div> </div> @@ -1016,13 +1023,13 @@ <h4 class="text-sm font-semibold text-fuchsia-900 dark:text-fuchsia-200 mb-2"> </li> <li> Set - <code class="bg-fuchsia-100 dark:bg-fuchsia-800 px-1 rounded">disabledTime.hideOptions: true</code> + <code class="bg-fuchsia-100 dark:bg-fuchsia-800 px-1 rounded">wheel.hideDisabled: true</code> to remove disabled items entirely </li> <li> Combine with - <code class="bg-fuchsia-100 dark:bg-fuchsia-800 px-1 rounded">ui.wheel.placement</code> for a - popover variant + <code class="bg-fuchsia-100 dark:bg-fuchsia-800 px-1 rounded">wheel.placement</code> for a popover + variant </li> </ul> </div> diff --git a/app/src/managers/ModalManager.ts b/app/src/managers/ModalManager.ts index 2c4c110..1c3f806 100644 --- a/app/src/managers/ModalManager.ts +++ b/app/src/managers/ModalManager.ts @@ -27,6 +27,10 @@ export default class ModalManager { this.timeouts = []; } + private isPopoverMode(): boolean { + return this.core.options.ui.mode === 'compact-wheel' && !!this.core.options.wheel?.placement; + } + private clearExistingModal(): void { if (isDocument() === false) { return; @@ -80,8 +84,7 @@ export default class ModalManager { return; } - if (this.core.options.ui.inline?.enabled) return; - if (this.core.options.ui.mode === 'compact-wheel' && !!this.core.options.ui.wheel?.placement) return; + if (this.core.options.ui.inline?.enabled || this.isPopoverMode()) return; if (!this.core.options.ui.enableScrollbar) { this.originalOverflow = document.body.style.overflowY; @@ -123,13 +126,7 @@ export default class ModalManager { } setShowClassToBackdrop(): void { - if (this.core.options.ui.inline?.enabled) { - this.core.getModalElement()?.classList.add('show'); - this.setInitialFocus(); - return; - } - - if (this.core.options.ui.mode === 'compact-wheel' && !!this.core.options.ui.wheel?.placement) { + if (this.core.options.ui.inline?.enabled || this.isPopoverMode()) { this.core.getModalElement()?.classList.add('show'); this.setInitialFocus(); return; diff --git a/app/src/managers/clock/ClockSystem.ts b/app/src/managers/clock/ClockSystem.ts index b7abc5c..0fc3ecf 100644 --- a/app/src/managers/clock/ClockSystem.ts +++ b/app/src/managers/clock/ClockSystem.ts @@ -19,7 +19,6 @@ export interface ClockSystemConfig { incrementHours?: number; incrementMinutes?: number; smoothHourSnap?: boolean; - hideOptions?: boolean; onHourChange?: (hour: string) => void; onMinuteChange?: (minute: string) => void; timepicker: unknown; @@ -48,7 +47,6 @@ export class ClockSystem { clockHand: config.clockHand, circle: config.circle, theme: config.theme, - hideOptions: config.hideOptions, }; this.renderer = new ClockRenderer(renderConfig); diff --git a/app/src/managers/clock/handlers/ClockSystemInitializer.ts b/app/src/managers/clock/handlers/ClockSystemInitializer.ts index 4f33d56..dbc8df8 100644 --- a/app/src/managers/clock/handlers/ClockSystemInitializer.ts +++ b/app/src/managers/clock/handlers/ClockSystemInitializer.ts @@ -52,7 +52,6 @@ export class ClockSystemInitializer { incrementHours: this.core.options.clock.incrementHours || 1, incrementMinutes: this.core.options.clock.incrementMinutes || 1, smoothHourSnap: this.core.options.clock.smoothHourSnap ?? true, - hideOptions: this.core.options.clock.disabledTime?.hideOptions ?? false, timepicker: null, dragConfig: { autoSwitchToMinutes: this.core.options.clock.autoSwitchToMinutes, diff --git a/app/src/managers/clock/renderer/ClockRenderer.ts b/app/src/managers/clock/renderer/ClockRenderer.ts index 15aa29f..d38a46d 100644 --- a/app/src/managers/clock/renderer/ClockRenderer.ts +++ b/app/src/managers/clock/renderer/ClockRenderer.ts @@ -175,12 +175,6 @@ export class ClockRenderer { spanTip.classList.add('tp-ui-tips-disabled'); spanTip.setAttribute('aria-disabled', 'true'); spanTip.tabIndex = -1; - - if (this.config.hideOptions === true) { - span.classList.add('tp-ui-tips-hidden'); - } - } else { - span.classList.remove('tp-ui-tips-hidden'); } } diff --git a/app/src/managers/clock/types.ts b/app/src/managers/clock/types.ts index fad305f..e7f48d1 100644 --- a/app/src/managers/clock/types.ts +++ b/app/src/managers/clock/types.ts @@ -56,5 +56,4 @@ export interface RenderConfig { clockHand: HTMLElement; circle: HTMLElement; theme?: string; - hideOptions?: boolean; } diff --git a/app/src/managers/events/ButtonHandlers.ts b/app/src/managers/events/ButtonHandlers.ts index ee9d4ed..be5c5a2 100644 --- a/app/src/managers/events/ButtonHandlers.ts +++ b/app/src/managers/events/ButtonHandlers.ts @@ -46,15 +46,38 @@ export class ButtonHandlers { const handler = (): void => { if (this.core.isDestroyed) return; + const hour = this.core.getHour(); const minutes = this.core.getMinutes(); - const activeTypeMode = this.core.getActiveTypeMode(); - this.emitter.emit('confirm', { - hour: hour?.value, - minutes: minutes?.value, - type: activeTypeMode?.textContent || undefined, - }); + if (hour && minutes) { + const activeTypeMode = this.core.getActiveTypeMode(); + this.emitter.emit('confirm', { + hour: hour.value, + minutes: minutes.value, + type: activeTypeMode?.textContent || undefined, + }); + return; + } + + const modal = this.core.getModalElement(); + if (modal) { + const centerHour = modal.querySelector<HTMLDivElement>( + '.tp-ui-wheel-hours .tp-ui-wheel-item.is-center', + ); + const centerMinute = modal.querySelector<HTMLDivElement>( + '.tp-ui-wheel-minutes .tp-ui-wheel-item.is-center', + ); + const centerAmpm = modal.querySelector<HTMLDivElement>( + '.tp-ui-wheel-ampm .tp-ui-wheel-item.is-center', + ); + + this.emitter.emit('confirm', { + hour: centerHour?.getAttribute('data-value') ?? undefined, + minutes: centerMinute?.getAttribute('data-value') ?? undefined, + type: centerAmpm?.getAttribute('data-value') ?? undefined, + }); + } }; okButton.addEventListener('click', handler); @@ -141,4 +164,3 @@ export class ButtonHandlers { this.cleanupHandlers = []; } } - diff --git a/app/src/managers/plugins/wheel/PopoverManager.ts b/app/src/managers/plugins/wheel/PopoverManager.ts index 76e6469..62fc400 100644 --- a/app/src/managers/plugins/wheel/PopoverManager.ts +++ b/app/src/managers/plugins/wheel/PopoverManager.ts @@ -24,7 +24,7 @@ export default class PopoverManager { } isPopoverMode(): boolean { - return this.core.options.ui.mode === 'compact-wheel' && !!this.core.options.ui.wheel?.placement; + return this.core.options.ui.mode === 'compact-wheel' && !!this.core.options.wheel?.placement; } attach(): void { @@ -56,7 +56,7 @@ export default class PopoverManager { if (!input || !modal) return; const inputRect = input.getBoundingClientRect(); - const placement = this.core.options.ui.wheel?.placement ?? 'auto'; + const placement = this.core.options.wheel?.placement ?? 'auto'; const width = Math.min(Math.max(inputRect.width, TP_POPOVER_MIN_WIDTH_PX), TP_POPOVER_MAX_WIDTH_PX); modal.style.width = `${width}px`; diff --git a/app/src/managers/plugins/wheel/WheelEventHandler.ts b/app/src/managers/plugins/wheel/WheelEventHandler.ts index 082e55d..d4128e9 100644 --- a/app/src/managers/plugins/wheel/WheelEventHandler.ts +++ b/app/src/managers/plugins/wheel/WheelEventHandler.ts @@ -103,7 +103,7 @@ export class WheelEventHandler { type: selection.ampm ?? undefined, }); - if (this.core.options.ui.wheel?.commitOnScroll === true) { + if (this.core.options.wheel?.commitOnScroll === true) { this.scheduleCommitOnScroll(); } } diff --git a/app/src/managers/plugins/wheel/WheelManager.ts b/app/src/managers/plugins/wheel/WheelManager.ts index 8676d8d..8afbf5d 100644 --- a/app/src/managers/plugins/wheel/WheelManager.ts +++ b/app/src/managers/plugins/wheel/WheelManager.ts @@ -16,6 +16,7 @@ export default class WheelManager { private readonly popover: PopoverManager; private amPmHandler: (() => void) | null = null; private hourChangeHandler: (() => void) | null = null; + private clearHandler: (() => void) | null = null; constructor(core: CoreState, emitter: EventEmitter<TimepickerEventMap>) { this.core = core; @@ -40,6 +41,7 @@ export default class WheelManager { this.listenForAmPmChanges(); this.listenForHourChanges(); + this.listenForClear(); this.deferInitialSync(); } @@ -74,6 +76,10 @@ export default class WheelManager { this.emitter.off('select:hour', this.hourChangeHandler); this.hourChangeHandler = null; } + if (this.clearHandler) { + this.emitter.off('clear', this.clearHandler); + this.clearHandler = null; + } this.eventHandler.destroy(); this.scrollHandler.destroy(); this.dragHandler.destroy(); @@ -93,22 +99,50 @@ export default class WheelManager { private syncInitialValues(): void { const hourInput = this.core.getHour(); const minutesInput = this.core.getMinutes(); + const isCompact = this.isCompactWheelMode(); + + let hourValue = hourInput?.value ?? ''; + let minuteValue = minutesInput?.value ?? ''; + + if (isCompact && (!hourValue || !minuteValue)) { + const parsed = this.parseMainInputValue(); + if (!hourValue) hourValue = parsed.hour; + if (!minuteValue) minuteValue = parsed.minutes; + } - if (hourInput?.value) { - this.scrollHandler.scrollToValue('hours', hourInput.value.padStart(2, '0')); + if (hourValue) { + this.scrollHandler.scrollToValue('hours', hourValue.padStart(2, '0')); } - if (minutesInput?.value) { - this.scrollHandler.scrollToValue('minutes', minutesInput.value.padStart(2, '0')); + if (minuteValue) { + this.scrollHandler.scrollToValue('minutes', minuteValue.padStart(2, '0')); } - if (this.isCompactWheelMode()) { + if (isCompact) { const am = this.core.getAM(); const initialPeriod = am?.classList.contains('active') ? 'AM' : 'PM'; this.scrollHandler.scrollToValue('ampm', initialPeriod); } } + private parseMainInputValue(): { hour: string; minutes: string; type?: string } { + const input = this.core.getInput(); + if (!input?.value) return { hour: '', minutes: '' }; + + const value = input.value.trim(); + const [timePart, typePart] = value.split(' '); + const [hStr = '', mStr = ''] = (timePart ?? '').split(':'); + + const hour = hStr.replace(/\D/g, '').padStart(2, '0'); + const minutes = mStr.replace(/\D/g, '').padStart(2, '0'); + + return { + hour, + minutes, + type: this.core.options.clock.type === '12h' ? typePart : undefined, + }; + } + private isCompactWheelMode(): boolean { return this.core.options.ui.mode === 'compact-wheel'; } @@ -124,6 +158,13 @@ export default class WheelManager { this.emitter.on('select:pm', this.amPmHandler); } + private listenForClear(): void { + this.clearHandler = (): void => { + this.deferInitialSync(); + }; + this.emitter.on('clear', this.clearHandler); + } + private listenForHourChanges(): void { const disabled = this.core.disabledTime; if (!disabled?.value?.isInterval) return; diff --git a/app/src/managers/plugins/wheel/WheelRenderer.ts b/app/src/managers/plugins/wheel/WheelRenderer.ts index 3581caa..ed2978a 100644 --- a/app/src/managers/plugins/wheel/WheelRenderer.ts +++ b/app/src/managers/plugins/wheel/WheelRenderer.ts @@ -15,6 +15,7 @@ export class WheelRenderer { private columns: Map<WheelColumnType, HTMLDivElement> = new Map(); private cachedItemHeight: number | null = null; private cachedItems: Map<WheelColumnType, NodeListOf<HTMLDivElement>> = new Map(); + private removedItems: Map<WheelColumnType, HTMLDivElement[]> = new Map(); constructor(core: CoreState, _emitter: EventEmitter<TimepickerEventMap>) { this.core = core; @@ -23,6 +24,7 @@ export class WheelRenderer { init(): void { this.cachedItems.clear(); this.cachedItemHeight = null; + this.restoreRemovedItems(); if (!isDocument()) return; @@ -44,7 +46,7 @@ export class WheelRenderer { const disabled = this.core.disabledTime; if (!disabled?.value) return; - const shouldHide = this.core.options.clock.disabledTime?.hideOptions === true; + const shouldHide = this.core.options.wheel.hideDisabled === true; if (disabled.value.isInterval && disabled.value.intervals) { this.updateDisabledByInterval(disabled.value, shouldHide); @@ -93,8 +95,8 @@ export class WheelRenderer { const allMinutesDisabled = this.isHourFullyDisabled(hourVal, amPm, intervals, clockType); item.classList.toggle('is-disabled', allMinutesDisabled); - if (shouldHide) { - item.classList.toggle('is-hidden', allMinutesDisabled); + if (shouldHide && allMinutesDisabled) { + this.removeItemFromDOM(item, hoursColumn); } }); } @@ -108,8 +110,8 @@ export class WheelRenderer { const isValid = checkedDisabledValuesInterval(currentHour, minuteVal, amPm, intervals, clockType); item.classList.toggle('is-disabled', !isValid); - if (shouldHide) { - item.classList.toggle('is-hidden', !isValid); + if (shouldHide && !isValid) { + this.removeItemFromDOM(item, minutesColumn); } }); } @@ -139,8 +141,8 @@ export class WheelRenderer { const numVal = String(parseInt(val, 10)); const isDisabled = disabledSet.has(numVal) || disabledSet.has(val); item.classList.toggle('is-disabled', isDisabled); - if (shouldHide) { - item.classList.toggle('is-hidden', isDisabled); + if (shouldHide && isDisabled) { + this.removeItemFromDOM(item, column); } } }); @@ -168,10 +170,7 @@ export class WheelRenderer { const col = this.columns.get(type); if (!col) return null; - const shouldHide = this.core.options.clock.disabledTime?.hideOptions === true; - const selector = shouldHide ? '.tp-ui-wheel-item:not(.is-hidden)' : '.tp-ui-wheel-item'; - - const items = col.querySelectorAll<HTMLDivElement>(selector); + const items = col.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item'); this.cachedItems.set(type, items); return items; } @@ -192,7 +191,7 @@ export class WheelRenderer { const hoursCol = this.columns.get('hours'); if (!hoursCol) return 0; - const firstItem = hoursCol.querySelector<HTMLDivElement>('.tp-ui-wheel-item:not(.is-hidden)'); + const firstItem = hoursCol.querySelector<HTMLDivElement>('.tp-ui-wheel-item'); if (!firstItem) return 0; const height = firstItem.getBoundingClientRect().height; @@ -202,9 +201,63 @@ export class WheelRenderer { return height; } + private removeItemFromDOM(item: HTMLDivElement, column: HTMLDivElement): void { + const type = this.getColumnTypeByElement(column); + if (!type) return; + + const list = this.removedItems.get(type) ?? []; + list.push(item); + this.removedItems.set(type, list); + + item.remove(); + } + + private restoreRemovedItems(): void { + const columnTypes: readonly WheelColumnType[] = ['hours', 'minutes', 'ampm']; + columnTypes.forEach((type) => { + const removed = this.removedItems.get(type); + if (!removed || removed.length === 0) return; + + const col = this.columns.get(type); + if (!col) return; + + const existingItems = Array.from(col.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-item')); + removed.forEach((item) => { + item.classList.remove('is-disabled'); + const itemValue = parseInt(item.getAttribute('data-value') ?? '0', 10); + const insertBefore = existingItems.find((existing) => { + const existingValue = parseInt(existing.getAttribute('data-value') ?? '0', 10); + return existingValue > itemValue; + }); + if (insertBefore) { + col.insertBefore(item, insertBefore); + } else { + col.appendChild(item); + } + existingItems.push(item); + existingItems.sort((a, b) => { + return ( + parseInt(a.getAttribute('data-value') ?? '0', 10) - + parseInt(b.getAttribute('data-value') ?? '0', 10) + ); + }); + }); + }); + this.removedItems.clear(); + } + + private getColumnTypeByElement(column: HTMLDivElement): WheelColumnType | null { + for (const [type, el] of this.columns) { + if (el === column) return type; + } + return null; + } + destroy(): void { + this.restoreRemovedItems(); this.columns.clear(); this.cachedItems.clear(); this.cachedItemHeight = null; + this.removedItems.clear(); } } diff --git a/app/src/styles/partials/_clock.scss b/app/src/styles/partials/_clock.scss index 873131e..339871b 100644 --- a/app/src/styles/partials/_clock.scss +++ b/app/src/styles/partials/_clock.scss @@ -173,8 +173,4 @@ color: var(--tp-text-disabled); pointer-events: none; } - - &-tips-hidden { - display: none; - } } diff --git a/app/src/styles/partials/_wheel.scss b/app/src/styles/partials/_wheel.scss index f883d12..883f210 100644 --- a/app/src/styles/partials/_wheel.scss +++ b/app/src/styles/partials/_wheel.scss @@ -62,10 +62,6 @@ pointer-events: none; } -.tp-ui-wheel-item.is-hidden { - display: none; -} - .tp-ui-wheel-padding { height: var(--tp-wheel-item-height); pointer-events: none; diff --git a/app/src/timepicker/Lifecycle.ts b/app/src/timepicker/Lifecycle.ts index 55c8de7..a01b9d5 100644 --- a/app/src/timepicker/Lifecycle.ts +++ b/app/src/timepicker/Lifecycle.ts @@ -9,6 +9,8 @@ import { isDocument, isNode } from '../utils/node'; import { TIMINGS } from '../constants/timings'; import type WheelManager from '../managers/plugins/wheel/WheelManager'; +const THEME_CLASSES = ['basic', 'crane-straight', 'crane', 'm2', 'm3-green'] as const; + type TypeFunction = () => void; export class Lifecycle { @@ -190,7 +192,7 @@ export class Lifecycle { openElements?.forEach((el) => { if (el) { el.classList.remove('disabled', 'active', 'tp-ui-open-element'); - el.classList.remove('basic', 'crane-straight', 'crane', 'm2', 'm3-green'); + el.classList.remove(...THEME_CLASSES); } }); @@ -207,7 +209,7 @@ export class Lifecycle { const element = this.core.element; if (element) { - element.classList.remove('basic', 'crane-straight', 'crane', 'm2', 'm3-green'); + element.classList.remove(...THEME_CLASSES); element.classList.remove('error', 'active', 'disabled'); element.removeAttribute('data-owner-id'); element.removeAttribute('data-open'); @@ -329,7 +331,7 @@ export class Lifecycle { } private isPopoverMode(): boolean { - return this.isCompactWheelMode() && !!this.core.options.ui.wheel?.placement; + return this.isCompactWheelMode() && !!this.core.options.wheel?.placement; } private resolveWheelMode(): boolean { diff --git a/app/src/types/options.d.ts b/app/src/types/options.d.ts index 1bc3fe2..c49c6fd 100644 --- a/app/src/types/options.d.ts +++ b/app/src/types/options.d.ts @@ -71,13 +71,6 @@ export interface ClockOptions { minutes?: Array<string | number>; hours?: Array<string | number>; interval?: string | string[]; - /** - * @description When true, disabled hours/minutes are completely removed from the list - * instead of being dimmed. Useful when many values are disabled (e.g., business hours only). - * Works in all modes: clock, wheel, compact-wheel. - * @default false - */ - hideOptions?: boolean; }; /** @@ -209,41 +202,6 @@ export interface UIOptions { showButtons?: boolean; autoUpdate?: boolean; }; - - /** - * @description Wheel / compact-wheel mode configuration - * @example - * wheel: { - * placement: 'auto', - * hideFooter: true, - * commitOnScroll: true - * } - */ - wheel?: { - /** - * @description Popover placement relative to input in compact-wheel mode. - * 'auto' opens below if space allows, otherwise above. - * When undefined, compact-wheel behaves as a normal centered modal with backdrop. - * @default undefined - */ - placement?: 'auto' | 'top' | 'bottom'; - - /** - * @description When true, the footer (OK/Cancel/Clear buttons + switch icon) - * is not rendered in the DOM at all. Only works in compact-wheel mode. - * Useful when commitOnScroll is enabled and buttons are unnecessary. - * @default false - */ - hideFooter?: boolean; - - /** - * @description When enabled, the timepicker automatically commits the selected time - * at the end of wheel scrolling, updating the input value and emitting a change event - * without requiring the user to press OK. Only applies to wheel and compact-wheel modes. - * @default false - */ - commitOnScroll?: boolean; - }; } /** @@ -366,6 +324,50 @@ export interface TimezoneOptions { label?: string; } +/** + * Wheel / compact-wheel mode configuration + * @example + * wheel: { + * placement: 'auto', + * hideFooter: true, + * commitOnScroll: true + * } + */ +export interface WheelOptions { + /** + * @description Popover placement relative to input in compact-wheel mode. + * 'auto' opens below if space allows, otherwise above. + * Defaults to 'auto' in compact-wheel mode. + * Can be overridden to 'top' or 'bottom' for fixed positioning. + * @default 'auto' (compact-wheel) | undefined (wheel) + */ + placement?: 'auto' | 'top' | 'bottom'; + + /** + * @description When true, the footer (OK/Cancel/Clear buttons + switch icon) + * is not rendered in the DOM at all. Only works in compact-wheel mode. + * Useful when commitOnScroll is enabled and buttons are unnecessary. + * @default false + */ + hideFooter?: boolean; + + /** + * @description When enabled, the timepicker automatically commits the selected time + * at the end of wheel scrolling, updating the input value and emitting a change event + * without requiring the user to press OK. Only applies to wheel and compact-wheel modes. + * @default false + */ + commitOnScroll?: boolean; + + /** + * @description When true, disabled hours/minutes are completely removed from the wheel list + * instead of being dimmed. Only applies to wheel and compact-wheel modes. + * Useful when many values are disabled (e.g., business hours only). + * @default false + */ + hideDisabled?: boolean; +} + /** * Range mode configuration (opt-in) */ @@ -496,5 +498,6 @@ export interface TimepickerOptions { callbacks?: CallbacksOptions; timezone?: TimezoneOptions; range?: RangeOptions; + wheel?: WheelOptions; clearBehavior?: ClearBehaviorOptions; } diff --git a/app/src/utils/options/defaults.ts b/app/src/utils/options/defaults.ts index fd99967..5ec6c67 100644 --- a/app/src/utils/options/defaults.ts +++ b/app/src/utils/options/defaults.ts @@ -25,7 +25,6 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { iconTemplateMobile: '', inline: undefined, clearButton: true, - wheel: undefined, }, labels: { @@ -79,6 +78,13 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { toLabel: 'To', }, + wheel: { + placement: undefined, + hideFooter: undefined, + commitOnScroll: undefined, + hideDisabled: undefined, + }, + clearBehavior: { clearInput: true, }, @@ -114,6 +120,10 @@ export function mergeOptions(userOptions: TimepickerOptions = {}): Required<Time ...DEFAULT_OPTIONS.range, ...userOptions.range, }, + wheel: { + ...DEFAULT_OPTIONS.wheel, + ...userOptions.wheel, + }, clearBehavior: { ...DEFAULT_OPTIONS.clearBehavior, ...userOptions.clearBehavior, @@ -122,11 +132,11 @@ export function mergeOptions(userOptions: TimepickerOptions = {}): Required<Time const mergedMode = merged.ui.mode; if (mergedMode === 'wheel' || mergedMode === 'compact-wheel') { - merged.ui.wheel = { + merged.wheel = { placement: mergedMode === 'compact-wheel' ? 'auto' : undefined, hideFooter: undefined, commitOnScroll: undefined, - ...merged.ui.wheel, + ...merged.wheel, }; } diff --git a/app/src/utils/template/index.ts b/app/src/utils/template/index.ts index a8c4f40..b0f0739 100644 --- a/app/src/utils/template/index.ts +++ b/app/src/utils/template/index.ts @@ -136,7 +136,7 @@ export const getModalTemplate = (options: Required<TimepickerOptions>, instanceI const header = isCompactWheel ? '' : buildHeader(options, config); const pickerBody = buildPickerBody(config, incrementMinutes ?? 1); const footer = - isCompactWheel && options.ui.wheel?.hideFooter === true ? '' : buildFooter(options, mobileClass); + isCompactWheel && options.wheel?.hideFooter === true ? '' : buildFooter(options, mobileClass); const wheelClass = isCompactWheel ? ' tp-ui-compact-wheel-mode' : isWheelMode ? ' tp-ui-wheel-mode' : ''; diff --git a/app/tests/unit/managers/WheelManager.test.ts b/app/tests/unit/managers/WheelManager.test.ts index 3e3f7b6..983f95f 100644 --- a/app/tests/unit/managers/WheelManager.test.ts +++ b/app/tests/unit/managers/WheelManager.test.ts @@ -109,6 +109,7 @@ function createWheelOptions(overrides: Partial<TimepickerOptions> = {}): Require callbacks: { ...DEFAULT_OPTIONS.callbacks, ...overrides.callbacks }, timezone: { ...DEFAULT_OPTIONS.timezone, ...overrides.timezone }, range: { ...DEFAULT_OPTIONS.range, ...overrides.range }, + wheel: { ...DEFAULT_OPTIONS.wheel, ...overrides.wheel }, clearBehavior: { ...DEFAULT_OPTIONS.clearBehavior, ...overrides.clearBehavior }, }; } diff --git a/app/tests/unit/managers/plugins/wheel/WheelEventHandler.edge.test.ts b/app/tests/unit/managers/plugins/wheel/WheelEventHandler.edge.test.ts index 2d408dd..5c9f013 100644 --- a/app/tests/unit/managers/plugins/wheel/WheelEventHandler.edge.test.ts +++ b/app/tests/unit/managers/plugins/wheel/WheelEventHandler.edge.test.ts @@ -54,7 +54,8 @@ describe('WheelEventHandler edge cases', () => { const commitOpts = createWheelOptions({ clock: { type: '12h' }, - ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, + ui: { mode: 'wheel' }, + wheel: { commitOnScroll: true }, }); const element = document.createElement('div'); const input = document.createElement('input'); @@ -255,7 +256,8 @@ describe('WheelEventHandler edge cases', () => { const commitOpts = createWheelOptions({ clock: { type: '12h' }, - ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, + ui: { mode: 'wheel' }, + wheel: { commitOnScroll: true }, }); ctx.core.setOptions(commitOpts); diff --git a/app/tests/unit/managers/plugins/wheel/WheelHeaderSync.test.ts b/app/tests/unit/managers/plugins/wheel/WheelHeaderSync.test.ts index 686bee3..ff186f3 100644 --- a/app/tests/unit/managers/plugins/wheel/WheelHeaderSync.test.ts +++ b/app/tests/unit/managers/plugins/wheel/WheelHeaderSync.test.ts @@ -269,7 +269,8 @@ describe('Wheel commitOnScroll after disabled skip', () => { type: '12h', disabledTime: { minutes: [28, 29, 30, 31, 32] }, }, - ui: { mode: 'wheel', wheel: { commitOnScroll: true } }, + ui: { mode: 'wheel' }, + wheel: { commitOnScroll: true }, }); core = new CoreState(element, options, INSTANCE_ID); diff --git a/app/tests/unit/managers/plugins/wheel/WheelHideDisabled.test.ts b/app/tests/unit/managers/plugins/wheel/WheelHideDisabled.test.ts index b103bb2..75c8810 100644 --- a/app/tests/unit/managers/plugins/wheel/WheelHideDisabled.test.ts +++ b/app/tests/unit/managers/plugins/wheel/WheelHideDisabled.test.ts @@ -126,8 +126,9 @@ describe('Wheel + hideDisabledOptions (pointer drag & touch)', () => { const options = createWheelOptions({ clock: { type: '12h', - disabledTime: { hours: [1, 2, 3, 4, 5, 6], minutes: [0, 15, 30, 45], hideOptions: true }, + disabledTime: { hours: [1, 2, 3, 4, 5, 6], minutes: [0, 15, 30, 45] }, }, + wheel: { hideDisabled: true }, }); core = new CoreState(element, options, INSTANCE_ID); diff --git a/app/tests/unit/managers/plugins/wheel/WheelHideDisabledPopover.test.ts b/app/tests/unit/managers/plugins/wheel/WheelHideDisabledPopover.test.ts new file mode 100644 index 0000000..f1934ca --- /dev/null +++ b/app/tests/unit/managers/plugins/wheel/WheelHideDisabledPopover.test.ts @@ -0,0 +1,361 @@ +import { WheelRenderer } from '../../../../../src/managers/plugins/wheel/WheelRenderer'; +import { WheelDragHandler } from '../../../../../src/managers/plugins/wheel/WheelDragHandler'; +import { WheelScrollHandler } from '../../../../../src/managers/plugins/wheel/WheelScrollHandler'; +import WheelManager from '../../../../../src/managers/plugins/wheel/WheelManager'; +import { CoreState } from '../../../../../src/timepicker/CoreState'; +import { EventEmitter, type TimepickerEventMap } from '../../../../../src/utils/EventEmitter'; +import { createWheelOptions, WHEEL_ITEM_HEIGHT_PX } from './wheel-test-helpers'; + +const DISABLED_HOURS_24H = [0, 1, 2, 3, 4, 5, 22, 23]; +const INCREMENT_MINUTES = 5; +const INSTANCE_ID = 'hide-disabled-popover-test'; + +function buildCompactWheelModal(instanceId: string): HTMLDivElement { + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', instanceId); + modal.classList.add('tp-ui-modal', 'tp-ui-compact-wheel-mode'); + + const wrapper = document.createElement('div'); + wrapper.className = 'tp-ui-wrapper'; + + const clockWrapper = document.createElement('div'); + clockWrapper.className = 'tp-ui-mobile-clock-wrapper'; + + const container = document.createElement('div'); + container.className = 'tp-ui-wheel-container'; + + const hoursWrapper = document.createElement('div'); + hoursWrapper.className = 'tp-ui-wheel-column-wrapper at-start'; + const hoursCol = document.createElement('div'); + hoursCol.className = 'tp-ui-wheel-column tp-ui-wheel-hours'; + hoursCol.setAttribute('role', 'listbox'); + hoursCol.setAttribute('tabindex', '0'); + + for (let i = 0; i <= 23; i++) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + const val = String(i).padStart(2, '0'); + item.setAttribute('data-value', val); + item.setAttribute('role', 'option'); + item.textContent = val; + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + hoursCol.appendChild(item); + } + + hoursWrapper.appendChild(hoursCol); + container.appendChild(hoursWrapper); + + const minutesWrapper = document.createElement('div'); + minutesWrapper.className = 'tp-ui-wheel-column-wrapper at-start'; + const minutesCol = document.createElement('div'); + minutesCol.className = 'tp-ui-wheel-column tp-ui-wheel-minutes'; + minutesCol.setAttribute('role', 'listbox'); + minutesCol.setAttribute('tabindex', '0'); + + for (let i = 0; i < 60; i += INCREMENT_MINUTES) { + const item = document.createElement('div'); + item.className = 'tp-ui-wheel-item'; + const val = String(i).padStart(2, '0'); + item.setAttribute('data-value', val); + item.setAttribute('role', 'option'); + item.textContent = val; + item.style.height = `${WHEEL_ITEM_HEIGHT_PX}px`; + minutesCol.appendChild(item); + } + + minutesWrapper.appendChild(minutesCol); + container.appendChild(minutesWrapper); + + clockWrapper.appendChild(container); + wrapper.appendChild(clockWrapper); + modal.appendChild(wrapper); + return modal; +} + +describe('Wheel hideDisabled — compact-wheel popover 24h + 5min step', () => { + let element: HTMLDivElement; + let modal: HTMLDivElement; + let core: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let renderer: WheelRenderer; + let dragHandler: WheelDragHandler; + let scrollHandler: WheelScrollHandler; + + beforeEach(() => { + element = document.createElement('div'); + const input = document.createElement('input'); + input.type = 'text'; + input.value = '10:00'; + element.appendChild(input); + document.body.appendChild(element); + + const options = createWheelOptions({ + clock: { + type: '24h', + incrementMinutes: INCREMENT_MINUTES, + disabledTime: { hours: DISABLED_HOURS_24H }, + }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', hideDisabled: true }, + }); + + core = new CoreState(element, options, INSTANCE_ID); + core.setDisabledTime({ + value: { + hours: DISABLED_HOURS_24H.map(String), + }, + }); + + modal = buildCompactWheelModal(INSTANCE_ID); + document.body.appendChild(modal); + + emitter = new EventEmitter<TimepickerEventMap>(); + renderer = new WheelRenderer(core, emitter); + dragHandler = new WheelDragHandler(renderer); + scrollHandler = new WheelScrollHandler(renderer, core); + scrollHandler.setDragHandler(dragHandler); + + jest.spyOn(renderer, 'getItemHeight').mockReturnValue(WHEEL_ITEM_HEIGHT_PX); + + renderer.init(); + dragHandler.init(); + scrollHandler.init(); + }); + + afterEach(() => { + scrollHandler.destroy(); + dragHandler.destroy(); + renderer.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + describe('disabled hours removal', () => { + it('should remove disabled hours [0-5, 22-23] from DOM', () => { + const items = renderer.getItems('hours'); + const values = Array.from(items ?? []).map((el) => el.getAttribute('data-value')); + + DISABLED_HOURS_24H.forEach((h) => { + expect(values).not.toContain(String(h).padStart(2, '0')); + }); + }); + + it('should keep enabled hours 06-21 visible', () => { + const items = renderer.getItems('hours'); + const values = Array.from(items ?? []).map((el) => el.getAttribute('data-value')); + + for (let h = 6; h <= 21; h++) { + expect(values).toContain(String(h).padStart(2, '0')); + } + }); + + it('should report 16 visible hours (24 total minus 8 disabled)', () => { + expect(renderer.getItemCount('hours')).toBe(16); + }); + }); + + describe('initial value sync after hideDisabled', () => { + it('should scroll to hour 10 when input value is 10:00', () => { + scrollHandler.scrollToValue('hours', '10'); + const selected = scrollHandler.getSelectedValue('hours'); + + expect(selected).toBe('10'); + }); + + it('should scroll to minute 00 when input value is 10:00', () => { + scrollHandler.scrollToValue('minutes', '00'); + const selected = scrollHandler.getSelectedValue('minutes'); + + expect(selected).toBe('00'); + }); + + it('should return correct selection state for 10:00 in 24h mode', () => { + scrollHandler.scrollToValue('hours', '10'); + scrollHandler.scrollToValue('minutes', '00'); + + const selection = scrollHandler.getCurrentSelection(); + + expect(selection.hour).toBe('10'); + expect(selection.minute).toBe('00'); + expect(selection.ampm).toBeNull(); + }); + + it('should scroll to hour 15 (enabled, not removed)', () => { + scrollHandler.scrollToValue('hours', '15'); + const selected = scrollHandler.getSelectedValue('hours'); + + expect(selected).toBe('15'); + }); + + it('should not find removed hour 03 via scrollToValue', () => { + scrollHandler.scrollToValue('hours', '03'); + const selected = scrollHandler.getSelectedValue('hours'); + + expect(selected).not.toBe('03'); + }); + + it('should not find removed hour 00 via scrollToValue', () => { + scrollHandler.scrollToValue('hours', '00'); + const selected = scrollHandler.getSelectedValue('hours'); + + expect(selected).not.toBe('00'); + }); + }); + + describe('minute increments with hideDisabled', () => { + it('should have 12 minute options (0, 5, 10, ..., 55)', () => { + expect(renderer.getItemCount('minutes')).toBe(12); + }); + + it('should have minute values at 5min intervals', () => { + const items = renderer.getItems('minutes'); + const values = Array.from(items ?? []).map((el) => el.getAttribute('data-value')); + + const expectedMinutes = Array.from({ length: 12 }, (_, i) => + String(i * INCREMENT_MINUTES).padStart(2, '0'), + ); + + expect(values).toEqual(expectedMinutes); + }); + + it('should scroll to minute 30 correctly', () => { + scrollHandler.scrollToValue('minutes', '30'); + const selected = scrollHandler.getSelectedValue('minutes'); + + expect(selected).toBe('30'); + }); + }); + + describe('edge cases', () => { + it('should scroll to first enabled hour (06) from index 0', () => { + scrollHandler.scrollToValue('hours', '06'); + const selected = scrollHandler.getSelectedValue('hours'); + + expect(selected).toBe('06'); + }); + + it('should scroll to last enabled hour (21) correctly', () => { + scrollHandler.scrollToValue('hours', '21'); + const selected = scrollHandler.getSelectedValue('hours'); + + expect(selected).toBe('21'); + }); + + it('should apply visual classes for scrolled-to hour', () => { + scrollHandler.scrollToValue('hours', '10'); + scrollHandler.updateVisualClasses('hours'); + + const items = renderer.getItems('hours'); + const centerItem = Array.from(items ?? []).find((el) => el.getAttribute('data-value') === '10'); + + expect(centerItem?.classList.contains('is-center')).toBe(true); + expect(centerItem?.getAttribute('aria-selected')).toBe('true'); + }); + }); +}); + +describe('WheelManager integration — popover 24h hideDisabled + 5min step', () => { + let element: HTMLDivElement; + let modal: HTMLDivElement; + let core: CoreState; + let emitter: EventEmitter<TimepickerEventMap>; + let wheelManager: WheelManager; + + beforeEach(() => { + jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({ + height: WHEEL_ITEM_HEIGHT_PX, + width: 80, + x: 0, + y: 0, + top: 0, + left: 0, + bottom: WHEEL_ITEM_HEIGHT_PX, + right: 80, + toJSON: () => ({}), + }); + + element = document.createElement('div'); + const input = document.createElement('input'); + input.type = 'text'; + input.value = '10:00'; + element.appendChild(input); + document.body.appendChild(element); + + const options = createWheelOptions({ + clock: { + type: '24h', + incrementMinutes: INCREMENT_MINUTES, + disabledTime: { hours: DISABLED_HOURS_24H }, + }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', hideDisabled: true }, + }); + + core = new CoreState(element, options, INSTANCE_ID); + core.setDisabledTime({ + value: { + hours: DISABLED_HOURS_24H.map(String), + }, + }); + + modal = buildCompactWheelModal(INSTANCE_ID); + document.body.appendChild(modal); + + emitter = new EventEmitter<TimepickerEventMap>(); + wheelManager = new WheelManager(core, emitter); + }); + + afterEach(() => { + wheelManager.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + }); + + it('should select hour 10 after init + deferred sync via rAF', () => { + const rafCallbacks: FrameRequestCallback[] = []; + jest.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((cb) => { + rafCallbacks.push(cb); + return rafCallbacks.length; + }); + + wheelManager.init(); + + rafCallbacks.forEach((cb) => cb(0)); + + const hourItems = modal.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-hours .tp-ui-wheel-item'); + const centerItem = Array.from(hourItems).find((el) => el.classList.contains('is-center')); + + expect(centerItem).toBeDefined(); + expect(centerItem?.getAttribute('data-value')).toBe('10'); + }); + + it('should select minute 00 after init + deferred sync via rAF', () => { + const rafCallbacks: FrameRequestCallback[] = []; + jest.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((cb) => { + rafCallbacks.push(cb); + return rafCallbacks.length; + }); + + wheelManager.init(); + + rafCallbacks.forEach((cb) => cb(0)); + + const minuteItems = modal.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-minutes .tp-ui-wheel-item'); + const centerItem = Array.from(minuteItems).find((el) => el.classList.contains('is-center')); + + expect(centerItem).toBeDefined(); + expect(centerItem?.getAttribute('data-value')).toBe('00'); + }); + + it('should not have any disabled hour in the DOM', () => { + wheelManager.init(); + + const hourItems = modal.querySelectorAll<HTMLDivElement>('.tp-ui-wheel-hours .tp-ui-wheel-item'); + const values = Array.from(hourItems).map((el) => el.getAttribute('data-value')); + + DISABLED_HOURS_24H.forEach((h) => { + expect(values).not.toContain(String(h).padStart(2, '0')); + }); + }); +}); + diff --git a/app/tests/unit/managers/plugins/wheel/WheelRenderer.edge.test.ts b/app/tests/unit/managers/plugins/wheel/WheelRenderer.edge.test.ts index a3ed603..3a412b0 100644 --- a/app/tests/unit/managers/plugins/wheel/WheelRenderer.edge.test.ts +++ b/app/tests/unit/managers/plugins/wheel/WheelRenderer.edge.test.ts @@ -21,7 +21,8 @@ describe('WheelRenderer edge cases', () => { describe('hideDisabledOptions + cache invalidation', () => { it('should exclude hidden items from getItems after updateDisabledItems', () => { const hideOpts = createWheelOptions({ - clock: { type: '12h', disabledTime: { hideOptions: true } }, + clock: { type: '12h', disabledTime: {} }, + wheel: { hideDisabled: true }, }); const hideCore = new CoreState(ctx.element, hideOpts, ctx.core.instanceId); const hideRenderer = new WheelRenderer(hideCore, ctx.emitter); diff --git a/app/tests/unit/managers/plugins/wheel/wheel-test-helpers.ts b/app/tests/unit/managers/plugins/wheel/wheel-test-helpers.ts index 78da75c..d5645fd 100644 --- a/app/tests/unit/managers/plugins/wheel/wheel-test-helpers.ts +++ b/app/tests/unit/managers/plugins/wheel/wheel-test-helpers.ts @@ -128,6 +128,7 @@ function createWheelOptions(overrides: Partial<TimepickerOptions> = {}): Require callbacks: { ...DEFAULT_OPTIONS.callbacks, ...overrides.callbacks }, timezone: { ...DEFAULT_OPTIONS.timezone, ...overrides.timezone }, range: { ...DEFAULT_OPTIONS.range, ...overrides.range }, + wheel: { ...DEFAULT_OPTIONS.wheel, ...overrides.wheel }, clearBehavior: { ...DEFAULT_OPTIONS.clearBehavior, ...overrides.clearBehavior }, }; } From b272b75f50787a9c089e95b998234a546c546410 Mon Sep 17 00:00:00 2001 From: pglejzer <glejzerpiotr@gmail.com> Date: Mon, 16 Mar 2026 21:05:57 +0100 Subject: [PATCH 06/10] update --- CHANGELOG.md | 7 +- README.md | 14 ++-- docs-app/app/docs/api/options/page.tsx | 65 +++++++++++++------ docs-app/app/docs/changelog/page.tsx | 10 +-- docs-app/app/docs/configuration/page.tsx | 56 +++++++++++----- .../app/docs/features/wheel-mode/page.tsx | 38 +++++------ docs-app/app/docs/whats-new/page.tsx | 8 +-- 7 files changed, 120 insertions(+), 78 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 88bc824..aa6e7f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,9 +18,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `wheel:scroll:start` event - fires when a wheel column starts scrolling (includes `column` field) - `wheel:scroll:end` event - fires when a wheel column snaps to a value (includes `column`, `value`, `previousValue` fields) - Exported `WheelScrollStartEventData` and `WheelScrollEndEventData` types -- `ui.wheel.placement` option (`'auto'` | `'top'` | `'bottom'`) for popover positioning in compact-wheel mode -- `clock.disabledTime.hideOptions` option to completely remove disabled hours/minutes from the list instead of dimming them -- `ui.wheel.commitOnScroll` option to auto-commit time at the end of wheel scrolling without pressing OK +- `wheel.placement` option (`'auto'` | `'top'` | `'bottom'`) for popover positioning in compact-wheel mode +- `wheel.hideDisabled` option to completely remove disabled hours/minutes from the wheel list instead of dimming them (wheel and compact-wheel modes only) +- `wheel.commitOnScroll` option to auto-commit time at the end of wheel scrolling without pressing OK - `autoCommit` field on `ConfirmEventData` to distinguish auto-committed from manual confirmations - Clear button to reset time selection. Enabled by default via `ui.clearButton` option - `clearBehavior.clearInput` option to control whether clearing also empties the input field value @@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Clock hands reset to neutral position (12:00) and confirm button disables after clearing - Screen reader announcement when time is cleared - Exported `ClearEventData` and `ClearBehaviorOptions` types +- `WheelOptions` is now a top-level key (`wheel`) instead of being nested inside `ui.wheel` --- diff --git a/README.md b/README.md index b97aff3..8eb6c5d 100644 --- a/README.md +++ b/README.md @@ -379,12 +379,12 @@ Wheel mode works with all existing features: - **12h / 24h**: Respects `clock.type` - AM/PM column appears only in 12h mode - **Themes**: Inherits the active theme via CSS variables - **Disabled time**: Disabled hours/minutes are dimmed and skipped during scroll snap -- **Hide disabled options**: Set `clock.disabledTime.hideOptions: true` to completely remove disabled values from the list +- **Hide disabled options**: Set `wheel.hideDisabled: true` to completely remove disabled values from the list - **setValue / getValue**: `picker.setValue('09:30 AM')` scrolls the wheel to the correct position - **Keyboard navigation**: Arrow Up/Down scrolls one item, Tab moves between columns - **Events**: All standard events work - `select:hour`, `select:minute`, `update`, `confirm`, `cancel`, `clear`, `select:am`, `select:pm`, `error` - **Wheel-specific events**: `wheel:scroll:start` (column starts scrolling), `wheel:scroll:end` (column snaps to value with `previousValue`) -- **Auto-commit**: Set `ui.wheel.commitOnScroll: true` to auto-confirm on scroll end without pressing OK +- **Auto-commit**: Set `wheel.commitOnScroll: true` to auto-confirm on scroll end without pressing OK ### Compact-Wheel Mode @@ -398,15 +398,13 @@ const picker = new TimepickerUI(input, { picker.create(); ``` -Combine with `ui.wheel.placement` to open as a popover anchored to the input: +Combine with `wheel.placement` to open as a popover anchored to the input: ```javascript const picker = new TimepickerUI(input, { - ui: { - mode: "compact-wheel", - wheel: { - placement: "auto", // 'auto', 'top', or 'bottom' - }, + ui: { mode: "compact-wheel" }, + wheel: { + placement: "auto", // 'auto', 'top', or 'bottom' }, }); ``` diff --git a/docs-app/app/docs/api/options/page.tsx b/docs-app/app/docs/api/options/page.tsx index 0783644..6c31375 100644 --- a/docs-app/app/docs/api/options/page.tsx +++ b/docs-app/app/docs/api/options/page.tsx @@ -150,12 +150,27 @@ const uiOptions = [ description: "Picker mode \u2014 analog clock face, scroll-spinner wheels, or headerless wheel", }, +]; + +const wheelOptions = [ { - name: "wheel", - type: "WheelOptions", + name: "placement", + type: '"auto" | "top" | "bottom"', default: "undefined", + description: "Popover placement relative to input in compact-wheel mode", + }, + { + name: "hideFooter", + type: "boolean", + default: "false", + description: "Hide footer (OK/Cancel/Clear buttons) in compact-wheel mode", + }, + { + name: "commitOnScroll", + type: "boolean", + default: "false", description: - "Wheel/compact-wheel config (placement, hideFooter, commitOnScroll)", + "Auto-commit time at end of wheel scrolling without pressing OK", }, ]; @@ -415,6 +430,14 @@ export default function OptionsPage() { <OptionsTable options={uiOptions} /> </Section> + <Section icon={Layout} title="Wheel Options"> + <p className="text-muted-foreground mb-4"> + Wheel / compact-wheel mode configuration via{" "} + <code className="text-primary">wheel</code>: + </p> + <OptionsTable options={wheelOptions} /> + </Section> + <Section icon={Type} title="Labels Options"> <p className="text-muted-foreground mb-4"> Customize all text labels for localization: @@ -500,17 +523,15 @@ export default function OptionsPage() { <Section icon={Layout} title="Wheel Mode Configuration"> <p className="text-muted-foreground mb-4"> Configure wheel/compact-wheel mode via{" "} - <code className="text-primary">ui.wheel</code>: + <code className="text-primary">wheel</code>: </p> <CodeBlock code={`const picker = new TimepickerUI(input, { - ui: { - mode: 'wheel', - wheel: { - placement: 'bottom', // Popover placement (compact-wheel only) - hideFooter: true, // Hide OK/Cancel footer - commitOnScroll: true // Commit value on scroll end - } + ui: { mode: 'wheel' }, + wheel: { + placement: 'bottom', // Popover placement (compact-wheel only) + hideFooter: true, // Hide OK/Cancel footer + commitOnScroll: true // Commit value on scroll end } });`} language="typescript" @@ -529,8 +550,10 @@ export default function OptionsPage() { hours: [1, 3, 5, 8], // Disable specific hours minutes: [15, 30, 45], // Disable specific minutes interval: 15, // Or use interval shorthand (15, 30, etc.) - hideOptions: true // Hide disabled items instead of greying out } + }, + wheel: { + hideDisabled: true // Hide disabled items instead of greying out (wheel modes only) } });`} language="typescript" @@ -570,8 +593,7 @@ export default function OptionsPage() { autoSwitchToMinutes: true, disabledTime: { hours: [0, 1, 2, 3], - interval: 15, - hideOptions: true + interval: 15 }, currentTime: { updateInput: true, @@ -589,12 +611,15 @@ export default function OptionsPage() { enableSwitchIcon: false, editable: false, cssClass: 'custom-picker', - appendModalSelector: '#timepicker-container', - wheel: { - placement: 'bottom', - hideFooter: true, - commitOnScroll: true - } + appendModalSelector: '#timepicker-container' + }, + + // Wheel options + wheel: { + placement: 'bottom', + hideFooter: true, + commitOnScroll: true, + hideDisabled: true }, // Labels options diff --git a/docs-app/app/docs/changelog/page.tsx b/docs-app/app/docs/changelog/page.tsx index bb1f959..fe7422a 100644 --- a/docs-app/app/docs/changelog/page.tsx +++ b/docs-app/app/docs/changelog/page.tsx @@ -69,20 +69,20 @@ const CHANGELOG_420 = { { title: "Compact-wheel mode", description: - "Headerless wheel picker without the hour/minute inputs header. Enable via ui.mode: 'compact-wheel'. Combine with ui.wheel.placement for popover positioning", + "Headerless wheel picker without the hour/minute inputs header. Enable via ui.mode: 'compact-wheel'. Combine with wheel.placement for popover positioning", }, { - title: "ui.wheel.placement option", + title: "wheel.placement option", description: "Popover placement ('auto', 'top', 'bottom') for compact-wheel mode. Opens as a popover anchored to the input instead of a centered modal", }, { - title: "clock.disabledTime.hideOptions option", + title: "wheel.hideDisabled option", description: - "Completely remove disabled hours/minutes from the list instead of dimming them. Works in all modes: clock, wheel, compact-wheel", + "Completely remove disabled hours/minutes from the wheel list instead of dimming them. Only applies to wheel and compact-wheel modes", }, { - title: "ui.wheel.commitOnScroll option", + title: "wheel.commitOnScroll option", description: "Auto-commit time at the end of wheel scrolling without pressing OK. Only applies to wheel and compact-wheel modes", }, diff --git a/docs-app/app/docs/configuration/page.tsx b/docs-app/app/docs/configuration/page.tsx index 55dfe5b..75ecca3 100644 --- a/docs-app/app/docs/configuration/page.tsx +++ b/docs-app/app/docs/configuration/page.tsx @@ -146,11 +146,26 @@ const uiOptions = [ default: "clock", description: "Picker mode", }, +]; + +const wheelOptions = [ { - name: "wheel", - type: "object", + name: "placement", + type: "auto | top | bottom", default: "undefined", - description: "Wheel config (placement, hideFooter, commitOnScroll)", + description: "Popover placement (compact-wheel only)", + }, + { + name: "hideFooter", + type: "boolean", + default: "false", + description: "Hide footer in compact-wheel mode", + }, + { + name: "commitOnScroll", + type: "boolean", + default: "false", + description: "Auto-commit time at scroll end", }, ]; @@ -375,6 +390,13 @@ export default function ConfigurationPage() { <OptionsTable options={uiOptions} /> </Section> + <Section icon={Layout} title="Wheel Options"> + <p className="text-muted-foreground mb-4"> + Wheel / compact-wheel mode configuration: + </p> + <OptionsTable options={wheelOptions} /> + </Section> + <Section icon={Tag} title="Labels Options"> <p className="text-muted-foreground mb-4"> Customize all text labels and button texts: @@ -428,11 +450,11 @@ export default function ConfigurationPage() { editable: false, enableScrollbar: false, enableSwitchIcon: true, - wheel: { - placement: 'bottom', - hideFooter: true, - commitOnScroll: true - } + }, + wheel: { + placement: 'bottom', + hideFooter: true, + commitOnScroll: true }, labels: { ok: 'Confirm', @@ -468,9 +490,11 @@ export default function ConfigurationPage() { clock: { disabledTime: { hours: [1, 3, 5, 23], - minutes: [15, 30, 45], - hideOptions: true + minutes: [15, 30, 45] } + }, + wheel: { + hideDisabled: true } }`} language="typescript" @@ -520,13 +544,11 @@ export default function ConfigurationPage() { </h2> <CodeBlock code={`{ - ui: { - mode: 'wheel', - wheel: { - placement: 'bottom', // Popover placement (compact-wheel only) - hideFooter: true, // Hide OK/Cancel footer - commitOnScroll: true // Commit value on scroll end - } + ui: { mode: 'wheel' }, + wheel: { + placement: 'bottom', // Popover placement (compact-wheel only) + hideFooter: true, // Hide OK/Cancel footer + commitOnScroll: true // Commit value on scroll end } }`} language="typescript" diff --git a/docs-app/app/docs/features/wheel-mode/page.tsx b/docs-app/app/docs/features/wheel-mode/page.tsx index 0d83924..f042259 100644 --- a/docs-app/app/docs/features/wheel-mode/page.tsx +++ b/docs-app/app/docs/features/wheel-mode/page.tsx @@ -233,17 +233,15 @@ picker.create();`} Popover Placement </h3> <p className="text-muted-foreground mb-3"> - Combine with{" "} - <code className="text-primary">ui.wheel.placement</code> to open as - a popover anchored to the input instead of a centered modal: + Combine with <code className="text-primary">wheel.placement</code>{" "} + to open as a popover anchored to the input instead of a centered + modal: </p> <CodeBlock code={`new TimepickerUI(input, { - ui: { - mode: 'compact-wheel', - wheel: { - placement: 'auto' // 'auto', 'top', or 'bottom' - } + ui: { mode: 'compact-wheel' }, + wheel: { + placement: 'auto' // 'auto', 'top', or 'bottom' } }).create();`} language="typescript" @@ -307,20 +305,18 @@ picker.create();`} <Section icon={EyeOff} title="Hide Disabled Options"> <p className="text-muted-foreground mb-4"> - Set{" "} - <code className="text-primary"> - clock.disabledTime.hideOptions: true - </code>{" "} - to completely remove disabled hours/minutes from the wheel instead of + Set <code className="text-primary">wheel.hideDisabled: true</code> to + completely remove disabled hours/minutes from the wheel instead of showing them as dimmed. Useful when many values are disabled (e.g., business hours only). </p> <CodeBlock code={`new TimepickerUI(input, { clock: { - disabledTime: { hours: [0, 1, 2, 3, 4, 5, 18, 19, 20, 21, 22, 23], hideOptions: true } + disabledTime: { hours: [0, 1, 2, 3, 4, 5, 18, 19, 20, 21, 22, 23] } }, - ui: { mode: 'wheel' } + ui: { mode: 'wheel' }, + wheel: { hideDisabled: true } }).create();`} language="typescript" /> @@ -328,15 +324,15 @@ picker.create();`} <Section icon={RotateCcw} title="Auto-Commit on Scroll"> <p className="text-muted-foreground mb-4"> - Set{" "} - <code className="text-primary">ui.wheel.commitOnScroll: true</code> to - automatically confirm the selected time when scrolling stops, without - requiring the user to press OK. Works in both wheel and compact-wheel - modes. + Set <code className="text-primary">wheel.commitOnScroll: true</code>{" "} + to automatically confirm the selected time when scrolling stops, + without requiring the user to press OK. Works in both wheel and + compact-wheel modes. </p> <CodeBlock code={`new TimepickerUI(input, { - ui: { mode: 'wheel', wheel: { commitOnScroll: true } } + ui: { mode: 'wheel' }, + wheel: { commitOnScroll: true } }).create(); // The confirm event includes autoCommit: true diff --git a/docs-app/app/docs/whats-new/page.tsx b/docs-app/app/docs/whats-new/page.tsx index aef9fe1..95e68c0 100644 --- a/docs-app/app/docs/whats-new/page.tsx +++ b/docs-app/app/docs/whats-new/page.tsx @@ -56,18 +56,18 @@ export default function WhatsNewPage() { </li> <li> <strong>Popover placement</strong> - Use{" "} - <code>ui.wheel.placement</code> to open compact-wheel as a popover + <code>wheel.placement</code> to open compact-wheel as a popover anchored to the input (<code>'auto'</code>,{" "} <code>'top'</code>, <code>'bottom'</code>) </li> <li> <strong>Hide disabled options</strong> - Set{" "} - <code>clock.disabledTime.hideOptions: true</code> to completely - remove disabled values instead of dimming them + <code>wheel.hideDisabled: true</code> to completely remove disabled + values instead of dimming them </li> <li> <strong>Auto-commit on scroll</strong> - Set{" "} - <code>ui.wheel.commitOnScroll: true</code> to auto-confirm time at + <code>wheel.commitOnScroll: true</code> to auto-confirm time at scroll end without pressing OK </li> <li> From c83a9d220b4e6c138027c38ec93d4d6a217b5328 Mon Sep 17 00:00:00 2001 From: pglejzer <glejzerpiotr@gmail.com> Date: Tue, 17 Mar 2026 14:46:30 +0100 Subject: [PATCH 07/10] update --- CHANGELOG.md | 6 +++++- README.md | 2 +- app/src/managers/events/ButtonHandlers.ts | 4 +++- app/src/managers/events/KeyboardHandlers.ts | 3 +-- .../managers/plugins/wheel/PopoverManager.ts | 1 + app/src/timepicker/CoreState.ts | 11 ++++++++++ app/src/timepicker/Lifecycle.ts | 20 +++++++++++++++++-- app/src/types/options.d.ts | 2 +- app/src/utils/options/defaults.ts | 2 +- .../timepicker/TimepickerUI.update.test.ts | 3 ++- docs-app/app/docs/changelog/page.tsx | 18 +++++++++++++++-- docs-app/app/docs/whats-new/page.tsx | 9 +++++++-- 12 files changed, 67 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa6e7f1..1c193fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 --- -## [4.2.0] - 2026-03-15 +## [4.2.0] - 2026-03-17 ### Added @@ -32,6 +32,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Exported `ClearEventData` and `ClearBehaviorOptions` types - `WheelOptions` is now a top-level key (`wheel`) instead of being nested inside `ui.wheel` +### Fixed + +- Race condition when rapidly clicking the input to open the timepicker - multiple clicks before the modal fully opened could cause the picker to remain invisible in the DOM or permanently block the input element + --- ## [4.1.7] - 2026-03-08 diff --git a/README.md b/README.md index 8eb6c5d..e66e385 100644 --- a/README.md +++ b/README.md @@ -192,7 +192,7 @@ const picker = new TimepickerUI(input, { | `iconTemplate` | string | SVG | Desktop switch icon template | | `iconTemplateMobile` | string | SVG | Mobile switch icon template | | `inline` | object | `undefined` | Inline mode configuration | -| `clearButton` | boolean | `true` | Show clear button | +| `clearButton` | boolean | `false` | Show clear button | | `mode` | `clock` / `wheel` / `compact-wheel` | `clock` | Picker mode - analog clock, scroll-spinner, or headerless wheel | | `wheel` | object | `undefined` | Wheel/compact-wheel config (placement, hideFooter, commitOnScroll) | diff --git a/app/src/managers/events/ButtonHandlers.ts b/app/src/managers/events/ButtonHandlers.ts index be5c5a2..224f9f9 100644 --- a/app/src/managers/events/ButtonHandlers.ts +++ b/app/src/managers/events/ButtonHandlers.ts @@ -16,8 +16,10 @@ export class ButtonHandlers { const openElements = this.core.getOpenElement(); if (!openElements) return; - const handler = (): void => { + const handler = (e: Event): void => { if (this.core.isDestroyed) return; + const target = e.currentTarget as Element; + if (target?.classList.contains('disabled')) return; this.emitter.emit('show', {}); }; diff --git a/app/src/managers/events/KeyboardHandlers.ts b/app/src/managers/events/KeyboardHandlers.ts index 6f28195..4a41f65 100644 --- a/app/src/managers/events/KeyboardHandlers.ts +++ b/app/src/managers/events/KeyboardHandlers.ts @@ -18,7 +18,7 @@ export class KeyboardHandlers { if (!input) return; const handler = (e: KeyboardEvent): void => { - if (e.key === 'Enter' && !this.core.isDestroyed) { + if (e.key === 'Enter' && !this.core.isDestroyed && !this.core.isOpen) { this.emitter.emit('show', {}); } }; @@ -172,4 +172,3 @@ export class KeyboardHandlers { this.cleanupHandlers = []; } } - diff --git a/app/src/managers/plugins/wheel/PopoverManager.ts b/app/src/managers/plugins/wheel/PopoverManager.ts index 62fc400..6f0ddfd 100644 --- a/app/src/managers/plugins/wheel/PopoverManager.ts +++ b/app/src/managers/plugins/wheel/PopoverManager.ts @@ -30,6 +30,7 @@ export default class PopoverManager { attach(): void { if (!this.isPopoverMode()) return; if (!isDocument()) return; + if (this.isAttached) return; const modal = this.core.getModalElement(); if (!modal) return; diff --git a/app/src/timepicker/CoreState.ts b/app/src/timepicker/CoreState.ts index 27e3d34..b7e937d 100644 --- a/app/src/timepicker/CoreState.ts +++ b/app/src/timepicker/CoreState.ts @@ -20,6 +20,7 @@ export interface CoreStateData { } | null; readonly cloned: Node | null; readonly isModalRemove: boolean; + readonly isOpen: boolean; readonly isInitialized: boolean; readonly customId?: string; readonly eventHandlersRegistered: boolean; @@ -46,6 +47,7 @@ export class CoreState { disabledTime: null, cloned: null, isModalRemove: true, + isOpen: false, isInitialized: false, customId, eventHandlersRegistered: false, @@ -93,6 +95,10 @@ export class CoreState { return this.state.isModalRemove; } + get isOpen(): boolean { + return this.state.isOpen; + } + get isInitialized(): boolean { return this.state.isInitialized; } @@ -141,6 +147,10 @@ export class CoreState { this.state = { ...this.state, isModalRemove: value }; } + setIsOpen(value: boolean): void { + this.state = { ...this.state, isOpen: value }; + } + setIsInitialized(value: boolean): void { this.state = { ...this.state, isInitialized: value }; } @@ -176,6 +186,7 @@ export class CoreState { disabledTime: null, cloned: null, isModalRemove: true, + isOpen: false, isInitialized: false, isDestroyed: true, eventHandlersRegistered: false, diff --git a/app/src/timepicker/Lifecycle.ts b/app/src/timepicker/Lifecycle.ts index a01b9d5..a64ede7 100644 --- a/app/src/timepicker/Lifecycle.ts +++ b/app/src/timepicker/Lifecycle.ts @@ -19,6 +19,7 @@ export class Lifecycle { private emitter: EventEmitter<TimepickerEventMap>; private eventsClickMobileHandler: EventListenerOrEventListenerObject = () => {}; private mutliEventsMoveHandler: EventListenerOrEventListenerObject = () => {}; + private unmountTimeouts: ReturnType<typeof setTimeout>[] = []; constructor(core: CoreState, managers: Managers, emitter: EventEmitter<TimepickerEventMap>) { this.core = core; @@ -104,6 +105,7 @@ export class Lifecycle { mount(): void { if (this.core.isDestroyed) return; + if (this.core.isOpen) return; if (!this.core.isInitialized) { this.init(); @@ -129,6 +131,7 @@ export class Lifecycle { } this.core.setIsTouchMouseMove(false); + this.core.setIsOpen(false); this.removeEventListeners(); @@ -144,14 +147,15 @@ export class Lifecycle { const openElements = this.core.getOpenElement(); openElements.forEach((openEl) => openEl?.classList.remove('disabled')); - setTimeout(() => { + const scrollbarTimeout = setTimeout(() => { if (isDocument()) { document.body.style.overflowY = ''; document.body.style.paddingRight = ''; } }, TIMINGS.SCROLLBAR_RESTORE); + this.unmountTimeouts.push(scrollbarTimeout); - setTimeout(() => { + const modalRemoveTimeout = setTimeout(() => { const input = this.core.getInput(); if (this.core.options.behavior.focusInputAfterClose) { input?.focus(); @@ -163,6 +167,7 @@ export class Lifecycle { } this.core.setIsModalRemove(true); }, TIMINGS.MODAL_REMOVE); + this.unmountTimeouts.push(modalRemoveTimeout); if (cb) cb(); }, this.core.options.behavior.delayHandler || TIMINGS.DEFAULT_DELAY); @@ -177,6 +182,8 @@ export class Lifecycle { destroy(options?: { keepInputValue?: boolean; callback?: TypeFunction } | TypeFunction): void { if (this.core.isDestroyed) return; + this.clearUnmountTimeouts(); + const config = typeof options === 'function' ? { callback: options } : options || {}; const { keepInputValue = false, callback } = config; @@ -241,6 +248,10 @@ export class Lifecycle { if (this.core.isDestroyed) return; if (!this.core.isModalRemove) return; + this.clearUnmountTimeouts(); + this.core.setIsOpen(true); + this.core.setIsModalRemove(false); + this.setupValidation(); this.disableOpenElements(); this.setupModal(); @@ -438,6 +449,11 @@ export class Lifecycle { } } + private clearUnmountTimeouts(): void { + this.unmountTimeouts.forEach(clearTimeout); + this.unmountTimeouts = []; + } + private removeEventListeners(): void { if (isDocument() === false) { return; diff --git a/app/src/types/options.d.ts b/app/src/types/options.d.ts index c49c6fd..d16ed60 100644 --- a/app/src/types/options.d.ts +++ b/app/src/types/options.d.ts @@ -164,7 +164,7 @@ export interface UIOptions { /** * @description Show clear button to reset time selection - * @default true + * @default false */ clearButton?: boolean; diff --git a/app/src/utils/options/defaults.ts b/app/src/utils/options/defaults.ts index 5ec6c67..11dd111 100644 --- a/app/src/utils/options/defaults.ts +++ b/app/src/utils/options/defaults.ts @@ -24,7 +24,7 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { iconTemplate: '', iconTemplateMobile: '', inline: undefined, - clearButton: true, + clearButton: false, }, labels: { diff --git a/app/tests/unit/timepicker/TimepickerUI.update.test.ts b/app/tests/unit/timepicker/TimepickerUI.update.test.ts index 682f8c8..671e15d 100644 --- a/app/tests/unit/timepicker/TimepickerUI.update.test.ts +++ b/app/tests/unit/timepicker/TimepickerUI.update.test.ts @@ -757,6 +757,7 @@ describe('TimepickerUI.update() - functional tests', () => { expect(mapBefore['1']).toBe(false); timepicker.close(); + jest.runAllTimers(); timepicker.update({ options: { clock: { disabledTime: { hours: [0, 1, 2, 3, 4, 5, 6, 7, 8] } } }, create: true, @@ -785,6 +786,7 @@ describe('TimepickerUI.update() - functional tests', () => { expect(disabledBefore.length).toBeGreaterThan(0); timepicker.close(); + jest.runAllTimers(); timepicker.update({ options: { clock: { disabledTime: {} } }, create: true, @@ -798,4 +800,3 @@ describe('TimepickerUI.update() - functional tests', () => { }); }); }); - diff --git a/docs-app/app/docs/changelog/page.tsx b/docs-app/app/docs/changelog/page.tsx index fe7422a..c2c6d75 100644 --- a/docs-app/app/docs/changelog/page.tsx +++ b/docs-app/app/docs/changelog/page.tsx @@ -111,6 +111,13 @@ const CHANGELOG_420 = { "ClearEventData, ClearBehaviorOptions, WheelScrollStartEventData, WheelScrollEndEventData", }, ], + fixed: [ + { + title: "Rapid-click race condition", + description: + "Rapidly clicking the input before the modal fully opened could cause the picker to remain invisible in the DOM or permanently block the input element", + }, + ], }; const CHANGELOG_417 = { @@ -411,10 +418,10 @@ export default function ChangelogPage() { variant="purple" className="mb-6" > - <strong>v4.2.0</strong> - Released March 13, 2026 + <strong>v4.2.0</strong> - Released March 17, 2026 </InfoBox> - <Section icon={History} title="Version 4.2.0 - March 13, 2026"> + <Section icon={History} title="Version 4.2.0 - March 17, 2026"> <div className="space-y-4"> <ChangeSection icon={Sparkles} @@ -422,6 +429,13 @@ export default function ChangelogPage() { color="green-500" items={CHANGELOG_420.added} /> + + <ChangeSection + icon={Wrench} + label="Fixed" + color="orange-500" + items={CHANGELOG_420.fixed} + /> </div> </Section> diff --git a/docs-app/app/docs/whats-new/page.tsx b/docs-app/app/docs/whats-new/page.tsx index 95e68c0..bf5c1c2 100644 --- a/docs-app/app/docs/whats-new/page.tsx +++ b/docs-app/app/docs/whats-new/page.tsx @@ -39,8 +39,8 @@ export default function WhatsNewPage() { className="mb-8" > <p className="mb-3"> - <strong>March 15, 2026</strong> - Wheel mode, compact-wheel, clear - button and more + <strong>March 17, 2026</strong> - Wheel mode, compact-wheel, clear + button, race condition fix, and more </p> <p className="text-sm">What's new:</p> <ul className="mt-2 space-y-1 text-sm ml-4"> @@ -88,6 +88,11 @@ export default function WhatsNewPage() { <code>WheelScrollStartEventData</code>,{" "} <code>WheelScrollEndEventData</code> </li> + <li> + <strong>Race condition fix</strong> - Rapidly clicking the input + before the modal fully opened no longer causes the picker to get + stuck invisible in the DOM or permanently blocks the input + </li> </ul> <Link href="/docs/changelog" From b5f06dfefbb1e1b6a4f5b241c42cdccb0a4837bf Mon Sep 17 00:00:00 2001 From: pglejzer <glejzerpiotr@gmail.com> Date: Tue, 17 Mar 2026 18:35:27 +0100 Subject: [PATCH 08/10] fix scroll --- CHANGELOG.md | 1 + README.md | 1 + app/docs/examples/wheel.ts | 20 +- app/docs/partials/wheel.html | 104 +++++- .../managers/plugins/wheel/PopoverManager.ts | 2 + .../managers/plugins/wheel/WheelManager.ts | 37 +++ .../managers/plugins/wheel/WheelRenderer.ts | 13 +- app/src/timepicker/Lifecycle.ts | 8 +- app/src/types/options.d.ts | 8 + app/src/utils/options/defaults.ts | 2 + .../unit/plugins/wheel/PopoverManager.test.ts | 302 ++++++++++++++++++ docs-app/app/docs/api/options/page.tsx | 18 +- docs-app/app/docs/changelog/page.tsx | 5 + docs-app/app/docs/configuration/page.tsx | 15 +- .../app/docs/features/wheel-mode/page.tsx | 21 ++ docs-app/app/docs/whats-new/page.tsx | 5 + 16 files changed, 553 insertions(+), 9 deletions(-) create mode 100644 app/tests/unit/plugins/wheel/PopoverManager.test.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c193fa..c32ff9b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `wheel.placement` option (`'auto'` | `'top'` | `'bottom'`) for popover positioning in compact-wheel mode - `wheel.hideDisabled` option to completely remove disabled hours/minutes from the wheel list instead of dimming them (wheel and compact-wheel modes only) - `wheel.commitOnScroll` option to auto-commit time at the end of wheel scrolling without pressing OK +- `wheel.ignoreOutsideClick` option to prevent the picker from closing when clicking outside its area (wheel and compact-wheel modes only) - `autoCommit` field on `ConfirmEventData` to distinguish auto-committed from manual confirmations - Clear button to reset time selection. Enabled by default via `ui.clearButton` option - `clearBehavior.clearInput` option to control whether clearing also empties the input field value diff --git a/README.md b/README.md index e66e385..45b6d5b 100644 --- a/README.md +++ b/README.md @@ -385,6 +385,7 @@ Wheel mode works with all existing features: - **Events**: All standard events work - `select:hour`, `select:minute`, `update`, `confirm`, `cancel`, `clear`, `select:am`, `select:pm`, `error` - **Wheel-specific events**: `wheel:scroll:start` (column starts scrolling), `wheel:scroll:end` (column snaps to value with `previousValue`) - **Auto-commit**: Set `wheel.commitOnScroll: true` to auto-confirm on scroll end without pressing OK +- **Persist on outside click**: Set `wheel.ignoreOutsideClick: true` to keep the picker open when clicking outside ### Compact-Wheel Mode diff --git a/app/docs/examples/wheel.ts b/app/docs/examples/wheel.ts index 2af8b13..b920653 100644 --- a/app/docs/examples/wheel.ts +++ b/app/docs/examples/wheel.ts @@ -145,6 +145,22 @@ new TimepickerUI('#commit-on-scroll-24h', { wheel: { placement: 'auto', commitOnScroll: true }, }).create(); +new TimepickerUI('#ignore-outside-wheel', { + ui: { mode: 'wheel' }, + wheel: { ignoreOutsideClick: true }, +}).create(); + +new TimepickerUI('#ignore-outside-popover', { + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', ignoreOutsideClick: true }, +}).create(); + +new TimepickerUI('#ignore-outside-24h', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', ignoreOutsideClick: true }, +}).create(); + // Multiple Popover pickers (independent instances) new TimepickerUI('#multi-popover-1', { ui: { mode: 'compact-wheel' }, @@ -251,7 +267,7 @@ new TimepickerUI('#wheel-hide-disabled-hours', { new TimepickerUI('#wheel-hide-disabled-interval', { clock: { type: '24h', - disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'] }, + disabledTime: { interval: ['01:11 - 08:33', '18:00 - 23:59'] }, }, ui: { mode: 'wheel' }, wheel: { hideDisabled: true }, @@ -325,7 +341,7 @@ new TimepickerUI('#compact-hide-disabled-hours', { new TimepickerUI('#compact-hide-disabled-interval', { clock: { type: '24h', - disabledTime: { interval: ['00:00 - 08:00', '18:00 - 23:59'] }, + disabledTime: { interval: ['00:00 - 08:33', '18:00 - 23:59'] }, }, ui: { mode: 'compact-wheel' }, wheel: { hideDisabled: true }, diff --git a/app/docs/partials/wheel.html b/app/docs/partials/wheel.html index d4d5185..7e0764b 100644 --- a/app/docs/partials/wheel.html +++ b/app/docs/partials/wheel.html @@ -573,6 +573,106 @@ <h4 class="text-sm font-semibold text-amber-900 dark:text-amber-200 mb-2">commit </div> </section> +<!-- Ignore Outside Click Section --> + +<section + id="ignore-outside-click" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div class="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Ignore Outside Click</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Keep the picker open when clicking outside its area — the user must press OK or Cancel to close it + </p> + </div> + <div class="p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Wheel + Persist</label + > + <input + id="ignore-outside-wheel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-teal-500 transition-colors" + value="09:00 AM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Popover + Persist</label + > + <input + id="ignore-outside-popover" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-teal-500 transition-colors" + value="02:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >24h Popover + Persist</label + > + <input + id="ignore-outside-24h" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-teal-500 transition-colors" + value="16:45" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="ignore-outside-wheel" value="09:00 AM" /> +<input id="ignore-outside-popover" value="02:30 PM" /> +<input id="ignore-outside-24h" value="16:45" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">// Wheel — stays open on outside click +new TimepickerUI('#ignore-outside-wheel', { + ui: { mode: 'wheel' }, + wheel: { ignoreOutsideClick: true }, +}).create(); + +// Popover — stays open on outside click +new TimepickerUI('#ignore-outside-popover', { + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', ignoreOutsideClick: true }, +}).create(); + +// 24h Popover — stays open on outside click +new TimepickerUI('#ignore-outside-24h', { + clock: { type: '24h' }, + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'auto', ignoreOutsideClick: true }, +}).create();</code></pre> + </div> + </div> + <div + class="mt-6 p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg border border-teal-200 dark:border-teal-800" + > + <h4 class="text-sm font-semibold text-teal-900 dark:text-teal-200 mb-2">ignoreOutsideClick Notes</h4> + <ul class="text-sm text-teal-800 dark:text-teal-300 space-y-1 list-disc list-inside"> + <li> + Set + <code class="bg-teal-100 dark:bg-teal-800 px-1 rounded">wheel.ignoreOutsideClick: true</code> to + keep the picker open when clicking outside + </li> + <li> + Applies to <code class="bg-teal-100 dark:bg-teal-800 px-1 rounded">wheel</code> and + <code class="bg-teal-100 dark:bg-teal-800 px-1 rounded">compact-wheel</code> modes only + </li> + <li>The user must press OK or Cancel to close the picker</li> + <li> + Default is <code class="bg-teal-100 dark:bg-teal-800 px-1 rounded">false</code> — picker closes on + outside click + </li> + </ul> + </div> + </div> +</section> + <!-- Compact Wheel + Popover Placement Section --> <section @@ -671,7 +771,7 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Wheel + Disabled Ti </div> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Hide Disabled Interval</label + >Hide Disabled Interval lol</label > <input id="wheel-hide-disabled-interval" @@ -898,7 +998,7 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel + Dis </div> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Hide Disabled Interval</label + >Hide Disabled Interval xd</label > <input id="compact-hide-disabled-interval" diff --git a/app/src/managers/plugins/wheel/PopoverManager.ts b/app/src/managers/plugins/wheel/PopoverManager.ts index 6f0ddfd..9aa1944 100644 --- a/app/src/managers/plugins/wheel/PopoverManager.ts +++ b/app/src/managers/plugins/wheel/PopoverManager.ts @@ -165,6 +165,8 @@ export default class PopoverManager { } private handleClickOutside(e: MouseEvent): void { + if (this.core.options.wheel?.ignoreOutsideClick) return; + const modal = this.core.getModalElement(); const input = this.core.getInput(); const target = e.target as Node | null; diff --git a/app/src/managers/plugins/wheel/WheelManager.ts b/app/src/managers/plugins/wheel/WheelManager.ts index 8afbf5d..ee1cdf3 100644 --- a/app/src/managers/plugins/wheel/WheelManager.ts +++ b/app/src/managers/plugins/wheel/WheelManager.ts @@ -151,7 +151,11 @@ export default class WheelManager { if (this.core.options.clock.type === '24h') return; this.amPmHandler = (): void => { + const currentHour = this.scrollHandler.getSelectedValue('hours'); + const currentMinute = this.scrollHandler.getSelectedValue('minutes'); this.renderer.updateDisabledItems(); + this.scrollToFirstAvailable('hours', currentHour); + this.scrollToFirstAvailable('minutes', currentMinute); }; this.emitter.on('select:am', this.amPmHandler); @@ -170,9 +174,42 @@ export default class WheelManager { if (!disabled?.value?.isInterval) return; this.hourChangeHandler = (): void => { + const currentMinute = this.scrollHandler.getSelectedValue('minutes'); this.renderer.updateDisabledItems(); + this.scrollToFirstAvailable('minutes', currentMinute); }; this.emitter.on('select:hour', this.hourChangeHandler); } + + /** + * Find item by data-value (not scroll position) and scroll to it. + * If preferred value no longer exists in DOM, scroll to first available. + */ + private scrollToFirstAvailable(columnType: 'hours' | 'minutes', preferredValue: string | null): void { + const items = this.renderer.getItems(columnType); + if (!items || items.length === 0) return; + + if (preferredValue !== null) { + for (let i = 0; i < items.length; i++) { + if ( + items[i].getAttribute('data-value') === preferredValue && + !items[i].classList.contains('is-disabled') + ) { + this.scrollHandler.scrollToValue(columnType, preferredValue); + return; + } + } + } + + for (let i = 0; i < items.length; i++) { + if (!items[i].classList.contains('is-disabled')) { + const val = items[i].getAttribute('data-value'); + if (val !== null) { + this.scrollHandler.scrollToValue(columnType, val); + return; + } + } + } + } } diff --git a/app/src/managers/plugins/wheel/WheelRenderer.ts b/app/src/managers/plugins/wheel/WheelRenderer.ts index ed2978a..bc20f04 100644 --- a/app/src/managers/plugins/wheel/WheelRenderer.ts +++ b/app/src/managers/plugins/wheel/WheelRenderer.ts @@ -48,6 +48,11 @@ export class WheelRenderer { const shouldHide = this.core.options.wheel.hideDisabled === true; + if (shouldHide) { + this.restoreRemovedItems(); + this.invalidateItemCache(); + } + if (disabled.value.isInterval && disabled.value.intervals) { this.updateDisabledByInterval(disabled.value, shouldHide); } else { @@ -232,7 +237,13 @@ export class WheelRenderer { if (insertBefore) { col.insertBefore(item, insertBefore); } else { - col.appendChild(item); + const lastExisting = existingItems[existingItems.length - 1]; + const ref = lastExisting?.nextSibling ?? null; + if (ref) { + col.insertBefore(item, ref); + } else { + col.appendChild(item); + } } existingItems.push(item); existingItems.sort((a, b) => { diff --git a/app/src/timepicker/Lifecycle.ts b/app/src/timepicker/Lifecycle.ts index a64ede7..ff94966 100644 --- a/app/src/timepicker/Lifecycle.ts +++ b/app/src/timepicker/Lifecycle.ts @@ -426,7 +426,13 @@ export class Lifecycle { this.managers.events.handleEscClick(); if (!this.isPopoverMode()) { - this.managers.events.handleBackdropClick(); + const isWheelWithPersist = + (this.core.options.ui.mode === 'wheel' || this.core.options.ui.mode === 'compact-wheel') && + this.core.options.wheel?.ignoreOutsideClick; + + if (!isWheelWithPersist) { + this.managers.events.handleBackdropClick(); + } } } } diff --git a/app/src/types/options.d.ts b/app/src/types/options.d.ts index d16ed60..75e4706 100644 --- a/app/src/types/options.d.ts +++ b/app/src/types/options.d.ts @@ -366,6 +366,14 @@ export interface WheelOptions { * @default false */ hideDisabled?: boolean; + + /** + * @description When true, clicking outside the picker area does not close it. + * Only applies to wheel and compact-wheel modes (popover and modal). + * The user must explicitly press OK or Cancel to close the picker. + * @default false + */ + ignoreOutsideClick?: boolean; } /** diff --git a/app/src/utils/options/defaults.ts b/app/src/utils/options/defaults.ts index 11dd111..c1958c4 100644 --- a/app/src/utils/options/defaults.ts +++ b/app/src/utils/options/defaults.ts @@ -83,6 +83,7 @@ export const DEFAULT_OPTIONS: Required<TimepickerOptions> = { hideFooter: undefined, commitOnScroll: undefined, hideDisabled: undefined, + ignoreOutsideClick: undefined, }, clearBehavior: { @@ -136,6 +137,7 @@ export function mergeOptions(userOptions: TimepickerOptions = {}): Required<Time placement: mergedMode === 'compact-wheel' ? 'auto' : undefined, hideFooter: undefined, commitOnScroll: undefined, + ignoreOutsideClick: undefined, ...merged.wheel, }; } diff --git a/app/tests/unit/plugins/wheel/PopoverManager.test.ts b/app/tests/unit/plugins/wheel/PopoverManager.test.ts new file mode 100644 index 0000000..6e46a22 --- /dev/null +++ b/app/tests/unit/plugins/wheel/PopoverManager.test.ts @@ -0,0 +1,302 @@ +import PopoverManager from '../../../../src/managers/plugins/wheel/PopoverManager'; +import { CoreState } from '../../../../src/timepicker/CoreState'; +import { EventEmitter } from '../../../../src/utils/EventEmitter'; +import { mergeOptions } from '../../../../src/utils/options/defaults'; + +const INSTANCE_ID = 'test-uuid-1234-5678-9abc-def012345678'; + +function createDOM(): { container: HTMLDivElement; input: HTMLInputElement; modal: HTMLDivElement } { + const container = document.createElement('div'); + const input = document.createElement('input'); + input.type = 'text'; + container.appendChild(input); + document.body.appendChild(container); + + const modal = document.createElement('div'); + modal.setAttribute('data-owner-id', INSTANCE_ID); + modal.classList.add('tp-ui-wrapper'); + modal.style.width = '300px'; + modal.style.height = '200px'; + document.body.appendChild(modal); + + return { container, input, modal }; +} + +describe('PopoverManager', () => { + let core: CoreState; + let emitter: EventEmitter; + let manager: PopoverManager; + let container: HTMLDivElement; + + beforeEach(() => { + jest.useFakeTimers(); + }); + + afterEach(() => { + manager.destroy(); + document.body.innerHTML = ''; + jest.clearAllMocks(); + jest.useRealTimers(); + }); + + describe('ignoreOutsideClick option', () => { + describe('when ignoreOutsideClick is false (default)', () => { + beforeEach(() => { + const dom = createDOM(); + container = dom.container; + + const options = mergeOptions({ + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'bottom', ignoreOutsideClick: false }, + }); + + core = new CoreState(container, options, INSTANCE_ID); + emitter = new EventEmitter(); + manager = new PopoverManager(core, emitter); + }); + + it('should emit cancel when clicking outside the picker', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + const outsideElement = document.createElement('div'); + document.body.appendChild(outsideElement); + + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: outsideElement }); + + document.dispatchEvent(event); + + expect(emitSpy).toHaveBeenCalledWith('cancel', {}); + }); + + it('should not emit cancel when clicking inside the modal', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + const modal = document.querySelector(`[data-owner-id="${INSTANCE_ID}"]`); + const innerElement = document.createElement('span'); + modal?.appendChild(innerElement); + + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: innerElement }); + + document.dispatchEvent(event); + + expect(emitSpy).not.toHaveBeenCalledWith('cancel', {}); + }); + + it('should not emit cancel when clicking the input element', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + const input = container.querySelector('input'); + + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: input }); + + document.dispatchEvent(event); + + expect(emitSpy).not.toHaveBeenCalledWith('cancel', {}); + }); + }); + + describe('when ignoreOutsideClick is true', () => { + beforeEach(() => { + const dom = createDOM(); + container = dom.container; + + const options = mergeOptions({ + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'bottom', ignoreOutsideClick: true }, + }); + + core = new CoreState(container, options, INSTANCE_ID); + emitter = new EventEmitter(); + manager = new PopoverManager(core, emitter); + }); + + it('should not emit cancel when clicking outside the picker', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + const outsideElement = document.createElement('div'); + document.body.appendChild(outsideElement); + + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: outsideElement }); + + document.dispatchEvent(event); + + expect(emitSpy).not.toHaveBeenCalledWith('cancel', {}); + }); + + it('should not emit cancel when clicking inside the modal', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + const modal = document.querySelector(`[data-owner-id="${INSTANCE_ID}"]`); + const innerElement = document.createElement('span'); + modal?.appendChild(innerElement); + + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: innerElement }); + + document.dispatchEvent(event); + + expect(emitSpy).not.toHaveBeenCalledWith('cancel', {}); + }); + + it('should keep picker open regardless of where the user clicks', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + const targets = [ + document.createElement('div'), + document.createElement('p'), + document.createElement('button'), + ]; + + targets.forEach((target) => { + document.body.appendChild(target); + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: target }); + document.dispatchEvent(event); + }); + + expect(emitSpy).not.toHaveBeenCalled(); + }); + }); + + describe('when ignoreOutsideClick is undefined (default options)', () => { + beforeEach(() => { + const dom = createDOM(); + container = dom.container; + + const options = mergeOptions({ + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'bottom' }, + }); + + core = new CoreState(container, options, INSTANCE_ID); + emitter = new EventEmitter(); + manager = new PopoverManager(core, emitter); + }); + + it('should emit cancel when clicking outside (falsy default)', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + const outsideElement = document.createElement('div'); + document.body.appendChild(outsideElement); + + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: outsideElement }); + + document.dispatchEvent(event); + + expect(emitSpy).toHaveBeenCalledWith('cancel', {}); + }); + }); + + describe('when modal or target is missing', () => { + beforeEach(() => { + const dom = createDOM(); + container = dom.container; + + const options = mergeOptions({ + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'bottom', ignoreOutsideClick: false }, + }); + + core = new CoreState(container, options, INSTANCE_ID); + emitter = new EventEmitter(); + manager = new PopoverManager(core, emitter); + }); + + it('should not emit cancel when modal element is missing', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + const modal = document.querySelector(`[data-owner-id="${INSTANCE_ID}"]`); + modal?.remove(); + + const outsideElement = document.createElement('div'); + document.body.appendChild(outsideElement); + + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: outsideElement }); + + document.dispatchEvent(event); + + expect(emitSpy).not.toHaveBeenCalledWith('cancel', {}); + }); + + it('should not emit cancel when event target is null', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: null }); + + document.dispatchEvent(event); + + expect(emitSpy).not.toHaveBeenCalledWith('cancel', {}); + }); + }); + }); + + describe('destroy()', () => { + beforeEach(() => { + const dom = createDOM(); + container = dom.container; + + const options = mergeOptions({ + ui: { mode: 'compact-wheel' }, + wheel: { placement: 'bottom', ignoreOutsideClick: false }, + }); + + core = new CoreState(container, options, INSTANCE_ID); + emitter = new EventEmitter(); + manager = new PopoverManager(core, emitter); + }); + + it('should stop emitting cancel after destroy', () => { + const emitSpy = jest.spyOn(emitter, 'emit'); + manager.attach(); + + jest.runAllTimers(); + + manager.destroy(); + + const outsideElement = document.createElement('div'); + document.body.appendChild(outsideElement); + + const event = new MouseEvent('pointerdown', { bubbles: true }); + Object.defineProperty(event, 'target', { value: outsideElement }); + + document.dispatchEvent(event); + + expect(emitSpy).not.toHaveBeenCalledWith('cancel', {}); + }); + }); +}); + diff --git a/docs-app/app/docs/api/options/page.tsx b/docs-app/app/docs/api/options/page.tsx index 6c31375..5746ab5 100644 --- a/docs-app/app/docs/api/options/page.tsx +++ b/docs-app/app/docs/api/options/page.tsx @@ -2,7 +2,6 @@ import { CodeBlock } from "@/components/code-block"; import { Section } from "@/components/section"; import { InfoBox } from "@/components/info-box"; import { - Settings, Layout, Lock, Clock, @@ -172,6 +171,20 @@ const wheelOptions = [ description: "Auto-commit time at end of wheel scrolling without pressing OK", }, + { + name: "hideDisabled", + type: "boolean", + default: "false", + description: + "Completely remove disabled hours/minutes from the wheel list instead of dimming them", + }, + { + name: "ignoreOutsideClick", + type: "boolean", + default: "false", + description: + "Prevent the picker from closing when clicking outside its area", + }, ]; const labelsOptions = [ @@ -619,7 +632,8 @@ export default function OptionsPage() { placement: 'bottom', hideFooter: true, commitOnScroll: true, - hideDisabled: true + hideDisabled: true, + ignoreOutsideClick: false }, // Labels options diff --git a/docs-app/app/docs/changelog/page.tsx b/docs-app/app/docs/changelog/page.tsx index c2c6d75..92411d1 100644 --- a/docs-app/app/docs/changelog/page.tsx +++ b/docs-app/app/docs/changelog/page.tsx @@ -110,6 +110,11 @@ const CHANGELOG_420 = { description: "ClearEventData, ClearBehaviorOptions, WheelScrollStartEventData, WheelScrollEndEventData", }, + { + title: "wheel.ignoreOutsideClick option", + description: + "Prevent the picker from closing when clicking outside its area. Only applies to wheel and compact-wheel modes", + }, ], fixed: [ { diff --git a/docs-app/app/docs/configuration/page.tsx b/docs-app/app/docs/configuration/page.tsx index 75ecca3..55386ce 100644 --- a/docs-app/app/docs/configuration/page.tsx +++ b/docs-app/app/docs/configuration/page.tsx @@ -167,6 +167,18 @@ const wheelOptions = [ default: "false", description: "Auto-commit time at scroll end", }, + { + name: "hideDisabled", + type: "boolean", + default: "false", + description: "Remove disabled values from wheel list", + }, + { + name: "ignoreOutsideClick", + type: "boolean", + default: "false", + description: "Keep picker open on outside click", + }, ]; const labelsOptions = [ @@ -548,7 +560,8 @@ export default function ConfigurationPage() { wheel: { placement: 'bottom', // Popover placement (compact-wheel only) hideFooter: true, // Hide OK/Cancel footer - commitOnScroll: true // Commit value on scroll end + commitOnScroll: true, // Commit value on scroll end + ignoreOutsideClick: true // Keep open on outside click } }`} language="typescript" diff --git a/docs-app/app/docs/features/wheel-mode/page.tsx b/docs-app/app/docs/features/wheel-mode/page.tsx index f042259..821b0d5 100644 --- a/docs-app/app/docs/features/wheel-mode/page.tsx +++ b/docs-app/app/docs/features/wheel-mode/page.tsx @@ -10,6 +10,7 @@ import { Minimize2, EyeOff, RotateCcw, + MousePointer, } from "lucide-react"; export const metadata = { @@ -344,6 +345,26 @@ picker.on('confirm', (data) => { language="typescript" /> </Section> + + <Section icon={MousePointer} title="Persist on Outside Click"> + <p className="text-muted-foreground mb-4"> + Set{" "} + <code className="text-primary">wheel.ignoreOutsideClick: true</code>{" "} + to prevent the picker from closing when the user clicks outside its + area. The user must explicitly press OK or Cancel to close. Works in + both wheel and compact-wheel modes (popover and modal). + </p> + <CodeBlock + code={`new TimepickerUI(input, { + ui: { mode: 'compact-wheel' }, + wheel: { + placement: 'bottom', + ignoreOutsideClick: true + } +}).create();`} + language="typescript" + /> + </Section> </div> ); } diff --git a/docs-app/app/docs/whats-new/page.tsx b/docs-app/app/docs/whats-new/page.tsx index bf5c1c2..32e27dd 100644 --- a/docs-app/app/docs/whats-new/page.tsx +++ b/docs-app/app/docs/whats-new/page.tsx @@ -88,6 +88,11 @@ export default function WhatsNewPage() { <code>WheelScrollStartEventData</code>,{" "} <code>WheelScrollEndEventData</code> </li> + <li> + <strong>Persist on outside click</strong> - Set{" "} + <code>wheel.ignoreOutsideClick: true</code> to keep the picker open + when clicking outside its area (wheel and compact-wheel modes) + </li> <li> <strong>Race condition fix</strong> - Rapidly clicking the input before the modal fully opened no longer causes the picker to get From e4f7ee8f4a82e14477b6d2b9dfc8071915092b2f Mon Sep 17 00:00:00 2001 From: pglejzer <glejzerpiotr@gmail.com> Date: Wed, 18 Mar 2026 20:38:48 +0100 Subject: [PATCH 09/10] update bench --- .vscode/settings.json | 7 +- CHANGELOG.md | 7 +- app/.eslintignore | 10 - app/.eslintrc.js | 57 -- app/docs/index.html | 8 +- app/docs/partials/advanced-clear.html | 658 +++++++++--------- app/docs/partials/basic-themes.html | 42 +- app/docs/partials/disabled.html | 52 +- app/docs/partials/hide-footer.html | 6 +- app/docs/partials/popover-features.html | 64 +- app/docs/partials/range.html | 16 +- app/docs/partials/timezone-api.html | 22 +- app/docs/partials/wheel.html | 48 +- app/docs/style.css | 15 + app/eslint.config.js | 68 ++ app/package.json | 8 +- app/src/constants/timings.ts | 1 + app/src/core/PluginRegistry.ts | 10 +- app/src/managers/clock/engine/ClockEngine.ts | 6 +- app/src/managers/clock/engine/HourEngine.ts | 5 +- .../clock/handlers/ClockEventHandler.ts | 1 - app/src/managers/config/MobileViewHandler.ts | 176 ++++- app/src/managers/events/KeyboardHandlers.ts | 1 - .../managers/plugins/range/RangeManager.ts | 1 + app/src/managers/plugins/range/RangeUI.ts | 26 +- .../plugins/timezone/TimezoneManager.ts | 1 - .../managers/plugins/wheel/PopoverManager.ts | 16 +- .../managers/plugins/wheel/WheelRenderer.ts | 3 +- app/src/plugins/wheel.ts | 1 - app/src/styles/partials/_am-pm.scss | 13 +- app/src/styles/partials/_header.scss | 1 + app/src/styles/partials/_range.scss | 15 + app/src/styles/partials/_time-inputs.scss | 4 + app/src/styles/partials/_timezone.scss | 46 ++ app/src/styles/partials/_wrapper.scss | 12 +- app/src/timepicker/Lifecycle.ts | 2 +- app/src/timepicker/TimepickerUI.ts | 17 +- app/src/utils/config/index.ts | 2 +- app/src/utils/errors/index.ts | 1 - app/src/utils/template/index.ts | 13 +- app/src/utils/time/disable.ts | 2 +- app/src/wheel.ts | 1 - app/webpack.config.js | 7 + docs-app/app/docs/changelog/page.tsx | 29 +- docs-app/app/docs/whats-new/page.tsx | 16 +- docs-app/public/bundle-data.json | 238 +++---- 46 files changed, 1001 insertions(+), 754 deletions(-) delete mode 100644 app/.eslintignore delete mode 100644 app/.eslintrc.js create mode 100644 app/eslint.config.js diff --git a/.vscode/settings.json b/.vscode/settings.json index f0a7a13..29724a7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,10 +2,11 @@ "editor.codeActionsOnSave": { "source.fixAll.eslint": "always" }, - "eslint.validate": ["javascript"], + "eslint.validate": ["javascript", "typescript"], + "eslint.useFlatConfig": true, + "eslint.workingDirectories": ["app"], "eslint.codeActionsOnSave.rules": null, - "typescript.updateImportsOnFileMove.enabled": "always", - "javascript.updateImportsOnFileMove.enabled": "always", + "js/ts.autoClosingTags.enabled": true, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "typescript.tsdk": "node_modules\\typescript\\lib", diff --git a/CHANGELOG.md b/CHANGELOG.md index c32ff9b..74e4a85 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 --- -## [4.2.0] - 2026-03-17 +## [4.2.0] - 2026-03-18 ### Added @@ -36,6 +36,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Race condition when rapidly clicking the input to open the timepicker - multiple clicks before the modal fully opened could cause the picker to remain invisible in the DOM or permanently block the input element +- Range plugin landscape layout - From/To header tabs were mispositioned in landscape orientation. Fixed with proper absolute positioning within the grid layout +- Timezone plugin landscape layout - timezone picker was broken in landscape orientation. Implemented CSS Grid layout that properly positions the header, timezone selector, and clock face side by side +- AM/PM border color in landscape mode - hardcoded black border replaced with theme-aware `var(--tp-border)` variable +- Compact-wheel popover viewport detection - popover did not flip from bottom to top early enough near viewport edge. Added 16px safety threshold, switched from `window.innerHeight` to `document.documentElement.clientHeight` for accurate visible viewport measurement, and improved fallback to prefer the side with more available space +- `PluginFactory` type now correctly accepts `CoreState` and `EventEmitter` parameters instead of using `any` or `never` workarounds. Removed internal `PluginInput` interface and unsafe type assertions from the plugin registry --- diff --git a/app/.eslintignore b/app/.eslintignore deleted file mode 100644 index e559d27..0000000 --- a/app/.eslintignore +++ /dev/null @@ -1,10 +0,0 @@ -dist/ -node_modules/ -yarn.lock -package-lock.json -dist -webpack.config.js -rollup* -typings/index.ts -.eslintrc* -docs/index.ts diff --git a/app/.eslintrc.js b/app/.eslintrc.js deleted file mode 100644 index 32c5c31..0000000 --- a/app/.eslintrc.js +++ /dev/null @@ -1,57 +0,0 @@ -module.exports = { - root: true, - env: { - browser: true, - es2020: true, - }, - parser: '@typescript-eslint/parser', - extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], - plugins: ['prettier', '@typescript-eslint', 'tree-shaking'], - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: './tsconfig.json', - tsconfigRootDir: __dirname, - }, - ignorePatterns: [ - '.eslintrc.js', - './docs', - './dist', - '/node_modules', - 'rollup.config.js', - 'webpack.config.js', - './src/**/*.d.ts', - 'docs/index.ts', - ], - rules: { - 'no-underscore-dangle': ['error', { allowAfterThis: true }], - 'func-names': 'off', - 'class-methods-use-this': 'off', - 'operator-linebreak': 'off', - 'consistent-return': 'off', - 'no-param-reassign': 'off', - 'import/prefer-default-export': 'off', - 'implicit-arrow-linebreak': 'off', - 'comma-dangle': 'off', - 'function-paren-newline': 'off', - 'wrap-iife': 'off', - '@typescript-eslint/no-explicit-any': 'off', - '@typescript-eslint/ban-ts-comment': 'off', - 'linebreak-style': ['error', 'windows'], - 'object-curly-newline': 'off', - indent: 'off', - '@typescript-eslint/indent': ['off'], - 'max-len': 'off', - 'no-confusing-arrow': 'off', - 'tree-shaking/no-side-effects-in-initialization': 2, - 'no-unused-vars': 'warn', - '@typescript-eslint/no-unused-vars': [ - 'error', - { - vars: 'all', - args: 'after-used', - ignoreRestSiblings: true, - }, - ], - }, -}; diff --git a/app/docs/index.html b/app/docs/index.html index e354181..23daf12 100644 --- a/app/docs/index.html +++ b/app/docs/index.html @@ -45,7 +45,7 @@ class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-200 dark:border-gray-700" > <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> - <div class="flex justify-between items-center py-4"> + <div class="flex flex-wrap justify-between items-center py-4 gap-2"> <div class="flex items-center"> <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Timepicker-UI</h1> <span @@ -108,8 +108,8 @@ <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Timepicker-UI</h1> </header> <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> - <section class="text-center mb-16"> - <h2 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6"> + <section class="text-center mb-8 sm:mb-16"> + <h2 class="text-3xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4 sm:mb-6"> Modern Time Picker Library </h2> <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8"> @@ -118,7 +118,7 @@ <h2 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6"> </p> </section> - <div class="grid gap-8"> + <div class="grid grid-cols-1 gap-8"> <!-- Partials: basic & themes --> <%= require("./partials/basic-themes.html") %> diff --git a/app/docs/partials/advanced-clear.html b/app/docs/partials/advanced-clear.html index 6c23de1..9ca5909 100644 --- a/app/docs/partials/advanced-clear.html +++ b/app/docs/partials/advanced-clear.html @@ -1,33 +1,33 @@ - <section - id="new-events-and-callbacks" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Callback Options</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Alternative way to handle events using callback options - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="new-events-and-callbacks-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:00 PM" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="new-events-and-callbacks-picker" value="10:00 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const newEventsAndCallbacksPicker = new TimepickerUI('#new-events-and-callbacks-picker', { +<section + id="new-events-and-callbacks" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div + class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Callback Options</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Alternative way to handle events using callback options + </p> + </div> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> + <div class="flex justify-center"> + <input + id="new-events-and-callbacks-picker" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:00 PM" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="new-events-and-callbacks-picker" value="10:00 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const newEventsAndCallbacksPicker = new TimepickerUI('#new-events-and-callbacks-picker', { callbacks: { onOpen: (data) => { console.log('Picker opened!', data); @@ -70,39 +70,39 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< }); } </code></pre> - </div> - </div> - </div> - </section> + </div> + </div> + </div> +</section> - <section - id="advanced-config" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Advanced Configuration</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Complex setup with multiple advanced options</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="advanced-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:00" - /> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="advanced-picker" value="10:00" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const advancedPicker = new TimepickerUI('#advanced-picker', { +<section + id="advanced-config" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div + class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Advanced Configuration</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Complex setup with multiple advanced options</p> + </div> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> + <div class="flex justify-center"> + <input + id="advanced-picker" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:00" + /> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="advanced-picker" value="10:00" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const advancedPicker = new TimepickerUI('#advanced-picker', { clockType: '12h', theme: 'm3', enableSwitchIcon: true, @@ -123,38 +123,38 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< cssClass: 'my-custom-picker' }); advancedPicker.create();</code></pre> - </div> - </div> - </div> - </section> + </div> + </div> + </div> +</section> - <section - id="custom-template" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div - class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Version 3 events</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Examples of the new version 3.0 events</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="version3-example" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="10:00" - /> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="version3-example" value="10:00" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const version3Example = new TimepickerUI('#version3-example', { +<section + id="custom-template" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div + class="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Version 3 events</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Examples of the new version 3.0 events</p> + </div> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> + <div class="flex justify-center"> + <input + id="version3-example" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="10:00" + /> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="version3-example" value="10:00" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const version3Example = new TimepickerUI('#version3-example', { theme: 'm3', clockType: '24h', focusTrap: false, @@ -172,44 +172,46 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< }); } </code></pre> - </div> - </div> - </div> - </div> - </section> + </div> + </div> + </div> + </div> +</section> - <section +<section + id="destroy-example" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div + class="bg-gradient-to-r from-purple-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Destroy example</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Example of how to destroy the timepicker</p> + </div> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> + <div class="flex flex-col sm:flex-row items-center justify-center gap-3"> + <input id="destroy-example" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="14:30" + /> + <button + id="destroy-button" + class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md transition-colors" > - <div - class="bg-gradient-to-r from-purple-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" - > - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Destroy example</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2">Example of how to destroy the timepicker</p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="destroy-example" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="14:30" - /> - - <button id="destroy-button" class="ml-4 bg-red-500 text-white px-4 py-2 rounded-md"> - Destroy - </button> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="destroy-example" value="14:30" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const destroyExample = new TimepickerUI('#destroy-example', { + Destroy + </button> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="destroy-example" value="14:30" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const destroyExample = new TimepickerUI('#destroy-example', { mobile: true, clockType: '24h', enableSwitchIcon: true @@ -223,44 +225,46 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< }); } </code></pre> - </div> - </div> - </div> - </section> - <section - id="clear-button" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Clear Button</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Allow users to clear selected time with a dedicated button - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="flex justify-center"> - <input - id="clear-button-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="2:30 PM" - /> - </div> - <div class="mt-4 text-center"> - <p class="text-sm text-gray-600 dark:text-gray-400"> - <strong>Try it:</strong> Open the timepicker and click the "Clear" button on the left side - to reset the time. - </p> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="clear-button-picker" value="2:30 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const clearButtonPicker = new TimepickerUI('#clear-button-picker', { + </div> + </div> + </div> +</section> +<section + id="clear-button" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div + class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Clear Button</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2"> + Allow users to clear selected time with a dedicated button + </p> + </div> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> + <div class="flex justify-center"> + <input + id="clear-button-picker" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="2:30 PM" + /> + </div> + <div class="mt-4 text-center"> + <p class="text-sm text-gray-600 dark:text-gray-400"> + <strong>Try it:</strong> Open the timepicker and click the "Clear" button on the left side to reset + the time. + </p> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="clear-button-picker" value="2:30 PM" /></code></pre> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const clearButtonPicker = new TimepickerUI('#clear-button-picker', { ui: { clearButton: true, theme: 'basic' @@ -275,53 +279,47 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< } }); clearButtonPicker.create();</code></pre> - </div> - </div> - <div - class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800" - > - <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-200 mb-2"> - Clear Button Behavior - </h4> - <ul class="text-sm text-blue-800 dark:text-blue-300 space-y-1 list-disc list-inside"> - <li>Removes the selected time value completely</li> - <li>Resets clock hands to neutral position (12:00 for 12h, 12:00 for 24h)</li> - <li>Disables the confirm button until a new time is selected</li> - <li> - Triggers the <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">onClear</code> callback - with previous value - </li> - <li>The button is disabled when no time is selected</li> - <li> - Use - <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded" - >clearBehavior: { clearInput: false }</code - > - to keep the input value when clearing - </li> - </ul> - </div> - <div class="mt-8"> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3"> - Clear without clearing input - </h4> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-4"> - <div class="flex justify-center"> - <input - id="clear-no-input-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" - value="9:15 AM" - /> - </div> - <div class="mt-4 text-center"> - <p class="text-sm text-gray-600 dark:text-gray-400"> - <strong>Try it:</strong> Click "Clear" — the clock resets but the input keeps its value. - </p> - </div> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const picker = new TimepickerUI('#clear-no-input-picker', { + </div> + </div> + <div + class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800" + > + <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-200 mb-2">Clear Button Behavior</h4> + <ul class="text-sm text-blue-800 dark:text-blue-300 space-y-1 list-disc list-inside"> + <li>Removes the selected time value completely</li> + <li>Resets clock hands to neutral position (12:00 for 12h, 12:00 for 24h)</li> + <li>Disables the confirm button until a new time is selected</li> + <li> + Triggers the <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">onClear</code> callback with + previous value + </li> + <li>The button is disabled when no time is selected</li> + <li> + Use + <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">clearBehavior: { clearInput: false }</code> + to keep the input value when clearing + </li> + </ul> + </div> + <div class="mt-8"> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Clear without clearing input</h4> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-4"> + <div class="flex justify-center"> + <input + id="clear-no-input-picker" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + value="9:15 AM" + /> + </div> + <div class="mt-4 text-center"> + <p class="text-sm text-gray-600 dark:text-gray-400"> + <strong>Try it:</strong> Click "Clear" — the clock resets but the input keeps its value. + </p> + </div> + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const picker = new TimepickerUI('#clear-no-input-picker', { ui: { clearButton: true }, clearBehavior: { clearInput: false @@ -333,120 +331,112 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< } }); picker.create();</code></pre> - </div> - </div> - </div> - </section> + </div> + </div> + </div> +</section> - <section - id="clear-button-themes" - class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" - > - <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> - <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Clear Button - All Themes</h3> - <p class="text-gray-600 dark:text-gray-300 mt-2"> - Clear button preview across all available themes - </p> - </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> - <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> - <input - id="clear-theme-basic" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> - <input - id="clear-theme-crane" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Crane Straight</label - > - <input - id="clear-theme-crane-straight" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >M3 Green</label - > - <input - id="clear-theme-m3-green" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> - <input - id="clear-theme-dark" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> - <input - id="clear-theme-m2" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Glassmorphic</label - > - <input - id="clear-theme-glassmorphic" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Pastel</label - > - <input - id="clear-theme-pastel" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> - <input - id="clear-theme-ai" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - <div class="text-center"> - <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" - >Cyberpunk</label - > - <input - id="clear-theme-cyberpunk" - class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" - value="10:30 PM" - /> - </div> - </div> - </div> - <div class="grid md:grid-cols-2 gap-6"> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> - <pre><code class="language-html"><input id="clear-theme-basic" value="10:30 PM" /> +<section + id="clear-button-themes" + class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" +> + <div + class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" + > + <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Clear Button - All Themes</h3> + <p class="text-gray-600 dark:text-gray-300 mt-2">Clear button preview across all available themes</p> + </div> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> + <input + id="clear-theme-basic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Crane</label> + <input + id="clear-theme-crane" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" + >Crane Straight</label + > + <input + id="clear-theme-crane-straight" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M3 Green</label> + <input + id="clear-theme-m3-green" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dark</label> + <input + id="clear-theme-dark" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">M2</label> + <input + id="clear-theme-m2" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Glassmorphic</label> + <input + id="clear-theme-glassmorphic" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pastel</label> + <input + id="clear-theme-pastel" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">AI</label> + <input + id="clear-theme-ai" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + <div class="text-center"> + <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Cyberpunk</label> + <input + id="clear-theme-cyberpunk" + class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-rose-500 transition-colors" + value="10:30 PM" + /> + </div> + </div> + </div> + <div class="grid md:grid-cols-2 gap-6"> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> + <pre><code class="language-html"><input id="clear-theme-basic" value="10:30 PM" /> <input id="clear-theme-crane" value="10:30 PM" /> <input id="clear-theme-crane-straight" value="10:30 PM" /> <input id="clear-theme-m3-green" value="10:30 PM" /> @@ -456,10 +446,10 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">HTML</h4> <input id="clear-theme-pastel" value="10:30 PM" /> <input id="clear-theme-ai" value="10:30 PM" /> <input id="clear-theme-cyberpunk" value="10:30 PM" /></code></pre> - </div> - <div> - <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> - <pre><code class="language-javascript">const clearThemeList = [ + </div> + <div> + <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript</h4> + <pre><code class="language-javascript">const clearThemeList = [ 'basic', 'crane', 'crane-straight', 'm3-green', 'dark', 'm2', 'glassmorphic', 'pastel', 'ai', 'cyberpunk' @@ -476,8 +466,8 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< }, }).create(); });</code></pre> - </div> - </div> - </div> - </section> + </div> + </div> + </div> +</section> diff --git a/app/docs/partials/basic-themes.html b/app/docs/partials/basic-themes.html index e17b974..cee5ffe 100644 --- a/app/docs/partials/basic-themes.html +++ b/app/docs/partials/basic-themes.html @@ -3,17 +3,17 @@ class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > <div - class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Basic Usage</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Simple time picker with default settings</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex justify-center"> <input id="basic-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="10:30 PM" /> </div> @@ -37,17 +37,17 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > <div - class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">24-Hour Format</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Time picker with 24-hour clock format</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex justify-center"> <input id="format-24h-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="15:45" /> </div> @@ -74,17 +74,17 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > <div - class="bg-gradient-to-r from-purple-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + class="bg-gradient-to-r from-purple-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Mobile Version</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Optimized interface for mobile devices</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex justify-center"> <input id="mobile-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="11:30 PM" /> </div> @@ -112,15 +112,15 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > <div - class="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + class="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Different Themes</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Choose from various themes included in the library </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" @@ -257,15 +257,15 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > <div - class="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + class="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone - All Themes</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Preview timezone selector across all available themes </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> @@ -367,15 +367,15 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone - All Them class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > <div - class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range - All Themes</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Preview range selector across all available themes </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> diff --git a/app/docs/partials/disabled.html b/app/docs/partials/disabled.html index e63416f..baaf943 100644 --- a/app/docs/partials/disabled.html +++ b/app/docs/partials/disabled.html @@ -2,12 +2,12 @@ id="disabled-times" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Disabled Times</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Block specific hours, minutes, or time intervals</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" @@ -70,12 +70,12 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="multiple-intervals" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Multiple Intervals</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Block specific hours, minutes, or time intervals</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" @@ -125,19 +125,19 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="dynamic-updates" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-amber-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-amber-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Dynamic Updates</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Update disabledTime and other options dynamically</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex flex-col items-center gap-4"> <input id="dynamic-update-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="10:00 AM" /> - <div class="flex gap-2"> + <div class="flex flex-wrap gap-2 justify-center"> <button id="update-morning-shift" class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors" @@ -204,18 +204,18 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="dynamic-interval-updates" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-rose-50 to-red-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-rose-50 to-red-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Dynamic Interval Updates</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Update disabled intervals dynamically for shift scheduling </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex flex-col items-center gap-4"> <input id="dynamic-interval-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="10:00" /> <div class="flex gap-2 flex-wrap justify-center"> @@ -289,16 +289,16 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="editable-mode" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Editable Mode</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Allow direct editing of time values in picker</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex justify-center"> <input id="editable-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="09:15 PM" /> </div> @@ -325,15 +325,15 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="hide-disabled-options" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Hide Disabled Options</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Completely remove disabled hours/minutes from the list instead of dimming them. Available in wheel and compact-wheel modes only. </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" @@ -412,16 +412,16 @@ <h4 class="text-sm font-semibold text-rose-900 dark:text-rose-200 mb-2">wheel.hi id="smooth-hour-snap" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-violet-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-violet-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Smooth Hour Snap</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Fluid hour dragging with smooth snapping animation</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex justify-center"> <input id="smooth-hour-snap-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="10:30 PM" /> </div> diff --git a/app/docs/partials/hide-footer.html b/app/docs/partials/hide-footer.html index f77941f..7ab4aad 100644 --- a/app/docs/partials/hide-footer.html +++ b/app/docs/partials/hide-footer.html @@ -2,15 +2,15 @@ id="hide-footer" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel — Hide Footer</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Footer completely removed from DOM — no OK/Cancel buttons rendered. Combine with <code class="bg-rose-100 dark:bg-rose-800 px-1 rounded">commitOnScroll</code> for a minimal UI. </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> diff --git a/app/docs/partials/popover-features.html b/app/docs/partials/popover-features.html index eec41c9..02027fb 100644 --- a/app/docs/partials/popover-features.html +++ b/app/docs/partials/popover-features.html @@ -2,15 +2,15 @@ id="popover-placement" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-violet-50 to-fuchsia-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-violet-50 to-fuchsia-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel + Popover</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Popover mode opens the compact wheel as a dropdown attached to the input. Supports auto, top, and bottom placement. </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid md:grid-cols-3 gap-8"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Popover Auto</label> @@ -40,7 +40,7 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel + Pop </div> </div> </div> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Popover Variants</h4> <div class="grid md:grid-cols-3 gap-8"> <div class="text-center"> @@ -128,14 +128,14 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="multi-popover" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-rose-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-rose-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Multiple Popover Pickers</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Multiple independent popover pickers on the same page — opening one closes any other </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid md:grid-cols-3 gap-6"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Time</label> @@ -201,14 +201,14 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="popover-themes" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-fuchsia-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-fuchsia-50 to-violet-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Popover — All Themes</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Compact wheel popover mode across all available themes </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> @@ -325,12 +325,12 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="inline-mode" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Inline Mode</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Always-visible timepicker embedded in the page</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid md:grid-cols-2 gap-8 items-start"> <div> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" @@ -375,16 +375,16 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="event-handling" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Event Handling</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Listen to value changes and user interactions</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex flex-col items-center space-y-4"> <input id="event-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="12:00 PM" /> <div class="text-center"> @@ -428,16 +428,16 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="custom-labels" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-pink-50 to-rose-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-pink-50 to-rose-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Custom Labels</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Customize all labels and text in different languages</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex justify-center"> <input id="custom-labels-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="10:30 PM" /> </div> @@ -469,12 +469,12 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="multiple-pickers" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Multiple Pickers</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Multiple isolated time pickers on the same page</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Time</label> @@ -534,18 +534,18 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="event-emitter-api" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">EventEmitter API (v3.1+)</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Modern event handling with on(), once(), and off() methods </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex flex-col items-center space-y-4"> <input id="event-emitter-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" value="02:30 PM" /> <div class="text-center"> @@ -607,16 +607,16 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="custom-theme" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-fuchsia-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-fuchsia-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Custom Theme</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Override default styles with your custom theme</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex justify-center"> <input id="custom-theme-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-colors" value="03:45 PM" /> </div> diff --git a/app/docs/partials/range.html b/app/docs/partials/range.html index 3adaa50..c8e7f34 100644 --- a/app/docs/partials/range.html +++ b/app/docs/partials/range.html @@ -1,14 +1,14 @@ <section class="mb-12"> <div id="range-mode" - class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" + class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-8 border border-gray-200 dark:border-gray-700" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (From–To)</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Select a time range for booking, scheduling, or reservation use cases. </p> - <div class="mt-6 grid md:grid-cols-2 gap-6"> + <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6 min-w-0"> <div class="space-y-4"> <input id="range-picker" @@ -72,14 +72,14 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (From– <section class="mb-12"> <div id="range-mode-24h" - class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" + class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-8 border border-gray-200 dark:border-gray-700" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (24h Format)</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Time range selection with 24-hour clock format. </p> - <div class="mt-6 grid md:grid-cols-2 gap-6"> + <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6 min-w-0"> <div class="space-y-4"> <input id="range-picker-24h" @@ -128,14 +128,14 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (24h For <section class="mb-12"> <div id="range-mode-12h-ampm" - class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" + class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-8 border border-gray-200 dark:border-gray-700" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (12h AM/PM)</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Time range selection spanning AM to PM periods. Try selecting 09:00 AM to 06:00 PM. </p> - <div class="mt-6 grid md:grid-cols-2 gap-6"> + <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6 min-w-0"> <div class="space-y-4"> <input id="range-picker-12h-ampm" @@ -191,14 +191,14 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range Mode (12h AM/ <section class="mb-12"> <div id="range-clear-button" - class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700" + class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-8 border border-gray-200 dark:border-gray-700" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Range + Clear Button</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Combine range mode with the clear button — select a time range with a reset option. </p> - <div class="mt-6 grid md:grid-cols-2 gap-6"> + <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6 min-w-0"> <div class="space-y-4"> <input id="range-clear-picker" diff --git a/app/docs/partials/timezone-api.html b/app/docs/partials/timezone-api.html index 19417fe..7aa7210 100644 --- a/app/docs/partials/timezone-api.html +++ b/app/docs/partials/timezone-api.html @@ -2,18 +2,18 @@ id="timezone-selector" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-cyan-50 to-sky-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-cyan-50 to-sky-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone Selector (Optional)</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Opt-in timezone selector for B2B/global use cases (UI-only, no conversions) </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex justify-center"> <input id="timezone-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" value="14:30" /> </div> @@ -67,20 +67,20 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > <div - class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone Selector - World Cities</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Comprehensive timezone example with major cities around the world </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="space-y-6"> <div class="flex justify-center"> <input id="timezone-world-picker" - class="w-64 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors" + class="w-full max-w-xs px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors" value="09:00" /> </div> @@ -313,7 +313,7 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Timezone - All Them class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden mb-12" > <div - class="bg-gradient-to-r from-lime-50 to-green-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6" + class="bg-gradient-to-r from-lime-50 to-green-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6" > <h3 class="text-2xl font-bold text-gray-900 dark:text-white"> getValue() Without Opening Widget @@ -322,8 +322,8 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white"> Read time values programmatically without opening the modal (Bug Fix Demo) </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="flex flex-col items-center gap-6"> <div class="w-full max-w-md"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> diff --git a/app/docs/partials/wheel.html b/app/docs/partials/wheel.html index 7e0764b..074bf46 100644 --- a/app/docs/partials/wheel.html +++ b/app/docs/partials/wheel.html @@ -2,14 +2,14 @@ id="wheel-mode" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-sky-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-sky-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Wheel Mode</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Scroll-spinner interface — replaces the analog clock face with touch-friendly wheels </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">12h Wheel</label> @@ -138,12 +138,12 @@ <h4 class="text-sm font-semibold text-sky-900 dark:text-sky-200 mb-2">Wheel Mode id="wheel-themes" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-sky-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-sky-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Wheel - All Themes</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Wheel mode preview across all available themes</p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> @@ -265,15 +265,15 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="compact-wheel" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-violet-50 to-fuchsia-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-violet-50 to-fuchsia-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel Mode</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Minimal wheel-only picker — no header, no clock face. AM/PM appears as a third scrollable column in 12h mode. Perfect for mobile and embedded UIs. </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">12h Compact</label> @@ -353,14 +353,14 @@ <h4 class="text-sm font-semibold text-violet-900 dark:text-violet-200 mb-2">Comp id="compact-wheel-themes" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-violet-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-violet-50 to-purple-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel - All Themes</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Compact wheel mode preview across all available themes </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Basic</label> @@ -482,14 +482,14 @@ <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">JavaScript< id="commit-on-scroll" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Commit on Scroll</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Auto-commit the selected time when the wheel stops scrolling — no OK button needed </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" @@ -579,14 +579,14 @@ <h4 class="text-sm font-semibold text-amber-900 dark:text-amber-200 mb-2">commit id="ignore-outside-click" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Ignore Outside Click</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> Keep the picker open when clicking outside its area — the user must press OK or Cancel to close it </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" @@ -679,15 +679,15 @@ <h4 class="text-sm font-semibold text-teal-900 dark:text-teal-200 mb-2">ignoreOu id="wheel-disabled" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-red-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-red-50 to-orange-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Wheel + Disabled Time</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> All disabledTime options in wheel mode — hours, minutes, single interval, multiple intervals, 24h, hideDisabledOptions </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" @@ -906,15 +906,15 @@ <h4 class="text-sm font-semibold text-red-900 dark:text-red-200 mb-2">Wheel + di id="compact-wheel-disabled" class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden" > - <div class="bg-gradient-to-r from-fuchsia-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-8 py-6"> + <div class="bg-gradient-to-r from-fuchsia-50 to-pink-50 dark:from-gray-700 dark:to-gray-600 px-4 py-4 sm:px-8 sm:py-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Compact Wheel + Disabled Time</h3> <p class="text-gray-600 dark:text-gray-300 mt-2"> All disabledTime options in compact-wheel mode — hours, minutes, single interval, multiple intervals, 24h, hideDisabledOptions </p> </div> - <div class="p-8"> - <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-8 mb-8"> + <div class="p-4 sm:p-8"> + <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 sm:p-8 mb-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="text-center"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" diff --git a/app/docs/style.css b/app/docs/style.css index 1035d78..52d6f9c 100644 --- a/app/docs/style.css +++ b/app/docs/style.css @@ -9,3 +9,18 @@ html { line-height: normal !important; } + +pre { + overflow-x: auto; + max-width: 100%; +} + +.docs-section-header { + padding: 1rem 1rem; +} + +@media (min-width: 640px) { + .docs-section-header { + padding: 1.5rem 2rem; + } +} diff --git a/app/eslint.config.js b/app/eslint.config.js new file mode 100644 index 0000000..9d34c9a --- /dev/null +++ b/app/eslint.config.js @@ -0,0 +1,68 @@ +import tseslint from 'typescript-eslint'; +import eslintPluginPrettier from 'eslint-plugin-prettier'; + +export default tseslint.config( + { + ignores: [ + 'docs/**', + 'dist/**', + 'node_modules/**', + 'rollup.config.js', + 'webpack.config.js', + 'src/**/*.d.ts', + 'docs/index.ts', + '.eslintrc.js', + 'eslint.config.js', + 'jest.config.ts', + 'tsup.config.ts', + 'tailwind.config.js', + ], + }, + ...tseslint.configs.recommended, + { + files: ['src/**/*.ts'], + languageOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + parserOptions: { + project: './tsconfig.json', + }, + }, + plugins: { + prettier: eslintPluginPrettier, + }, + rules: { + 'no-underscore-dangle': ['error', { allowAfterThis: true }], + 'func-names': 'off', + 'class-methods-use-this': 'off', + 'operator-linebreak': 'off', + 'consistent-return': 'off', + 'no-param-reassign': 'off', + 'import/prefer-default-export': 'off', + 'implicit-arrow-linebreak': 'off', + 'comma-dangle': 'off', + 'function-paren-newline': 'off', + 'wrap-iife': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + 'linebreak-style': ['error', 'windows'], + 'object-curly-newline': 'off', + indent: 'off', + '@typescript-eslint/indent': 'off', + 'max-len': 'off', + 'no-confusing-arrow': 'off', + 'no-unused-vars': 'off', + 'no-underscore-dangle': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { + vars: 'all', + args: 'after-used', + ignoreRestSiblings: true, + }, + ], + 'no-nested-ternary': 'error', + }, + }, +); + diff --git a/app/package.json b/app/package.json index 908199d..599aa3a 100644 --- a/app/package.json +++ b/app/package.json @@ -43,7 +43,7 @@ "build:webpack": "webpack", "build:rollup": "rollup -c", "build:tsup": "tsup", - "build:prod": "npm run build:tsup && npm run build:rollup", + "build:prod": "npm run eslint && npm run build:tsup && npm run build:rollup", "build:vercel": "webpack --config webpack.config.js", "start": "webpack serve --config webpack.config.js", "lint": "lint-staged && pretty-quick --staged", @@ -60,10 +60,6 @@ "author": "pglejzer", "license": "MIT", "homepage": "https://github.com/pglejzer/timepicker-ui#readme", - "eslintIgnore": [ - "dist/*", - "/dist/*" - ], "devDependencies": { "@babel/core": "^7.28.0", "@babel/eslint-parser": "^7.28.0", @@ -100,6 +96,7 @@ "eslint-plugin-import": "^2.32.0", "eslint-plugin-prettier": "^5.5.3", "eslint-plugin-tree-shaking": "^1.12.2", + "eslint-webpack-plugin": "^5.0.3", "file-loader": "^6.2.0", "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.3", @@ -136,6 +133,7 @@ "ts-node": "^10.9.2", "tsup": "^8.5.0", "typescript": "5.8.3", + "typescript-eslint": "^8.57.1", "url-loader": "4.1.1", "webpack": "5.100.2", "webpack-cli": "6.0.1", diff --git a/app/src/constants/timings.ts b/app/src/constants/timings.ts index f3ba14e..cb413d9 100644 --- a/app/src/constants/timings.ts +++ b/app/src/constants/timings.ts @@ -7,6 +7,7 @@ export const TIMINGS = { TIPS_ANIMATION: 401, MOBILE_TOGGLE: 450, CLOCK_SCALE_DELAY: 150, + WRAPPER_TRANSITION: 400, DROPDOWN_CLICK_DELAY: 10, } as const; diff --git a/app/src/core/PluginRegistry.ts b/app/src/core/PluginRegistry.ts index 808bbd1..dc1f3f9 100644 --- a/app/src/core/PluginRegistry.ts +++ b/app/src/core/PluginRegistry.ts @@ -14,20 +14,14 @@ export interface Plugin { optionsExtender?: (options: Record<string, unknown>) => void; } -interface PluginInput { - name: string; - factory: (core: never, emitter: never) => PluginManager; - optionsExtender?: (options: Record<string, unknown>) => void; -} - class PluginRegistryClass { private plugins: Map<string, Plugin> = new Map(); - register(plugin: Plugin | PluginInput): void { + register(plugin: Plugin): void { if (this.plugins.has(plugin.name)) { return; } - this.plugins.set(plugin.name, plugin as Plugin); + this.plugins.set(plugin.name, plugin); } getAll(): Plugin[] { diff --git a/app/src/managers/clock/engine/ClockEngine.ts b/app/src/managers/clock/engine/ClockEngine.ts index 06aecc5..85c8653 100644 --- a/app/src/managers/clock/engine/ClockEngine.ts +++ b/app/src/managers/clock/engine/ClockEngine.ts @@ -29,15 +29,15 @@ export class ClockEngine { const isInner = input.clockType === '24h' && AngleEngine.isInnerCircle(distance, input.clockRadius); let index = HourEngine.angleToIndex(workingAngle, input.clockType, isInner); - const value = HourEngine.indexToValue(index, input.clockType, input.amPm); + const value = HourEngine.indexToValue(index, input.clockType); const isDisabled = HourEngine.isDisabled(value, input.amPm, input.disabledTime); if (isDisabled) { - index = HourEngine.findNearestValid(index, input.clockType, input.amPm, input.disabledTime, isInner); + index = HourEngine.findNearestValid(index, input.clockType, input.amPm, input.disabledTime); } - const finalValue = HourEngine.indexToValue(index, input.clockType, input.amPm); + const finalValue = HourEngine.indexToValue(index, input.clockType); let finalAngle: number; if (smoothSnap) { diff --git a/app/src/managers/clock/engine/HourEngine.ts b/app/src/managers/clock/engine/HourEngine.ts index ff58928..7583a23 100644 --- a/app/src/managers/clock/engine/HourEngine.ts +++ b/app/src/managers/clock/engine/HourEngine.ts @@ -16,7 +16,7 @@ export class HourEngine { return baseIndex === 0 ? 12 : baseIndex; } - static indexToValue(index: number, clockType: ClockType, amPm: AmPmType): string { + static indexToValue(index: number, clockType: ClockType): string { if (clockType === '24h') { return index.toString().padStart(2, '0'); } @@ -171,7 +171,6 @@ export class HourEngine { clockType: ClockType, amPm: AmPmType, disabledTime: DisabledTimeConfig | null, - isInnerCircle: boolean, ): number { const maxHour = clockType === '24h' ? 23 : 12; @@ -183,7 +182,7 @@ export class HourEngine { if (testIndex < 0) testIndex += maxHour + 1; if (testIndex > maxHour) testIndex = testIndex % (maxHour + 1); - const value = this.indexToValue(testIndex, clockType, amPm); + const value = this.indexToValue(testIndex, clockType); if (!this.isDisabled(value, amPm, disabledTime)) { return testIndex; } diff --git a/app/src/managers/clock/handlers/ClockEventHandler.ts b/app/src/managers/clock/handlers/ClockEventHandler.ts index 9a6cd40..fc17dde 100644 --- a/app/src/managers/clock/handlers/ClockEventHandler.ts +++ b/app/src/managers/clock/handlers/ClockEventHandler.ts @@ -91,4 +91,3 @@ export class ClockEventHandler { clockSystem.updateDisabledTime(mergedDisabled); } } - diff --git a/app/src/managers/config/MobileViewHandler.ts b/app/src/managers/config/MobileViewHandler.ts index 1ddf6da..c148f6b 100644 --- a/app/src/managers/config/MobileViewHandler.ts +++ b/app/src/managers/config/MobileViewHandler.ts @@ -87,7 +87,143 @@ export class MobileViewHandler { ): void { this.isAnimating = true; - this.switchView(selectTimeLabel, icon, hourInput, minuteInput, true); + if (typeof requestAnimationFrame !== 'undefined') { + const isLandscape = + typeof window !== 'undefined' && + window.matchMedia('(orientation: landscape) and (min-width: 320px) and (max-width: 825px)').matches; + + requestAnimationFrame(() => { + if (isLandscape && wrapper instanceof HTMLElement) { + this.collapseLandscape( + wrapper, + mobileClockWrapper, + allElements, + icon, + selectTimeLabel, + hourInput, + minuteInput, + clockFace, + isOriginallyMobile, + ); + } else { + this.collapsePortrait( + wrapper, + mobileClockWrapper, + allElements, + icon, + selectTimeLabel, + hourInput, + minuteInput, + clockFace, + isOriginallyMobile, + ); + } + }); + } else { + this.switchView(selectTimeLabel, icon, hourInput, minuteInput, true); + this.isAnimating = false; + } + + icon?.setAttribute('aria-label', 'Show clock face'); + icon?.setAttribute('aria-pressed', 'false'); + } + + private collapseLandscape( + wrapper: HTMLElement, + mobileClockWrapper: Element | null, + allElements: NodeListOf<Element>, + icon: HTMLElement | null, + selectTimeLabel: Element | null, + hourInput: HTMLInputElement | null, + minuteInput: HTMLInputElement | null, + clockFace: HTMLDivElement | null, + isOriginallyMobile: boolean, + ): void { + clockFace?.classList.remove('scale-in'); + + const modal = this.core.getModalElement(); + const targetHeight = this.getMobileLandscapeHeight(modal); + + wrapper.style.width = '328px'; + wrapper.style.height = targetHeight; + + if (mobileClockWrapper instanceof HTMLElement) { + mobileClockWrapper.style.height = '0'; + mobileClockWrapper.style.opacity = '0'; + mobileClockWrapper.style.transform = 'scale(0)'; + } + + setTimeout(() => { + this.applyMobileClasses(wrapper, mobileClockWrapper, allElements, selectTimeLabel, isOriginallyMobile); + + wrapper.classList.add('mobile'); + if (mobileClockWrapper) { + mobileClockWrapper.classList.add('mobile'); + } + + this.switchView(selectTimeLabel, icon, hourInput, minuteInput, true); + + requestAnimationFrame(() => { + wrapper.style.width = ''; + wrapper.style.height = ''; + + if (mobileClockWrapper instanceof HTMLElement) { + mobileClockWrapper.style.height = ''; + mobileClockWrapper.style.opacity = ''; + mobileClockWrapper.style.transform = ''; + } + + this.isAnimating = false; + }); + }, TIMINGS.WRAPPER_TRANSITION); + } + + private collapsePortrait( + wrapper: Element, + mobileClockWrapper: Element | null, + allElements: NodeListOf<Element>, + icon: HTMLElement | null, + selectTimeLabel: Element | null, + hourInput: HTMLInputElement | null, + minuteInput: HTMLInputElement | null, + clockFace: HTMLDivElement | null, + isOriginallyMobile: boolean, + ): void { + if (isOriginallyMobile) { + clockFace?.classList.remove('scale-in'); + } else { + clockFace?.classList.add('scale-in'); + } + + mobileClockWrapper?.classList.remove('expanded'); + if (isOriginallyMobile) { + mobileClockWrapper?.classList.add('mobile'); + } + + requestAnimationFrame(() => { + this.applyMobileClasses(wrapper, mobileClockWrapper, allElements, selectTimeLabel, isOriginallyMobile); + this.switchView(selectTimeLabel, icon, hourInput, minuteInput, true); + + setTimeout(() => { + this.isAnimating = false; + }, TIMINGS.MOBILE_TOGGLE); + }); + } + + private applyMobileClasses( + wrapper: Element, + mobileClockWrapper: Element | null, + allElements: NodeListOf<Element>, + selectTimeLabel: Element | null, + isOriginallyMobile: boolean, + ): void { + wrapper.classList.remove('expanded'); + mobileClockWrapper?.classList.remove('expanded'); + + if (isOriginallyMobile) { + wrapper.classList.add('mobile'); + mobileClockWrapper?.classList.add('mobile'); + } allElements.forEach((el) => { if (el !== mobileClockWrapper && el !== wrapper && el !== selectTimeLabel) { @@ -104,34 +240,6 @@ export class MobileViewHandler { selectTimeLabel.classList.add('mobile'); } } - - if (typeof requestAnimationFrame !== 'undefined') { - requestAnimationFrame(() => { - mobileClockWrapper?.classList.remove('expanded'); - if (isOriginallyMobile) { - mobileClockWrapper?.classList.add('mobile'); - } - wrapper?.classList.remove('expanded'); - if (isOriginallyMobile) { - wrapper?.classList.add('mobile'); - } - - if (isOriginallyMobile) { - clockFace?.classList.remove('scale-in'); - } else { - clockFace?.classList.add('scale-in'); - } - - setTimeout(() => { - this.isAnimating = false; - }, TIMINGS.MOBILE_TOGGLE); - }); - } else { - this.isAnimating = false; - } - - icon?.setAttribute('aria-label', 'Show clock face'); - icon?.setAttribute('aria-pressed', 'false'); } private expandClockFace( @@ -319,5 +427,15 @@ export class MobileViewHandler { } } + private getMobileLandscapeHeight(modal: HTMLElement | null): string { + if (modal?.classList.contains('tp-ui-tz-mode')) { + return '326px'; + } + if (modal?.classList.contains('tp-ui-range-mode')) { + return '287px'; + } + return '258px'; + } + destroy(): void {} } diff --git a/app/src/managers/events/KeyboardHandlers.ts b/app/src/managers/events/KeyboardHandlers.ts index 4a41f65..f82a60d 100644 --- a/app/src/managers/events/KeyboardHandlers.ts +++ b/app/src/managers/events/KeyboardHandlers.ts @@ -55,7 +55,6 @@ export class KeyboardHandlers { e.preventDefault(); const currentValue = parseInt(hour.value) || 0; const max = parseInt(hour.getAttribute('max') || '23'); - const min = parseInt(hour.getAttribute('min') || '0'); const is12h = this.core.options.clock.type === '12h'; let newValue: number; diff --git a/app/src/managers/plugins/range/RangeManager.ts b/app/src/managers/plugins/range/RangeManager.ts index 2f65a71..843d3c1 100644 --- a/app/src/managers/plugins/range/RangeManager.ts +++ b/app/src/managers/plugins/range/RangeManager.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import type { CoreState } from '../../../timepicker/CoreState'; import type { EventEmitter, TimepickerEventMap } from '../../../utils/EventEmitter'; import type { RangeMinuteCommitEventData, ConfirmEventData } from '../../../types/types'; diff --git a/app/src/managers/plugins/range/RangeUI.ts b/app/src/managers/plugins/range/RangeUI.ts index 3c61b0b..8b45caa 100644 --- a/app/src/managers/plugins/range/RangeUI.ts +++ b/app/src/managers/plugins/range/RangeUI.ts @@ -45,19 +45,19 @@ export class RangeUI { const fromValue = this.state.getFromValue(); const toValue = this.state.getToValue(); - const fromDisplay = - activePart === 'from' && previewValue - ? formatDisplayTime(previewValue) - : fromValue - ? formatDisplayTime(fromValue) - : '--:--'; - - const toDisplay = - activePart === 'to' && previewValue - ? formatDisplayTime(previewValue) - : toValue - ? formatDisplayTime(toValue) - : '--:--'; + let fromDisplay = '--:--'; + if (activePart === 'from' && previewValue) { + fromDisplay = formatDisplayTime(previewValue); + } else if (fromValue) { + fromDisplay = formatDisplayTime(fromValue); + } + + let toDisplay = '--:--'; + if (activePart === 'to' && previewValue) { + toDisplay = formatDisplayTime(previewValue); + } else if (toValue) { + toDisplay = formatDisplayTime(toValue); + } if (fromTimeEl) fromTimeEl.textContent = fromDisplay; if (toTimeEl) toTimeEl.textContent = toDisplay; diff --git a/app/src/managers/plugins/timezone/TimezoneManager.ts b/app/src/managers/plugins/timezone/TimezoneManager.ts index 763c651..7057976 100644 --- a/app/src/managers/plugins/timezone/TimezoneManager.ts +++ b/app/src/managers/plugins/timezone/TimezoneManager.ts @@ -204,4 +204,3 @@ export default class TimezoneManager { clearTimezoneCache(); } } - diff --git a/app/src/managers/plugins/wheel/PopoverManager.ts b/app/src/managers/plugins/wheel/PopoverManager.ts index 9aa1944..f88d15b 100644 --- a/app/src/managers/plugins/wheel/PopoverManager.ts +++ b/app/src/managers/plugins/wheel/PopoverManager.ts @@ -6,6 +6,7 @@ const TP_POPOVER_GAP_PX = 4; const TP_POPOVER_MIN_WIDTH_PX = 260; const TP_POPOVER_MAX_WIDTH_PX = 328; const TP_POPOVER_EDGE_MARGIN_PX = 4; +const TP_POPOVER_VIEWPORT_THRESHOLD_PX = 16; type PopoverPlacement = 'top' | 'bottom'; @@ -81,12 +82,14 @@ export default class PopoverManager { if (placement === 'top') return 'top'; if (placement === 'bottom') return 'bottom'; - const spaceBelow = window.innerHeight - inputRect.bottom; + const viewportHeight = document.documentElement.clientHeight; + const spaceBelow = viewportHeight - inputRect.bottom; const spaceAbove = inputRect.top; + const requiredSpace = pickerHeight + TP_POPOVER_GAP_PX + TP_POPOVER_VIEWPORT_THRESHOLD_PX; - if (spaceBelow >= pickerHeight + TP_POPOVER_GAP_PX) return 'bottom'; - if (spaceAbove >= pickerHeight + TP_POPOVER_GAP_PX) return 'top'; - return 'bottom'; + if (spaceBelow >= requiredSpace) return 'bottom'; + if (spaceAbove >= requiredSpace) return 'top'; + return spaceBelow >= spaceAbove ? 'bottom' : 'top'; } private computeTop(resolved: PopoverPlacement, inputRect: DOMRect, pickerHeight: number): number { @@ -97,9 +100,10 @@ export default class PopoverManager { } private clampHorizontal(idealLeft: number, width: number): number { + const viewportWidth = document.documentElement.clientWidth; let left = idealLeft; - if (left + width > window.innerWidth) { - left = window.innerWidth - width - TP_POPOVER_EDGE_MARGIN_PX; + if (left + width > viewportWidth) { + left = viewportWidth - width - TP_POPOVER_EDGE_MARGIN_PX; } if (left < TP_POPOVER_EDGE_MARGIN_PX) { left = TP_POPOVER_EDGE_MARGIN_PX; diff --git a/app/src/managers/plugins/wheel/WheelRenderer.ts b/app/src/managers/plugins/wheel/WheelRenderer.ts index bc20f04..08563e1 100644 --- a/app/src/managers/plugins/wheel/WheelRenderer.ts +++ b/app/src/managers/plugins/wheel/WheelRenderer.ts @@ -1,5 +1,4 @@ import type { CoreState } from '../../../timepicker/CoreState'; -import type { EventEmitter, TimepickerEventMap } from '../../../utils/EventEmitter'; import { isDocument } from '../../../utils/node'; import { checkedDisabledValuesInterval } from '../../../utils/time/disable'; import type { WheelColumnType } from './WheelTypes'; @@ -17,7 +16,7 @@ export class WheelRenderer { private cachedItems: Map<WheelColumnType, NodeListOf<HTMLDivElement>> = new Map(); private removedItems: Map<WheelColumnType, HTMLDivElement[]> = new Map(); - constructor(core: CoreState, _emitter: EventEmitter<TimepickerEventMap>) { + constructor(core: CoreState) { this.core = core; } diff --git a/app/src/plugins/wheel.ts b/app/src/plugins/wheel.ts index ee1bc7d..e7bd0cf 100644 --- a/app/src/plugins/wheel.ts +++ b/app/src/plugins/wheel.ts @@ -7,4 +7,3 @@ export const WheelPlugin: Plugin = { }; export { WheelManager }; - diff --git a/app/src/styles/partials/_am-pm.scss b/app/src/styles/partials/_am-pm.scss index c94d13a..48bc6c6 100644 --- a/app/src/styles/partials/_am-pm.scss +++ b/app/src/styles/partials/_am-pm.scss @@ -22,6 +22,9 @@ flex-direction: row; width: 100%; margin-left: 0; + transition: + width 400ms cubic-bezier(0.4, 0, 0.2, 1), + margin 400ms cubic-bezier(0.4, 0, 0.2, 1); } } @@ -37,7 +40,13 @@ justify-content: center; align-items: center; border: var(--tp-border-width) solid var(--tp-border); - transition: all 0.3s ease; + transition: + color 300ms ease, + background-color 300ms ease, + width 400ms cubic-bezier(0.4, 0, 0.2, 1), + height 400ms cubic-bezier(0.4, 0, 0.2, 1), + max-height 400ms cubic-bezier(0.4, 0, 0.2, 1), + border-radius 400ms cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; width: 100%; height: 100%; @@ -76,7 +85,7 @@ &-am.expanded { @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { border-right: unset; - border-bottom: var(--tp-border-width) solid #000; + border-bottom: var(--tp-border-width) solid var(--tp-border); } } diff --git a/app/src/styles/partials/_header.scss b/app/src/styles/partials/_header.scss index cacfcf7..3c2fce4 100644 --- a/app/src/styles/partials/_header.scss +++ b/app/src/styles/partials/_header.scss @@ -38,6 +38,7 @@ @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { height: auto; flex-direction: column; + transition: padding 400ms cubic-bezier(0.4, 0, 0.2, 1); } } diff --git a/app/src/styles/partials/_range.scss b/app/src/styles/partials/_range.scss index b5a6982..ed39569 100644 --- a/app/src/styles/partials/_range.scss +++ b/app/src/styles/partials/_range.scss @@ -92,3 +92,18 @@ opacity: var(--tp-opacity-disabled); pointer-events: none; } + +@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + .tp-ui-range-mode .tp-ui-range-header.expanded { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + margin-bottom: 0; + padding: var(--tp-spacing-sm) var(--tp-spacing-md) 0; + z-index: 1; + box-sizing: border-box; + justify-content: flex-start; + } +} diff --git a/app/src/styles/partials/_time-inputs.scss b/app/src/styles/partials/_time-inputs.scss index bfa0b86..1b752e8 100644 --- a/app/src/styles/partials/_time-inputs.scss +++ b/app/src/styles/partials/_time-inputs.scss @@ -26,6 +26,7 @@ overflow: hidden; width: 100%; height: 80px; + transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1); &.mobile { height: 72px; @@ -56,6 +57,9 @@ margin-right: 0; height: auto; margin-bottom: var(--tp-spacing-lg); + transition: + margin 400ms cubic-bezier(0.4, 0, 0.2, 1), + height 400ms cubic-bezier(0.4, 0, 0.2, 1); } } diff --git a/app/src/styles/partials/_timezone.scss b/app/src/styles/partials/_timezone.scss index aca0c80..a65ee2f 100644 --- a/app/src/styles/partials/_timezone.scss +++ b/app/src/styles/partials/_timezone.scss @@ -203,3 +203,49 @@ font-size: 13px; } } + +@media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { + .tp-ui-tz-mode .tp-ui-wrapper.expanded { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto auto; + grid-template-areas: + 'label clock' + 'header clock' + 'tz clock' + 'footer footer'; + } + + .tp-ui-tz-mode .tp-ui-wrapper.expanded .tp-ui-select-time { + grid-area: label; + position: relative; + } + + .tp-ui-tz-mode .tp-ui-header.expanded, + .tp-ui-tz-mode .tp-ui-header.mobile.expanded { + grid-area: header; + align-self: center; + padding-bottom: 0; + } + + .tp-ui-tz-mode .tp-ui-timezone.expanded:not(.mobile) { + grid-area: tz; + position: relative; + border-top: none; + padding: 4px 24px; + margin: 0; + align-self: start; + } + + .tp-ui-tz-mode .tp-ui-mobile-clock-wrapper.expanded { + grid-area: clock; + } + + .tp-ui-tz-mode .tp-ui-footer.expanded { + grid-area: footer; + position: relative; + bottom: auto; + left: auto; + right: auto; + } +} diff --git a/app/src/styles/partials/_wrapper.scss b/app/src/styles/partials/_wrapper.scss index e5b40d0..ab0e449 100644 --- a/app/src/styles/partials/_wrapper.scss +++ b/app/src/styles/partials/_wrapper.scss @@ -39,7 +39,7 @@ transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1), height 400ms cubic-bezier(0.4, 0, 0.2, 1), - flex-direction 0ms cubic-bezier(0.4, 0, 0.2, 1) 400ms; + flex-direction 0ms cubic-bezier(0.4, 0, 0.2, 1); @media screen and (min-width: 320px) and (max-width: 825px) and (orientation: landscape) { width: 328px; @@ -47,7 +47,15 @@ transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1), height 400ms cubic-bezier(0.4, 0, 0.2, 1), - flex-direction 0ms cubic-bezier(0.4, 0, 0.2, 1) 400ms; + flex-direction 0ms cubic-bezier(0.4, 0, 0.2, 1); + + .tp-ui-tz-mode & { + height: 326px; + } + + .tp-ui-range-mode & { + height: 287px; + } } @media screen and (max-width: 330px) { diff --git a/app/src/timepicker/Lifecycle.ts b/app/src/timepicker/Lifecycle.ts index ff94966..a44aaf7 100644 --- a/app/src/timepicker/Lifecycle.ts +++ b/app/src/timepicker/Lifecycle.ts @@ -34,7 +34,7 @@ export class Lifecycle { try { this.managers.config.updateInputValueWithCurrentTimeOnStart(); this.managers.validation.checkDisabledValuesOnStart(); - } catch (error) { + } catch { this.core.setIsDestroyed(true); return; } diff --git a/app/src/timepicker/TimepickerUI.ts b/app/src/timepicker/TimepickerUI.ts index 19e0f50..d5ca22c 100644 --- a/app/src/timepicker/TimepickerUI.ts +++ b/app/src/timepicker/TimepickerUI.ts @@ -276,7 +276,7 @@ export default class TimepickerUI { } this.syncClockVisual(parsed); - } catch (error) { + } catch { return; } } @@ -435,10 +435,7 @@ export default class TimepickerUI { * @param handler - The function to handle the event. * @returns - void */ - public on<K extends keyof TimepickerEventMap>( - event: K, - handler: (data: TimepickerEventMap[K]) => void, - ): void { + public on<K extends keyof TimepickerEventMap>(event: K, handler: () => void): void { if (this.core.isDestroyed) return; this.emitter.on(event, handler); } @@ -449,10 +446,7 @@ export default class TimepickerUI { * @param handler - The function to handle the event. * @returns - void */ - public once<K extends keyof TimepickerEventMap>( - event: K, - handler: (data: TimepickerEventMap[K]) => void, - ): void { + public once<K extends keyof TimepickerEventMap>(event: K, handler: () => void): void { if (this.core.isDestroyed) return; this.emitter.once(event, handler); } @@ -463,10 +457,7 @@ export default class TimepickerUI { * @param handler - The function to handle the event. * @returns - void */ - public off<K extends keyof TimepickerEventMap>( - event: K, - handler?: (data: TimepickerEventMap[K]) => void, - ): void { + public off<K extends keyof TimepickerEventMap>(event: K, handler?: () => void): void { if (this.core.isDestroyed) return; this.emitter.off(event, handler); } diff --git a/app/src/utils/config/index.ts b/app/src/utils/config/index.ts index 110a81c..e86fbfa 100644 --- a/app/src/utils/config/index.ts +++ b/app/src/utils/config/index.ts @@ -1,6 +1,6 @@ import { isDocument } from '../node'; -/* eslint-disable no-else-return */ + export const getScrollbarWidth = (): number => { if (isDocument() === false) { return 0; diff --git a/app/src/utils/errors/index.ts b/app/src/utils/errors/index.ts index d01be2c..45051fb 100644 --- a/app/src/utils/errors/index.ts +++ b/app/src/utils/errors/index.ts @@ -20,4 +20,3 @@ export const ERROR_CODES = { CONTAINER_NOT_FOUND: 'CONTAINER_NOT_FOUND', SSR_ENVIRONMENT: 'SSR_ENVIRONMENT', } as const; - diff --git a/app/src/utils/template/index.ts b/app/src/utils/template/index.ts index b0f0739..40ec0f0 100644 --- a/app/src/utils/template/index.ts +++ b/app/src/utils/template/index.ts @@ -121,6 +121,7 @@ export const getModalTemplate = (options: Required<TimepickerOptions>, instanceI const isCompactWheel = pickerMode === 'compact-wheel' && PluginRegistry.has('wheel'); const isWheelMode = (pickerMode === 'wheel' || isCompactWheel) && PluginRegistry.has('wheel'); const isRangeMode = !!options.range?.enabled && PluginRegistry.has('range'); + const isTzMode = !!options.timezone?.enabled && PluginRegistry.has('timezone'); const config: TemplateConfig = { mobileClass, @@ -138,7 +139,15 @@ export const getModalTemplate = (options: Required<TimepickerOptions>, instanceI const footer = isCompactWheel && options.wheel?.hideFooter === true ? '' : buildFooter(options, mobileClass); - const wheelClass = isCompactWheel ? ' tp-ui-compact-wheel-mode' : isWheelMode ? ' tp-ui-wheel-mode' : ''; + let wheelClass; - return `<div class="tp-ui-modal normalize ${mobileClass}${isRangeMode ? ' tp-ui-range-mode' : ''}${wheelClass}" data-theme="${theme}" role="dialog" aria-modal="true" aria-labelledby="tp-ui-label-${instanceId}" data-owner-id="${instanceId}" style='transition:${animation ? 'opacity 0.15s linear' : 'none'}'><div class="tp-ui-wrapper ${mobileClass}" tabindex="0">${rangeSelector}${header}${timezoneSelector}${pickerBody}${footer}</div><div class="timepicker-announcer sr-only" role="status" aria-live="polite" aria-atomic="true"></div></div>`; + if (isCompactWheel) { + wheelClass = ' tp-ui-compact-wheel-mode'; + } else if (isWheelMode) { + wheelClass = ' tp-ui-wheel-mode'; + } else { + wheelClass = ''; + } + + return `<div class="tp-ui-modal normalize ${mobileClass}${isRangeMode ? ' tp-ui-range-mode' : ''}${isTzMode ? ' tp-ui-tz-mode' : ''}${wheelClass}" data-theme="${theme}" role="dialog" aria-modal="true" aria-labelledby="tp-ui-label-${instanceId}" data-owner-id="${instanceId}" style='transition:${animation ? 'opacity 0.15s linear' : 'none'}'><div class="tp-ui-wrapper ${mobileClass}" tabindex="0">${rangeSelector}${header}${timezoneSelector}${pickerBody}${footer}</div><div class="timepicker-announcer sr-only" role="status" aria-live="polite" aria-atomic="true"></div></div>`; }; diff --git a/app/src/utils/time/disable.ts b/app/src/utils/time/disable.ts index 7182f67..99c3858 100644 --- a/app/src/utils/time/disable.ts +++ b/app/src/utils/time/disable.ts @@ -2,7 +2,7 @@ import { range, reverseRange, timeConversion, normalize24h, isOverlappingRangeAr import { getInputValue, handleValueAndCheck } from '../input'; import type { TimepickerOptions } from '../../types/options'; -/* eslint-disable no-else-return */ + export const createDisabledTime = (options: Required<TimepickerOptions>) => { if (!options) return; const { disabledTime, type: clockType } = options.clock; diff --git a/app/src/wheel.ts b/app/src/wheel.ts index 0ea347a..9e284b5 100644 --- a/app/src/wheel.ts +++ b/app/src/wheel.ts @@ -1,2 +1 @@ export * from './plugins/wheel'; - diff --git a/app/webpack.config.js b/app/webpack.config.js index 035ea1b..a91afe1 100644 --- a/app/webpack.config.js +++ b/app/webpack.config.js @@ -2,6 +2,7 @@ import path from 'path'; import { fileURLToPath } from 'url'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import ESLintPlugin from 'eslint-webpack-plugin'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); @@ -109,6 +110,12 @@ export default { new MiniCssExtractPlugin({ filename: '[name].css', }), + new ESLintPlugin({ + extensions: ['ts'], + files: 'src/**/*.ts', + emitWarning: true, + failOnError: false, + }), ], performance: { hints: false, diff --git a/docs-app/app/docs/changelog/page.tsx b/docs-app/app/docs/changelog/page.tsx index 92411d1..6ab29a8 100644 --- a/docs-app/app/docs/changelog/page.tsx +++ b/docs-app/app/docs/changelog/page.tsx @@ -122,6 +122,31 @@ const CHANGELOG_420 = { description: "Rapidly clicking the input before the modal fully opened could cause the picker to remain invisible in the DOM or permanently block the input element", }, + { + title: "Range plugin landscape layout", + description: + "From/To header tabs were mispositioned in landscape orientation. Fixed with proper absolute positioning within the grid layout", + }, + { + title: "Timezone plugin landscape layout", + description: + "Timezone picker was broken in landscape orientation. Implemented CSS Grid layout that properly positions header, timezone selector, and clock face side by side", + }, + { + title: "AM/PM border color in landscape", + description: + "Hardcoded black border replaced with theme-aware var(--tp-border) variable", + }, + { + title: "Compact-wheel popover viewport detection", + description: + "Popover did not flip from bottom to top early enough near the viewport edge. Added safety threshold, switched to accurate visible viewport measurement, and improved fallback to prefer the side with more space", + }, + { + title: "PluginFactory type safety", + description: + "PluginFactory type now correctly accepts CoreState and EventEmitter parameters instead of using any/never workarounds. Removed unsafe type assertions from the plugin registry", + }, ], }; @@ -423,10 +448,10 @@ export default function ChangelogPage() { variant="purple" className="mb-6" > - <strong>v4.2.0</strong> - Released March 17, 2026 + <strong>v4.2.0</strong> - Released March 18, 2026 </InfoBox> - <Section icon={History} title="Version 4.2.0 - March 17, 2026"> + <Section icon={History} title="Version 4.2.0 - March 18, 2026"> <div className="space-y-4"> <ChangeSection icon={Sparkles} diff --git a/docs-app/app/docs/whats-new/page.tsx b/docs-app/app/docs/whats-new/page.tsx index 32e27dd..9c0f160 100644 --- a/docs-app/app/docs/whats-new/page.tsx +++ b/docs-app/app/docs/whats-new/page.tsx @@ -39,8 +39,8 @@ export default function WhatsNewPage() { className="mb-8" > <p className="mb-3"> - <strong>March 17, 2026</strong> - Wheel mode, compact-wheel, clear - button, race condition fix, and more + <strong>March 18, 2026</strong> - Wheel mode, compact-wheel, clear + button, landscape fixes, and more </p> <p className="text-sm">What's new:</p> <ul className="mt-2 space-y-1 text-sm ml-4"> @@ -98,6 +98,18 @@ export default function WhatsNewPage() { before the modal fully opened no longer causes the picker to get stuck invisible in the DOM or permanently blocks the input </li> + <li> + <strong>Range landscape fix</strong> - From/To tabs now properly + positioned in landscape orientation + </li> + <li> + <strong>Timezone landscape fix</strong> - Timezone picker layout + corrected in landscape orientation with CSS Grid + </li> + <li> + <strong>AM/PM border theming</strong> - Landscape border color now + uses theme variable instead of hardcoded black + </li> </ul> <Link href="/docs/changelog" diff --git a/docs-app/public/bundle-data.json b/docs-app/public/bundle-data.json index 0ca3071..d7152e4 100644 --- a/docs-app/public/bundle-data.json +++ b/docs-app/public/bundle-data.json @@ -1,5 +1,5 @@ { - "timestamp": "2026-02-14T16:53:14.212Z", + "timestamp": "2026-03-18T19:38:15.466Z", "results": { "rollup": { "core": { @@ -8,22 +8,22 @@ { "name": "core-only.js", "displayName": "Core (unminified)", - "raw": 82934, - "gzip": 20541, - "brotli": 17764 + "raw": 95181, + "gzip": 23442, + "brotli": 20218 }, { "name": "core-only.min.js", "displayName": "Core (minified)", - "raw": 81173, - "gzip": 19833, - "brotli": 17169 + "raw": 93190, + "gzip": 22640, + "brotli": 19504 } ], "total": { - "raw": 164107, - "gzip": 40374, - "brotli": 34933 + "raw": 188371, + "gzip": 46082, + "brotli": 39722 } }, "full": { @@ -32,22 +32,22 @@ { "name": "full-static.js", "displayName": "Full (unminified)", - "raw": 99480, - "gzip": 24438, - "brotli": 21104 + "raw": 112598, + "gzip": 27454, + "brotli": 23704 }, { "name": "full-static.min.js", "displayName": "Full (minified)", - "raw": 97361, - "gzip": 23574, - "brotli": 20368 + "raw": 110215, + "gzip": 26466, + "brotli": 22797 } ], "total": { - "raw": 196841, - "gzip": 48012, - "brotli": 41472 + "raw": 222813, + "gzip": 53920, + "brotli": 46501 } }, "lazy": { @@ -56,16 +56,16 @@ { "name": "entry-lazy-load.js", "displayName": "entry-lazy-load.js", - "raw": 81414, - "gzip": 19937, - "brotli": 17252 + "raw": 93429, + "gzip": 22738, + "brotli": 19599 }, { "name": "plugin-range.js", "displayName": "Range Plugin", - "raw": 9803, - "gzip": 2560, - "brotli": 2321 + "raw": 10634, + "gzip": 2712, + "brotli": 2459 }, { "name": "plugin-timezone.js", @@ -76,9 +76,9 @@ } ], "total": { - "raw": 97577, - "gzip": 24582, - "brotli": 21419 + "raw": 110423, + "gzip": 27535, + "brotli": 23904 } } }, @@ -89,22 +89,22 @@ { "name": "core-only.js", "displayName": "Core (minified)", - "raw": 85373, - "gzip": 20510, - "brotli": 17664 + "raw": 98246, + "gzip": 23455, + "brotli": 20132 }, { "name": "core-only.unmin.js", "displayName": "Core (unminified)", - "raw": 108899, - "gzip": 22890, - "brotli": 19458 + "raw": 124972, + "gzip": 26198, + "brotli": 22148 } ], "total": { - "raw": 194272, - "gzip": 43400, - "brotli": 37122 + "raw": 223218, + "gzip": 49653, + "brotli": 42280 } }, "full": { @@ -113,22 +113,22 @@ { "name": "full-static.js", "displayName": "Full (minified)", - "raw": 102483, - "gzip": 24379, - "brotli": 20987 + "raw": 116219, + "gzip": 27431, + "brotli": 23514 }, { "name": "full-static.unmin.js", "displayName": "Full (unminified)", - "raw": 131690, - "gzip": 27504, - "brotli": 23325 + "raw": 148636, + "gzip": 30961, + "brotli": 26056 } ], "total": { - "raw": 234173, - "gzip": 51883, - "brotli": 44312 + "raw": 264855, + "gzip": 58392, + "brotli": 49570 } }, "lazy": { @@ -137,16 +137,16 @@ { "name": "lazy-load.js", "displayName": "Main chunk", - "raw": 86842, - "gzip": 21132, - "brotli": 18178 + "raw": 99711, + "gzip": 24060, + "brotli": 20643 }, { - "name": "plugin-range-Dq9JBCVG.js", + "name": "plugin-range-CheiFi9w.js", "displayName": "Range Plugin", - "raw": 10500, - "gzip": 2739, - "brotli": 2475 + "raw": 11365, + "gzip": 2887, + "brotli": 2628 }, { "name": "plugin-timezone-BX_BRdyg.js", @@ -157,9 +157,9 @@ } ], "total": { - "raw": 104258, - "gzip": 26146, - "brotli": 22663 + "raw": 117992, + "gzip": 29222, + "brotli": 25281 } } }, @@ -170,22 +170,22 @@ { "name": "core-only.js", "displayName": "Core (unminified)", - "raw": 82735, - "gzip": 20779, - "brotli": 17886 + "raw": 94919, + "gzip": 23674, + "brotli": 20353 }, { "name": "core-only.min.js", "displayName": "Core (minified)", - "raw": 81231, - "gzip": 19844, - "brotli": 17176 + "raw": 93279, + "gzip": 22675, + "brotli": 19546 } ], "total": { - "raw": 163966, - "gzip": 40623, - "brotli": 35062 + "raw": 188198, + "gzip": 46349, + "brotli": 39899 } }, "full": { @@ -194,22 +194,22 @@ { "name": "full-static.js", "displayName": "Full (unminified)", - "raw": 99447, - "gzip": 24773, - "brotli": 21263 + "raw": 112546, + "gzip": 27778, + "brotli": 23803 }, { "name": "full-static.min.js", "displayName": "Full (minified)", - "raw": 97404, - "gzip": 23576, - "brotli": 20353 + "raw": 110289, + "gzip": 26493, + "brotli": 22823 } ], "total": { - "raw": 196851, - "gzip": 48349, - "brotli": 41616 + "raw": 222835, + "gzip": 54271, + "brotli": 46626 } }, "lazy": { @@ -218,9 +218,9 @@ { "name": "21.chunk.js", "displayName": "Range Plugin chunk", - "raw": 9919, - "gzip": 2612, - "brotli": 2377 + "raw": 10750, + "gzip": 2768, + "brotli": 2521 }, { "name": "37.chunk.js", @@ -232,15 +232,15 @@ { "name": "lazy-load.js", "displayName": "Main chunk", - "raw": 83923, - "gzip": 21106, - "brotli": 18218 + "raw": 95967, + "gzip": 23930, + "brotli": 20584 } ], "total": { - "raw": 100315, - "gzip": 25866, - "brotli": 22497 + "raw": 113190, + "gzip": 28846, + "brotli": 25007 } } }, @@ -251,22 +251,22 @@ { "name": "core-only.js", "displayName": "Core (unminified)", - "raw": 100890, - "gzip": 22291, - "brotli": 18966 + "raw": 115516, + "gzip": 25451, + "brotli": 21592 }, { "name": "core-only.min.js", "displayName": "Core (minified)", - "raw": 82244, - "gzip": 20540, - "brotli": 17701 + "raw": 94416, + "gzip": 23425, + "brotli": 20126 } ], "total": { - "raw": 183134, - "gzip": 42831, - "brotli": 36667 + "raw": 209932, + "gzip": 48876, + "brotli": 41718 } }, "full": { @@ -275,22 +275,22 @@ { "name": "full-static.js", "displayName": "Full (unminified)", - "raw": 121994, - "gzip": 26867, - "brotli": 22763 + "raw": 137433, + "gzip": 30182, + "brotli": 25424 }, { "name": "full-static.min.js", "displayName": "Full (minified)", - "raw": 98660, - "gzip": 24383, - "brotli": 20933 + "raw": 111685, + "gzip": 27389, + "brotli": 23440 } ], "total": { - "raw": 220654, - "gzip": 51250, - "brotli": 43696 + "raw": 249118, + "gzip": 57571, + "brotli": 48864 } }, "lazy": { @@ -299,37 +299,37 @@ { "name": "entry-lazy-load.js", "displayName": "Main chunk", - "raw": 82434, - "gzip": 20634, - "brotli": 17750 + "raw": 94605, + "gzip": 23521, + "brotli": 20178 }, { - "name": "range-XDHY2ZVU.js", + "name": "range-5JQLIBLT.js", "displayName": "Range Plugin", - "raw": 9814, - "gzip": 2553, - "brotli": 2323 + "raw": 10645, + "gzip": 2708, + "brotli": 2460 }, { - "name": "timezone-PBB5NCTC.js", + "name": "timezone-ASQNNWOQ.js", "displayName": "Timezone Plugin", - "raw": 6597, - "gzip": 2275, - "brotli": 1995 + "raw": 6620, + "gzip": 2292, + "brotli": 1992 } ], "total": { - "raw": 98845, - "gzip": 25462, - "brotli": 22068 + "raw": 111870, + "gzip": 28521, + "brotli": 24630 } } } }, "treeshaking": { - "coreSize": 19833, - "fullSize": 23574, - "pluginOverhead": 3741, - "pluginOverheadPercent": "18.9" + "coreSize": 22640, + "fullSize": 26466, + "pluginOverhead": 3826, + "pluginOverheadPercent": "16.9" } } \ No newline at end of file From 4cbedb65972bc177ae7ff0b51379b4018bd0d083 Mon Sep 17 00:00:00 2001 From: pglejzer <glejzerpiotr@gmail.com> Date: Wed, 18 Mar 2026 20:43:41 +0100 Subject: [PATCH 10/10] fix tests --- app/src/managers/plugins/wheel/WheelManager.ts | 2 +- app/src/utils/timezone/index.ts | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/app/src/managers/plugins/wheel/WheelManager.ts b/app/src/managers/plugins/wheel/WheelManager.ts index ee1cdf3..4302da6 100644 --- a/app/src/managers/plugins/wheel/WheelManager.ts +++ b/app/src/managers/plugins/wheel/WheelManager.ts @@ -21,7 +21,7 @@ export default class WheelManager { constructor(core: CoreState, emitter: EventEmitter<TimepickerEventMap>) { this.core = core; this.emitter = emitter; - this.renderer = new WheelRenderer(core, emitter); + this.renderer = new WheelRenderer(core); this.dragHandler = new WheelDragHandler(this.renderer); this.scrollHandler = new WheelScrollHandler(this.renderer, core); this.scrollHandler.setDragHandler(this.dragHandler); diff --git a/app/src/utils/timezone/index.ts b/app/src/utils/timezone/index.ts index 5c2698b..4dac79d 100644 --- a/app/src/utils/timezone/index.ts +++ b/app/src/utils/timezone/index.ts @@ -6,6 +6,16 @@ export interface TimezoneInfo { let cachedTimezones: TimezoneInfo[] | null = null; +const normalizeOffset = (raw: string): string => { + if (!raw || raw === '+0' || raw === '-0') return '+00:00'; + const sign = raw.startsWith('-') ? '-' : '+'; + const stripped = raw.replace(/^[+-]/, ''); + const parts = stripped.split(':'); + const hours = parts[0].padStart(2, '0'); + const minutes = parts.length > 1 ? parts[1].padStart(2, '0') : '00'; + return `${sign}${hours}:${minutes}`; +}; + export const getTimezoneOffset = (timezone: string): string => { try { const formatter = new Intl.DateTimeFormat('en-US', { @@ -14,7 +24,8 @@ export const getTimezoneOffset = (timezone: string): string => { }); const parts = formatter.formatToParts(new Date()); const tzPart = parts.find((p) => p.type === 'timeZoneName'); - return tzPart?.value?.replace('GMT', '') || '+00:00'; + const raw = tzPart?.value?.replace('GMT', '') || ''; + return normalizeOffset(raw); } catch { return '+00:00'; } @@ -98,4 +109,3 @@ export const getTimezoneList = (whitelist?: readonly string[]): TimezoneInfo[] = export const clearTimezoneCache = (): void => { cachedTimezones = null; }; -