Convert onSwap widgets to custom elements (issue #18)
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:
@@ -145,7 +145,7 @@ class DateRangePickerTest(SimpleTestCase):
|
||||
max_value="2024-12-31",
|
||||
)
|
||||
)
|
||||
self.assertIn("data-date-range-picker", html)
|
||||
self.assertIn("<date-range-picker", html)
|
||||
self.assertIn('data-input-name-prefix="filter-date-purchased"', html)
|
||||
self.assertIn("data-date-range-field", html)
|
||||
self.assertIn("data-date-range-calendar", html)
|
||||
@@ -166,7 +166,7 @@ class PurchaseFilterBarDateRangePickerTest(TestCase):
|
||||
|
||||
def test_purchased_uses_date_range_picker(self):
|
||||
html = self.render()
|
||||
self.assertIn("data-date-range-picker", html)
|
||||
self.assertIn("<date-range-picker", html)
|
||||
self.assertIn('data-input-name-prefix="filter-date-purchased"', html)
|
||||
# The hidden ISO inputs keep the names filter_bar.js serializes.
|
||||
self.assertIn('name="filter-date-purchased-min"', html)
|
||||
|
||||
Reference in New Issue
Block a user