lukas/timetracker
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects 1 Releases 23 Wiki Activity

Convert onSwap widgets to custom elements (issue #18)

Browse Source 
Replaces the four onSwap-based widgets with TypeScript custom elements
following the pattern from PR #16. Each widget gets a class extending
HTMLElement with connectedCallback/disconnectedCallback, typed props via
register_element + gen_element_types codegen, and lives in ts/elements/.

- range-slider: RangeSliderElement; Python uses _RangeSlider builder
- date-range-picker: DateRangePickerElement; Python uses _DateRangePicker builder
- search-select: SearchSelectElement; Python uses _SearchSelect builder;
  data-* attrs become plain attrs (data-name -> name, data-search-url -> search-url, etc.)
- filter-bar: FilterBarElement; props carry preset URLs; onclick/onsubmit
  attrs replaced with data-filter-bar-* sentinel attrs; all window.* globals removed

Deletes ts/range_slider.ts, ts/search_select.ts, ts/date_range_picker.ts,
ts/filter_bar.ts. Updates all tests and e2e pages to use the new element
selectors and script paths (dist/elements/<tag>.js).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukáš Kucharczyk
2026-06-20 14:22:59 +02:00
parent 4652f1ff55
commit 82416e149d
33 changed files with 2301 additions and 2168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/test_date_range_picker_e2e.py
+5 -5
View File
@@ -29,10 +29,10 @@ def _bar_page(filter_json: str = "") -> str:
<head>
<title>Date range picker E2E</title>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/dist/range_slider.js" type="module"></script>
<script src="/static/js/dist/search_select.js" type="module"></script>
<script src="/static/js/dist/date_range_picker.js" type="module"></script>
<script src="/static/js/dist/filter_bar.js" type="module"></script>
<script src="/static/js/dist/elements/range-slider.js" type="module"></script>
<script src="/static/js/dist/elements/search-select.js" type="module"></script>
<script src="/static/js/dist/elements/date-range-picker.js" type="module"></script>
<script src="/static/js/dist/elements/filter-bar.js" type="module"></script>
</head>
<body>
{PurchaseFilterBar(filter_json=filter_json, preset_list_url="/p/l", preset_save_url="/p/s")}
@@ -63,7 +63,7 @@ urlpatterns = [
]
PICKER = '[data-date-range-picker][data-input-name-prefix="filter-date-purchased"]'
PICKER = "date-range-picker"
POPUP = PICKER + " [data-date-range-calendar]"
HIDDEN_MIN = 'input[name="filter-date-purchased-min"]'
HIDDEN_MAX = 'input[name="filter-date-purchased-max"]'